React开发调试工具

1.插件下载

首先，下载react-eveloper-tools开发调试工具插件。

官网下载路径：https://github.com/facebook/react-devtools

谷歌下载.crx后缀的文件，火狐下载.xpi后缀的文件。

因为谷歌插件下载需要翻墙，这里提供一个本地资源：http://download.youkuaiyun.com/detail/mafan121/9838773

2.插件安装（以谷歌为例）

打开谷歌浏览器，在路劲栏输入：chrome://extensions/

将下载的插件拖入谷歌浏览器，然后选中允许访问文件网址。

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

3.webpack.config.js配置

由于目前所有浏览器都不支持ES6，但是谷歌引入了source-map文件来识别ES6源码。所以需要添加devtool:'source-map'配置。

[javascript]  view plain  copy

 print ?

1. let webpack = require('webpack');  
2.   
3. module.exports = {  
4.     entry: __dirname+'/src/entry.js',  
5.     output: {  
6.         path: __dirname+'/build',  
7.         filename: 'bundle.js'  
8.     },  
9.     devtool: 'source-map',  
10.     resolve: {//指定可以被import的文件名后缀  
11.         extensions: ['.js', '.jsx','.sass','.ts']  
12.     },  
13.     module: {  
14.         loaders: [  
15.             {  
16.                 test: /\.js?$/,  
17.                 exclude: /(node_modules|bower_components)/,  
18.                 loader: 'babel-loader',  
19.                 query: {  
20.                     presets: ['es2015', 'react']  
21.                 } //将react编译成js文件  
22.             },  
23.             { test: /\.css$/, loader: 'style-loader!css-loader' },  
24.             //打包css文件  
25.             { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},  
26.             //编译sass文件  
27.             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}  
28.             //对图片进行打包  
29.         ]  
30.     },  
31.     //4、服务器依赖包配置  
32.     devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了  
33.         contentBase: "./build",//本地服务器所加载的页面所在的目录  
34.         historyApiFallback: true,//不跳转  
35.         inline: true//实时刷新  
36.     }  
37. }  

上面配置中devtool:是浏览器对ES6的识别，inline:是内联模式，相当于webpack-dev-server --inline。

效果如下：

至此，就可以断点调试了。