1.外掛下載

首先，下載react-eveloper-tools開發除錯工具外掛。

谷歌下載.crx字尾的檔案，火狐下載.xpi字尾的檔案。

2.外掛安裝（以谷歌為例）

將下載的外掛拖入谷歌瀏覽器，然後選中允許訪問檔案網址。

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'配置。

let webpack = require('webpack');

module.exports = {
    entry: __dirname+'/src/entry.js',
    output: {
        path: __dirname+'/build',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    resolve: {//指定可以被import的檔名字尾
        extensions: ['.js', '.jsx','.sass','.ts']
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                } //將react編譯成js檔案
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //打包css檔案
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //編譯sass檔案
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            //對圖片進行打包
        ]
    },
    //4、伺服器依賴包配置
    devServer: {//注意：網上很多都有colors屬性，但是實際上的webpack2.x已經不支援該屬性了
        contentBase: "./build",//本地伺服器所載入的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true//實時重新整理
    }
}
 

效果如下：

至此，就可以斷點除錯了。