Question

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

要查看其工作原理，请自己进行代码审查。它通常是用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编写的客户端代码，Node.js不能执行，既不原生支持该语法也不包含用于运行它的API。您必须使用react-scripts start构建应用程序并启动托管在其上的服务器，然后使用JavaScript Debug运行配置在浏览器中对其进行调试。

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

Answer 2

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

无法在WebStorm上使用断点运行Debbuger

2 个答案: