javascript - 将 React JS 添加到具有调试功能的现有网站

Question

我正在按照https://reactjs.org/docs/add-react-to-a-website.html中的步骤将 React 添加到现有网站。该过程涉及添加脚本：

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

然后，通过安装 Babel 来启用 JSX：

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

最后，运行 Babel：

npx babel --watch src --out-dir . --presets react-app/prod

这些步骤效果很好，但是如果 中的任何 JSX 文件存在语法错误src，那么 Babel 将无法转译 JSX 文件，并且转译后的 JS 文件将永远不会被写入，因此我无法调试该问题。此外，如果转译后的 JS 文件中存在运行时错误，Google Chrome 开发者控制台将显示转译后的 JS 文件中的错误，而不是原始 JSX 文件中的错误。在 Google Chrome 开发者控制台中显示 JSX 语法/运行时错误的最简单方法是什么？

标签： javascriptreactjsdebugging