安装Chrome 扩展程序后， 打开 devTool (f12)，您可以看到：

1. 一个新的react选项卡 - 用于检查react元素（如常规检查）。

2. 在源选项卡（左侧面板）中有一个新的应用程序列表，您可以在其中查看 JSX 文件并在代码中设置断点。

注意：可能需要重新启动 chrome 才能运行

有Chrome扩展它增加了另一个选项卡开发工具，并允许调试react的组分。您可以在React 文档 中查看预览并阅读有关它的更多信息。

其他浏览器尚不支持 React Debugger。

如果你使用的是 webpack，那么你可以devtool在webpack.config.js.

module.exports = {
    devtool: 'source-map'
   // rest of the webpack configurations
}

它将维护原始源代码。您可以在浏览器开发人员工具中的源选项卡下查看此源代码。（如果您使用的是 chrome/firefox，那么在源选项卡中，您可以按Ctrl + P快速搜索要调试/分析的文件。）

更多关于 webpack devtool在这里。

希望这可以帮助 ：）

-d如果您使用Browserify 和 watchify来构建源代码，它将有助于生成源映射，然后您可以跟踪导致错误的文件。