React调试方法

最新推荐文章于 2024-06-28 11:30:31 发布

Dragon_GL

最新推荐文章于 2024-06-28 11:30:31 发布

阅读量1.8w

点赞数

分类专栏： React 文章标签： React

本文链接：https://blog.csdn.net/u014695532/article/details/52843440

版权

React 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

做为一个React开发大白，表示不知道该怎么调试它真TMD痛苦！下面来分享下我通过阅读前人博客总结的调试方法。

浏览器扩展工具 —— 『React Developer Tools』

Facebook其实早为开发人人员提供了一个很给力的调试工具，并且可以在你的Chrome和FireFox上自由安装。对于前端开发者来说，上手使用这个工具没有任何难度。

扩展下载地址： https://github.com/facebook/react-devtools
上面包含很详细的使用说明！

注意： React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在–inline模式下即可

webpack-dev-server --inline

使用Chrome引入的source-map文件

因为截止目前几乎没有浏览器原生支持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'
  },

以上两个工具对于写React代码非常有帮助，推荐！