时间戳

首页 > 解决方案 > 无法在 WebStorm 上运行带有断点的调试器

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

问题描述

我在 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，但似乎它已经很可能我无法正确传递路径。只是如何让它运行，用断点调试？

标签： javascriptreactjsdebuggingwebstorm

解决方案

From the error message is seems that you are trying to run your React component with Node.js (by right-clicking .js file and choosing Debug from its right-click menu?). React applications are normally executed in browser, this is a client-side code written in ES6 + JSX, it can't be executed by Node.js that neither supports this syntax natively nor includes the API for running it. You have to build your application and start the server it is hosted on using react-scripts start, and then debug it in browser using JavaScript Debug run configuration.

Please see https://www.jetbrains.com/help/webstorm/2019.2/react.html#react_running_and_debugging and https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ for more information about debugging React apps

推荐阅读