React学习笔记4：调试工具，chrome React扩展+source-map

新搭建的个人博客，本文地址：React学习笔记4：调试工具，chrome React扩展+source-map
毫无疑问调试是开发过程中相当相当痛苦的一件事情，如果没有好的工具配合那就更痛苦了！React是基于Babel的编译转码，到浏览器执行的实际上是es5代码，虽说良好的代码结构转码后可读性还是相当高，但对于我这种小白是接受不了了~
1、安装chrome扩展『React Developer Tools』（vpn、翻墙，大家懂得）
2、React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在--inline模式下即可

webpack-dev-server --inline

3、截止目前几乎没有浏览器原生支持es6标准，对于这种情况，chrome引入了source-map文件，标识es5代码对应的转码前的es6代码哪一行，唯一要做的就是配置webpack自动生成source-map文件，这也很简单，在webpack.config.js中增加一行配置即可（需要重新启动webpack-dev-server使配置生效）

  entry:{
    'index':'./src/index.js',
    'comment':'./src/comment.js',
    'commentEs6':'./src/commentEs6.js',
  },
  devtool: 'source-map',
  output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
  },

4、修改某一处为错误，然后观察结果

通过上面的两个工具，我们可以很方便的调试开发基于ES6的React啦！