无法在WebStorm上运行带有断点的调试器

Question

我在WebStorm的这个项目中设置了几个断点：

https://codesandbox.io/s/l4jjvzmp47

要查看其工作原理，请自己进行代码审查。它通常是用yarn start编译的，但是我不能从WS中“运行”或“调试”。它引发了我错误：

import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:983:16)
    at Module._compile (internal/modules/cjs/loader.js:1033:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1143:12)
    at internal/main/run_main_module.js:16:11

Process finished with exit code 1

我试图在WS中设置Babel，但似乎已经非常合适，我无法正确传递路径。以及如何使其运行，可通过断点进行调试？

Answer 1

从错误消息看来，您正在尝试使用Node.js运行React组件（通过右键单击.js文件并从其右键单击菜单中选择Debug）。 React应用程序通常在浏览器中执行，这是用ES6 + JSX编写的客户端代码，不能由既不支持该语法本身也不包含运行它的API的Node.js执行。您必须使用react-scripts start构建应用程序并启动托管在其上的服务器，然后使用JavaScript Debug运行配置在浏览器中对其进行调试。

请参阅https://www.jetbrains.com/help/webstorm/2019.2/react.html#react_running_and_debugging和https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/有关调试React应用的更多信息

Answer 2

类似“ import”的导入不适用于nodejs。如果要调试应用程序，请在浏览器窗口中进行调试。您可以在需要的函数或方法中键入debugger;并刷新浏览器页面。