javascript 使用浏览器/插件调试 JSX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27516580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging JSX using browser / plugins
提问by user544079
Is there a way to debug JSX files?
有没有办法调试 JSX 文件？
I am unable to see the .jsx files when I check the resources tab in either safari / chrome. Can we use a debugger ?
在 safari/chrome 中检查资源选项卡时，我无法看到 .jsx 文件。我们可以使用调试器吗？
回答by Elia Weiss
After you install the Chrome Extensionopen the devTool (f12) and you can see:
安装Chrome 扩展程序后，打开 devTool (f12)，您可以看到：
- A new react tab - use to inspecting the react elements (like the regular inspect).
- 一个新的反应选项卡 - 用于检查反应元素（如常规检查）。
- In source tab (left panel) a new App list where u can see the JSX files and set break points in side your code.
- 在源选项卡（左侧面板）中有一个新的应用程序列表，您可以在其中查看 JSX 文件并在代码中设置断点。
NOTE: it might be necessary to restart chrome to get it going
注意：可能需要重新启动 chrome 才能运行
回答by Hardik Modha
If you are using webpack, then you can provide devtoolconfiguration inside webpack.config.js.
如果你使用的是 webpack，那么你可以devtool在webpack.config.js.
module.exports = {
devtool: 'source-map'
// rest of the webpack configurations
}
It will maintain the original source-code. You can view this source code under source tab in browser developer tools. (If you are using chrome/firefox then in source tab you can press Ctrl + Pto quickly search for the file you want to debug/analyze.)
它将维护原始源代码。您可以在浏览器开发人员工具中的源选项卡下查看此源代码。（如果您使用的是 chrome/firefox，那么在源选项卡中，您可以按Ctrl + P快速搜索要调试/分析的文件。）
More about webpack devtool here.
更多关于 webpack devtool在这里。
Hope this helps :)
希望这可以帮助 ：）
回答by daniula
There is Chrome Extensionwhich adds another tab to Developer Tools and allows debug React Components. You can see preview and read more about it in React documentation.
有Chrome扩展它增加了另一个选项卡开发工具，并允许调试反应的组分。您可以在React 文档 中查看预览并阅读有关它的更多信息。
Other browsers doesn't have support for React Debugger, yet.
回答by zuo
Browserify & watchify with -dwill help generate source map if you are using them to build source, then you can track which file results in the error.
-d如果您使用Browserify 和 watchify来构建源代码，它将有助于生成源映射，然后您可以跟踪导致错误的文件。
