React调试工具,chrome React扩展+source-map
来源:互联网 发布:阿里云买域名空间 编辑:程序博客网 时间:2024/06/08 10:08
毫无疑问调试是开发过程中相当相当痛苦的一件事情,如果没有好的工具配合那就更痛苦了!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啦!
阅读全文
0 0
- React调试工具,chrome React扩展+source-map
- 怎么调试React,React调试还不错,使用Chrome引入的source-map文件
- React调试工具:React Devtools
- React开发调试工具
- React开发调试工具
- React-Native调试工具
- react-native-debugger调试工具
- React-Native环境配置及调试工具
- chrome网上应用商店,安装React开发者工具
- react中的map遍历
- react的map遍历
- react map遍历
- React map items
- ReactJS学习系列课程(React 调试工具集)
- React
- react
- React
- REACT
- tomcat7.0线程设置参数的配置实例
- mongodb 提升性能
- C++11新特性学习笔记—变长参数的宏定义以及__VA_ARGS__
- leetcode Best Time to Buy and Sell Stock 系列
- The Proposal of Service Oriented Data Mining System for Solving Real-Life Classification--阅读笔记
- React调试工具,chrome React扩展+source-map
- PHP自动加载机制[1]---__autoload操作详解
- 动态填充checkbox的选项,及获取值
- 使用HAL库、STM32CubeMX和Keil 5开发入门教程(一):点亮一盏LED灯(NUCLEO-F411RE)
- C#流总结(文件流、内存流、网络流、BufferedStream、StreamReader/StreamWriter、TextReader/TextWriter)
- IOS开发--微信支付
- 织梦去掉最后一个循环符号“|”的代码
- 计算机网络面试知识点【一】
- 深入理解C#的装箱和拆箱