开发工具是让开发人员工作更轻松的一些软件, 传统上包括集成开发环境, 代码检查工具, 编译器, 调试工具和性能测试工具

但是 JS 是一种动态语言, 伴随他动态本质而来的是对更多运行时开发者工具的需求.

Quick List

  • Atom & Atom-ternjs
  • Chrome DevTools
  • PageSpeed Insights
  • BrowserSycn
  • TraceGL
  • ironNode
  • ESLint
  • Babel
  • React
  • Webpack + Hot Module Replacement
  • Redux + Redux DevTools

关于工具, 主要是编辑器和运行时环境(比如浏览器)

主要用 Atom, 需要 atom-ternjs 来开启 JavaScript 智能识别

很多很棒的 Atom 插件

调试器: Chrome DevTools, 注意其 flame charts 和 dominators view 功能

性能审查: PageSpeed Insights

BrowserSync 是一款测试响应式布局非常好用的工具, 可以一次模拟多种浏览器(电脑, 平板, 手机)
可以监视文件, 并在文件修改的时候自动重载同步刷新浏览器, 像滚动, 点击, 表单交互等动作也会跨设别同步.

视频链接

TraceGL 是一种运行时调试工具, 可以让你在软件中的方法实时调用时观察他们, 而不是手动逐步跟踪代码

视频链接

代码检查: ESLint 可配置性特别强, 每一个选项都可以设置开启或禁用, 甚至给他们添加参数. 可以创建自己的规则, 支持插件

Babel 是一种编译器, 可以让现在的 JS 代码使用 ES6+ 尚未支持的特性, JSX 等, 工作原理是讲代码转换为等价的 ES5.

文章链接

Webpack 会将模块和以来打包成针对浏览器的静态资源, 他支持大量有趣的特性, 比如模块热拔插, 可以让当前浏览器中的代码在你修改文件的时候自动更新, 而不用刷新页面. 模块热拔插

参考资料

React: 不算开发者工具