Regular Devtools的前辈们 Dan Abramov的Redux Devtools把前端框架开发者工具推向了主流视野，他在React Europe 2015上的这个演讲被疯转。Redux Devtools可以说是独领风骚，开启了新一代前端框架开发者工具的潮流。 React Devtools也可以算是前开发者工具的祖师爷之一了。React Devtools不但有常用的组件树查看功能，还能直接查看JSX代码，筛选组件，双向修改state，查看组件源码等等。 而Regular Devtools主要参考的则是Vue Devtools。Vue Devtools是一个轻量，简洁的Devtools，只实现了开发者工具中最核心的功能。而Vue与Regular在某些方面比较相似，所以Vue Devtools就成为了我开发过程中的一个重要参考。 ...
为什么我们需要开发者工具？ 现在五花八门的开源前端工具里面，有一些致力于解决前端不够工程化的问题，比如Webpack、Gulp、PostCSS。有些则致力于加强编程语言的特性，比如Babel。而有一部分工具则是为了提高开发者的体验，比如React Devtools、React Hotloader和Redux Devtools。提高开发者体验的工具，从某种角度来说，其实和其他直接参与到前端开发工作流中的工具一样，最终都是为了提高生产力。 React Devtools已经足够惊艳，而Redux Devtools带来的Time-travel Debugging和React Hotloader的热更新则让人直呼这是黑魔法。 所以，被这些开发者工具惯坏的我们，怎么能接受Regular没有Devtools的现实呢？ Regular Devtools初印象 Regular Devtools是一款Chrome拓展。主要的功能是展示组件树，以及查看每个组件的数据。开发者对组件的操作，造成组件树和数据的变化，都会在Devtools中实时展现。 比如这样： 更强大的是，你可以检查当前组件对应的DOM节点，这个节点会在Chrome Devtools中的Element Tab中出现，就像你平时习惯的右键inspect一样。 反之，如果你正在检查一个DOM元素，此时你可以切换到Regular Tab，Regular DevTools会自动选中那个DOM节点对应的Regular组件（如果那个DOM节点是Regular组件渲染出的）。 比如这样： 特性 对Regular Devtools有了初步印象之后，下面就详细介绍一下它的功能 左侧Element View显示当前页面的Regular组件树，右侧State View显示被选中组件的状态。 Element View和State View都会随着页面上组件和状态的变化实时更新。 提供DOM节点和Regular组件的双向查找：可以点击State View中的Inspect查找当前Regular组件对应的DOM节点。 也可以在Element选项卡中选中DOM节点后切换到Regular选项卡，如果被选中的DOM节点由Regular组件渲染，那么这个Regular节点会被自动选中。 页面刷新时Devtools会自动重新加载，你也可以通过顶栏右侧的按钮手动重载。 通过include方式被引入的组件将会在组件树中注明，并且在组件树种作为视觉父节点this.$outer子节点展示。 安装 读到这里，想必你一定蠢蠢欲动了，那就快来体验一下Regular DevTools吧。 Step 1 克隆Regular Devtools仓库 Step 2 打开Chorme的chrome://extensions/页面 Step 3 点击Load unpacked extension··· Step 4 选择你刚刚克隆的仓库文件夹 Step 5 大功告成! 打开一个使用了Regular组件的页面，打开Chrome Devtools，选择Regular选项卡，如果一切顺利，你将在左边的Element View看到当前页面的组件树，然后就可以开始愉快的开发了！ 注意，你的项目必须使用Regular v0.4.5或更高的版本 如果你手头上没有使用最新版Regular的项目，可以先拿这个Regular Todo例子尝鲜 开发手记 对这款Devtools的技术实现有兴趣的同学可以浏览Regular Devtools开发手记这篇博客。 已知的问题 这些问题主要是由于某些特殊组件$outer属性的指向和正常组件不同造成的。...
Ninja是一款用于前后端分离开发的本地开发服务器，也被称为是前端容器。它有以下一些特性： HTML、CSS的热重载 根据配置文件自动生成路由 根据配置文件自动读取在线/本地的虚拟数据 支持Jinja2语法（以及其他Nodejs模板） 支持路由代理 支持webpack（通过webpack-dev-middleware） Ninja的前世今生 在木犀，之前我们的前后端分离开发方案是这样的：在本地运行一个简单的Flask应用，只包含路由，在路由中读取虚拟数据并渲染Jinja2模板，然后运行这个应用，进行开发。前端模板开发完成后和后端直接对接调试。 这种方案有一些明显的问题，首先是这个Flask应用没法规范化为一个命令或是一个包，这就需要我们每次在构建前端仓库时都手动写路由等逻辑，这显然是不现实的。还有一个问题就是，Flask的Python环境与目前前端工具生态的主流Nodejs格格不入，想要接入webpack等前端工具，我们必须使用Nodejs来构建我们的dev server。 于是我们需要一款能支持Jinja2语法，同时又能满足前端开发各种需要的dev server。Ninja就在这个节点上横空出世了！ 基本用法 Ninja的上手非常简单，首先安装Ninja npm install -g ninja_cli 下面以Ninja和Webpack一起使用为例，这个例子的源代码在Ninja仓库的example文件夹下可以找到。 首先我们需要一个ninja.conf.js配置文件，当然你也可以选择用命令行参数配置。在这个文件里我们要配置一些必要的参数： module.exports = { template: "swig", // 模板引擎名 mock: "/mock/mock.json", // 虚拟数据位置 webpack: true, // 启用webpack支持 templateDir: "/template", // 模板文件目录 } 然后在webpack的配置里要注意entry和output的配置： entry: [ path.resolve(__dirname, './index.js') ], output: { path: '/', publicPath: 'http://localhost:3000/', filename: 'bundle.js' }, webpack的中间件提供静态文件，我们可以在Ninja的3000端口访问到，所以在模板中的静态文件路径可以写/+文件名。如<script src="/bundle.js"></script>。 配置好Webpack之后，我们写两个简单的模板 // base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ninja Test</title> </head> <body> <h2>I'm the head</h2> {% block content %}{% endblock %} <a href="/">index page</a> <a href="/second">second page</a> <script src="/bundle....
原文链接: Must See JavaScript Dev Tools That Put Other Dev Tools to Shame 原文作者 : Eric Elliott 译文出自 : 掘金翻译计划 “Javascript没法胜任大型应用，因为它甚至不能确定一个变量的类型，而且很难重构”~一大堆困惑的人 当我初识Javascript的时候，只有一种浏览器需要关心：NetScape。它在微软开始捆绑销售IE和操作系统之前完全统治了世界。在那些日子里，Javascript的开发者工具很弱这种观点的确是对的。 不过这个观点已经被推翻很久了，今天，Javascript已经拥有了在我见过的所有语言中最好的开发工具生态系统。 请注意，我没有说“最好的IDE”。如果你正在寻找一款统一了不同开发工具使用体验的集成式IDE，请试试为C#打造的微软Visual Studio，和Unity一起使用风味更佳。虽然我本人并没有使用过，但是听我信任的人说这很靠谱。 我用过C++和虚幻引擎。当我第一次试用的时候，我意识到web平台的开发工具仍然有很长的路要走。 不过我们已经走过了很长一段路，现在我们在JS中使用的工具让IDE神奇的自动补全看起来就像是 小孩的玩具。尤为是JavaScript的运行时工具，在我见过的所有其他语言中都没有对手。 “Javascript拥有在我见过的所有语言中最好的开发工具生态系统。” 什么是开发者工具？ 开发者工具是一套让开发者更轻松的软件集合。传统上，我们主要将IDE，linter，编译器，调试器，和性能分析器认为是开发者工具。 不过JavaScript是一种动态语言，伴随它的动态特性而来的是对运行时开发者工具的需求。JavaScript对此的需求程度很高。 为了实现我写这篇文章的初衷，我将包括对运行时工具的介绍，甚至包括一些能提升运行时开发者工具可视化和调试体验的库。开发工具与库之间的界线将开始模糊。与之而来的将是令人震惊的结果。 开发者工具一览表 Atom & atom-ternjs Chrome Dev Tools PageSpeed Insights FireFox Developer Edition BrowserSync TraceGL ironNode ESLint rtype (规范) & rfx (库) 提示: 这些是未完成的开发预览版 Babel Greenkeeper.io & updtr React Webpack + Hot module replacement Redux + Redux DevTools 关于这些工具 你的开发者生涯将围绕着这两个东西展开：编辑器，和你的运行环境（比如，浏览器，平台，和你代码的目标设备）...