问题：怎么去调试React？
调试程序是我们在做软件开发中必须具备的一项能力，找错程序中的错误是一个基本的能力，但是在以前我们调试js的时候最开始的时候差不多，以前使用alert或者console.log()去调试程序，但是自从有了chrome控制台调试之后，可以像后端一样的去调试程序，感觉挺不错的，换个道理来说，React也是js写的程序，调试按道理来说应该是没得问题的，怎么在这里会出现问题了呢？
1、由于使用了React语言，然后使用webpack打包工具，我们转换后的js文件是一个中间的问题，并不是像以前的js文件，一直都是，并不需要转换，由于React需要转换，就无法定位到原始的文件中去查看。
2、就是刚刚的问题，由于React的思想就是组件化的封装，啥子都是组件，通过组件绑定到某一个div的id上面的，所有无形中，又增加了我们调试的难度，需要经过中间的一层去处理，所以当时我去学习的时候，就考虑到了怎么调试的问题，去看了看视频，当时都没有说怎么去调试的问题诶！相当的捉急。
参考文档
使用
1、安装React Developer Tools插件在Chrome，你可以使用翻墙工具，或者到github上找，不过好像最近github被封了，也是需要翻墙的，（打个广告：一只红杏几十块一年还不错），安装好了之后在F12之后在Tab上有个React的Tab哈哈，成功了一步。
2、我们要创建个项目啊
npm init
npm insatll --save-dev webpack webpack-dev-server
npm install --save react reac-dom
npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react babel-corepackage.json
{
"name": "demo02-jet",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"react-dom": "^15.4.2",
"webpack": "^2.2.1"
},
"dependencies": {
"webpack-dev-server": "^2.4.1"
}
}
webpack.config.js 配置webpack的打包配置
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
};index.html
<html>
<body>
<div id="wrapper"></div>
<script src="bundle.js"></script>
</body>
</html>
main.jsx创建了一个组件，简单的演示一下子
var React = require('react');
var ReactDOM = require('react-dom');
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.querySelector('#wrapper')
);3、启动项目 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 这里讲了很多的webpack的使用
1.使用 webpack
2使用 webpack-dev-server
这两种都可以，这里我使用第二种会打开一个8080端口，这里我使用第二种不带参数的。
网上说的，无法检测，我这里试了不需要都可以，直接的这样就好了。
React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在--inline模式下即可
当使用，show source定位到源文件时候，是定位到了打包后文件的位置，而不是原始的main.jsx的位置。 
4、这种是非常好的，可以直接定位到原始的文件 使用Chrome引入的source-map文件
因为截止目前几乎没有浏览器原生支持es6标准。所以，针对这种情况，chrome引入了source-map文件，标识es5代码对应的转码前的es6代码哪一行。对于开发人员来说，你唯一要做的就是配置webpack自动生成source-map文件，在webpack.config.js中增加一行配置即可（这个需要你去重新启动webpack-dev-server，以使配置生效）。可以定位到源文件，而不是打包后的文件。
增加这么一句话 ：devtool: ‘source-map’,
module.exports = {
devtool: 'source-map',
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
};然后show-source的时候，会找到原始的文件的位置啊哈哈！键值是程序员的福利，在这里你可以进行调试哦！哈哈。 
看看别人的动态图，我自己截图了哈哈
