将调试器附加到包裹构建的应用程序

Question

我的项目设置如下，在package.json中，我有以下内容：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "parcel ./public/index.html --open",
  "build": "parcel build ./public/index.html NODE_ENV=production --no-source-maps --public-url ./public --out-dir ./dist",
  "lint": "eslint --ext .js,.vue src --fix"
},

我可以通过运行以下内容来启动我的项目：npm run:dev，如下所示：

To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug.
For example:
  "scripts": {
    "start": "node $NODE_DEBUG_OPTION server.js"
  }

> impcentral@1.0.0 dev /Users/william/imp/src/impCentral
> parcel ./public/index.html --open

Server running at http://localhost:63188 - configured port 1234 could not be used.

正如您所知，它并没有在WebStorm中的断点处停止。我尝试在package.json中传递$NODE_DEBUG_OPTION，但无济于事。

任何有想法的人，也可以在Visual Studio Code中尝试此方法。

Answer 1

除非您需要调试宗地本身，否则无需在调试器中运行NPM配置。由包裹提供的应用程序在浏览器中运行时，您必须使用JavaScript Debug运行配置对其进行调试。

• 通过运行npm run dev（在WebStorm或终端中）启动您的应用
• 使用服务器URL（在您的情况下为http://localhost:1234或http://localhost:63188）创建 JavaScript调试运行配置：

• 选择此配置，然后按 Debug