Node.js 코드를 디버깅하는 두 가지 방법에 대해 이야기해 보겠습니다.

Node 코드를 디버깅하는 방법은 무엇입니까? 다음 기사에서는 Node.js를 디버깅하는 두 가지 일반적인 방법을 소개합니다. 여기에는 특정 참조 가치가 있으며 도움이 되기를 바랍니다.

많은 경우 Node.js 디버깅에 대해 걱정하고, console.log라는 침입적인 방법만 사용하지만, 사실 Node.js도 브라우저 디버깅만큼 편리할 수 있습니다.

이 기사의 환경:

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

이 기사의 예

이 기사의 예는 이전에 탐색한 양파 모델을 사용합니다. index.js，如下：

const Koa = require('koa');

const app = new Koa();
console.log('test')

// 中间件1
app.use((ctx, next) => {
  console.log(1);
  next();
  console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000, () => {
    console.log(`Server is starting`);
});

V8 Inspector Protocol + Chrome DevTools

v8 Inspector Protocol 是 nodejs v6.3 新加入的调试协议，通过 websocket与 Client/IDE 交互，同时基于 Chrome/Chromium 浏览器的 devtools 提供了图形化的调试界面。

我们进入项目根目录，执行（留意这个 8888 端口，后面会用到）：

node --inspect=8888 index.js

结果如下：

结果出来一个链接——ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d。这个链接是 Node.js 和 Chrome 之前通信的 websocket 地址，通过 websocket 通信，我们可以在 Chrome 中实时看到 Node.js 的结果。

如何进入 Chrome 的调试界面

第一种方式（自己尝试无效）

打开 http://localhost:8888/json/list，其中 8888 是上面 --inspect 的参数。

[
    {
        "description": "node.js instance",
        "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico",
        "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "title": "index.js",
        "type": "node",
        "url": "file:///Users/gpingfeng/Documents/Personal/Test/test-onion/index.js",
        "webSocketDebuggerUrl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d"
    }
]

很多资料说，可以通过 devtoolsFrontendUrl 就可以直接访问到，但尝试了一下，并没有成功。【可能跟我的环境有关】

第二种方式

查了一下资料，在 stackoverflow 找到对应的方案，如下：

devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d

其中 devtools://devtools/bundled/inspector.html?experiments=true 是固定的，ws 参数对应的就是 websocket 地址。

可以看到界面如下：

第三种方式

Chrome 浏览器打开 HTTP 监听接口页面，打开 dev tool，执行完 node --inspect=8888 index.js 后可以看到这个图标，点击一下：

就可以出现跟浏览器一样的调试页面，比如 Sources Panel查看脚本、Profile Panel 监测性能等。

另外，可以访问访问 chrome://inspect/#devices，可以看到当前浏览器监听的所有 inspect。

Vscode 调试

除了浏览器之外，各大主流的 IDE 都支持 Node.js 的调试，本文以 Vscode 为例。

Launch Configuration

打开调试页面，给我们 Node 项目添加一个 launch 配置：

选择 Node.js

这样就会在项目根目录生成对应的文件 .vscode/launch.json（当然你也可以手动创建），其中 program 指的就是文件入口，${workspaceFolder}

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

V8 Inspector Protocol + Chrome DevTools

v8 Inspector 프로토콜은 nodejs v6.3에 새로 추가된 디버깅 프로토콜로 클라이언트와 상호 작용합니다. /IDE는 websocket을 통해 이루어지며 Chrome/Chromium 브라우저를 기반으로 하며 devtools는 그래픽 디버깅 인터페이스를 제공합니다.

프로젝트 루트 디렉터리에 들어가서 실행합니다(나중에 사용되는 8888 포트에 유의하세요): rrreee

결과는 다음과 같습니다:

결과는 링크입니다——ws://127.0 .0.1:8888/5f5c59fc -d42b-4ab0-be15-6feb1a05ed2d. 이 링크는 이전에 Node.js와 Chrome이 통신할 때 사용했던 Websocket 주소입니다. Websocket 통신을 통해 Chrome에서 Node.js의 결과를 실시간으로 볼 수 있습니다.

Chrome 디버깅 인터페이스에 들어가는 방법

첫 번째 방법(직접 시도하면 작동하지 않음)

🎜 http 열기: // localhost:8888/json/list, 여기서 8888는 위의 --inspect 매개변수입니다. 🎜rrreee🎜devtoolsFrontendUrl을 통해 직접 접근할 수 있다는 정보가 많은데, 시도해 보았는데 작동하지 않았습니다. [저의 환경과 관련 있을 수 있습니다]🎜🎜두 번째 방법🎜🎜정보를 확인하고 stackoverflow🎜 해당 솔루션 찾기 , 다음과 같습니다. 🎜rrreee🎜여기서 devtools://devtools/bundled/inspector.html?experiments=true는 고정되어 있으며 ws 매개변수는 웹소켓 주소에 해당합니다. 🎜🎜다음과 같이 인터페이스를 볼 수 있습니다: 🎜🎜🎜🎜세 번째 방법🎜🎜Chrome 브라우저에서 HTTP 수신 인터페이스 페이지를 열고 개발자 도구를 열고 node --inspect=8888 index를 실행합니다. js 다음을 클릭하면 이 아이콘을 볼 수 있습니다: 🎜🎜🎜🎜스크립트를 볼 수 있는 소스 패널, 성능을 모니터링할 수 있는 프로필 패널 등 브라우저와 동일한 디버깅 페이지가 나타납니다. 🎜🎜🎜🎜또한 , chrome://inspect/#devices를 방문하면 현재 브라우저에서 모니터링하는 모든 검사를 볼 수 있습니다. 🎜🎜🎜

Vscode 디버깅🎜🎜브라우저 외에도 모든 주요 IDE는 Node.js 디버깅을 지원합니다. 이 문서에서는 Vscode를 예로 들어 보겠습니다. 🎜

실행 구성

🎜디버깅 페이지를 열고 노드 프로젝트에 실행 구성을 추가하세요. 🎜🎜🎜🎜Node.js를 선택하세요🎜🎜🎜🎜이렇게 하면 프로젝트 루트 디렉터리에 해당 파일 가 생성됩니다. . vscode/launch.json (물론 수동으로 생성할 수도 있음) 여기서 program은 파일 항목을 나타내고 ${workspaceFolder}는 루트 디렉토리. 🎜rrreee🎜F5를 누르거나 다음 버튼을 클릭하세요: 🎜🎜🎜🎜🎜결과: 🎜🎜🎜🎜🎜왼쪽에 현재 범위의 값, 호출 스택 및 기타 정보가 표시될 수 있으며 함수 또한 오른쪽 상단에서 단계별로 디버깅할 수 있으며, 다시 시작 및 기타 기능이 매우 강력합니다. 🎜

노드 프로세스 작업에 연결

노드 프로세스 작업에 연결을 사용하면 실행 중인 Node.js 프로세스를 직접 디버깅할 수 있습니다.

예를 들어 프로젝트를 먼저 시작하겠습니다——npm run start. npm run start。

然后 command + shift + p（window Ctrl+Shift+p），输入 Attach to Node Process Action

그런 다음 command + Shift + p(창 Ctrl+Shift+p), Attach to Node Process Action를 입력하고 Enter를 누른 다음 선택합니다. 프로세스가 실행 중이고 Enter 키를 누르면 위에서 구성한 대로 코드를 디버깅할 수 있습니다.

요약

이 문서에는 Node.js를 디버깅하는 두 가지 일반적인 방법이 요약되어 있습니다. 첫 번째 Node.js는 websocket을 통해 Chrome 브라우저에 정보를 전송하고 Chrome에서 직접 디버깅합니다. 두 번째는 Vscode 시작 구성 및 사용자 정의 구성을 통해 디버깅하는 것입니다. 노드 프로세스 작업에 연결을 통해 구성 없이 실행 중인 Node.js 코드를 편리하게 디버깅할 수 있습니다.

노드 관련 지식을 더 보려면 nodejs 튜토리얼

을 방문하세요! ! 🎜

위 내용은 Node.js 코드를 디버깅하는 두 가지 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!