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

上一篇: react源码解析003 - 关于eslint 下一篇:React-Native组件

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

发布时间：2019-06-08 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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啦！