vscode의 디버거 사용법에 대해 이야기해 봅시다.

학습 nodejs 가장 중요한 것은 무엇인가요? 어쩌면 모두가 자신만의 대답을 가지고 있을지도 모릅니다.

nodejs를 배울 때 기본 API와 일반적으로 사용되는 일부 패키지를 익히는 것 외에도 가장 중요한 능력은 디버거 사용법을 배우는 것이라고 생각합니다. 프로세스가 복잡할 때 중단점 디버깅을 사용하면 논리를 더 명확하게 하는 데 도움이 될 수 있고, 버그가 있는 경우 문제를 더 빨리 찾을 수도 있습니다. [추천 학습: "nodejs tutorial", "vscode tutorial"]

울프 삼촌은 디버거를 사용할 수 있는지 여부가 프로그래머의 nodejs 수준을 구별하는 중요한 지표라고 말했습니다.

이 글에서는 디버거의 원리와 vscode 디버거의 사용법을 공유합니다.

디버거 원리

nodejs 코드를 실행할 때 매개변수--inspect（可以打断点） 或者 --inspect-brk를 가져오면(점을 끊고 첫 번째 줄에서 끊을 수 있음) 디버거 모드에서 시작됩니다.

예, 노드가 시작되었습니다. 웹 소켓 서버인 경우 주소는 다음과 같습니다. ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

디버거가 웹 소켓 서버를 시작하는 이유는 무엇입니까?

디버거의 의미는 어딘가에서 멈추는 것입니다. 단일 단계로 실행하고 환경의 변수를 볼 수 있습니다. 따라서 중단점을 설정하고 현재 컨텍스트의 변수를 노출하는 방법은 websocket 서버를 시작하는 것입니다. 이때 websocket 클라이언트를 시작하고 서버에 연결하여 nodejs 코드를 디버깅하기만 하면 됩니다.

v8 디버그 프로토콜

연결 후 디버거 서버와 디버거 클라이언트는 어떻게 통신하나요? 여기에는 v8 디버그 프로토콜이 포함됩니다.

다음과 같이 양측이 인식할 수 있는 형식을 통해 통신합니다.

test.js의 100행에 중단점을 설정합니다.

{
    "seq":118,
    "type":"request",
    "command":"setbreakpoint",
    "arguments":{
        "type":"script",
        "target":"test.js",
        "line":100
    }
}

그런 다음 현재 범위에서 변수를 봅니다.

{
    "seq":117,
    "type":"request",
    "command":"scope"
}

표현식을 실행한 후:

{
    "seq":118,
    "type":"request",
    "command":"evaluate",
    "arguments":{
        "expression":"a()"
    }
}

계속 실행:

{
    "seq":117,
    "type":"request",
    "command":"continue"
}

이러한 방식으로 클라이언트는 디버거 서버에 코드 실행 방법을 알려줄 수 있습니다.

디버거 클라이언트

디버거 클라이언트에는 일반적으로 UI가 있습니다(물론 명령줄의 명령을 통해 디버깅할 수도 있지만 일반적으로 수행되지는 않습니다). 일반적인 js 디버거 클라이언트에는 chrome devtools 및 vscode 디버거가 포함됩니다.

간단한 js 스크립트를 작성하고 node --inspect-brk를 통해 실행합니다:

포트 9229에서 시작하는 것을 볼 수 있습니다.

그런 다음 각각 두 개의 클라이언트를 통해 연결합니다.

chrome devtools

Chrome 주소 표시줄에 chrome://inspect를 입력한 다음 구성을 클릭하여 대상 포트를 구성합니다.

지금 바로 포트 9229를 입력하세요.

그런 다음 Chrome이 대상을 검사한 것을 보고 검사를 클릭하여 디버거 서버에 연결할 수 있습니다.

이후 중단점 설정, 단일 단계 실행, 표현식 실행, 범위 변수 보기 등을 수행할 수 있습니다. 이러한 기능은 모두 v8 디버그 프로토콜을 통해 구현됩니다.

vscode debugger

vscode에서 코드를 작성하고, Chrome devtools에서 디버깅하는 것이 더 번거롭고, vscode도 디버거를 지원하므로, vscode를 사용하여 직접 디버깅할 수 있습니다.

vscode 디버깅 기능을 사용하는 방법은 프로젝트 루트 디렉터리에서 .vscode/launch.json 구성을 수정하는 것입니다.

attach

구성 항목을 추가하려면 오른쪽 하단에 있는 버튼을 클릭하세요. 여기에서 nodejs 연결을 선택하세요.

websocket 디버거 서버가 node --inspect-brk를 통해 시작되었으므로 websocket 클라이언트를 시작한 다음 9229 포트에 연결하기만 하면 됩니다.

点击左侧的按钮，就可以连上 debugger server 开始调试：

launch

这样先通过 node --inspect-brk 启动 debugger server，然后再添加 vscode debug 配置来连接上太麻烦了，能不能把这两步合并呢？

当然可以，只要添加一个 launch 的配置：

这里的 type 是 launch，就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js，还可以设置 stopOnEntry 来在首行断住。

点击调试，就可以看到能够成功的调试该 js 文件。

vscode 会启动 debugger server，然后启动 debugger client 自动连接上该 server，这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。

vscode debugger 进阶

debugger client 中我们最常用的还是 vscode，这里着重讲一下 vscode debugger 的各种场景下的配置。

sourcemap

如果调试 ts 代码，肯定不能调试编译后的代码，要能够映射回源码，这个是 sourcemap 做的事情。调试工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

这样当调试 index.js的时候，如果它是 ts 编译的出来的，就会自动找到对应的 ts。

当然，如果调试配置里面直接指定了 ts，那么要能够调试需要再配置 outFiles，告诉 vscode 去哪里找 sourcemap。

这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。

多进程调试

当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。

比如 vscode，它是基于 electron，需要启动一个主进程，一些渲染进程。主进程是通过 launch 启动的，而渲染进程则是后来 attach 的。

主进程启动的时候，通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。

outFiles 来指定 sourcemap 的位置，这样才可以直接调试 ts 源码。runtimeExecutable 是用 vscode 的运行时替代掉了 nodejs（一般不需要设置）。

然后渲染进程是后面启动的，我们通过参数配置了会启动在 9222 端口，那么只要 attach 到那个端口就可以调试该进程了。

vscode 支持多 target 调试，也就是可以在 vscode 里面同时启动 多个 debugger。可以切换不同的 debugger 来调试不同的进程。

彩蛋

debugger 只能打断点么，不是的，它还可以这么用，加日志，不污染源码。

总结

debugger 的使用是一项很重要的能力，对于 nodejs 水平的提升很有帮助。

nodejs debugger 的原理是 js 引擎会启动 debugger server（websocket），等待客户端连接，我们可以通过各种 debugger client 连上来进行调试，比如 chrome devtools、vscode debugger。

nodejs 코드를 디버그하려면 vscode 디버거를 사용하는 것이 더 좋습니다(물론 때로는 chrome devtools를 디버깅에 사용하기도 하며, chrome devtools의 메모리를 기반으로 한 메모리 분석은 메모리 누수 문제를 찾을 때 매우 유용합니다).

vscode 디버거의 사용은 주로 .vscode/launch.json에 디버깅 구성을 추가하는 것입니다.

디버깅 구성은 실행 및 연결로 구분됩니다.

• launch는 디버거 서버를 시작하고 디버거 클라이언트와 연결합니다.
• attach는 디버거 클라이언트를 시작하여 기존 디버거 서버에 연결하므로 다음을 지정해야 합니다. port

특정 구성 일반적으로 사용되는 항목은 다음과 같습니다.

• outFiles는 TS 소스 코드 및 컴파일해야 하는 기타 코드를 디버그하는 데 사용되는 소스맵의 위치를 ​​지정합니다.
• stopOnEntry는 첫 번째 줄에서 중지합니다.
• args는 일부 명령을 지정합니다. 라인 매개변수
• runtimeExecutable 실행 시 nodejs가 아닙니다. 때때로 vscode나 다른 런타임과 같이 지정해야 할 때가 있습니다

이러한 구성을 기반으로 컴파일이 필요한 다양한 시나리오나 여러 프로세스에서 nodejs 코드를 디버그할 수 있습니다.

디버거 사용법에 익숙하다면 다양한 nodejs 코드를 훨씬 더 쉽게 이해할 수 있다고 해도 과언이 아닙니다. 이 글이 모든 사람이 디버거의 원리를 이해하고 Chrome devtools 또는 vscode 디버거를 사용하여 nodejs 코드를 디버깅하는 데 도움이 되기를 바랍니다. 소스맵과 여러 프로세스를 사용하여 디버깅하는 방법을 알아보세요.

원본 주소: https://juejin.cn/post/6981820158046109703

작성자: zxg_God가 빛이 있어야 한다고 하셨어요

더 많은 프로그래밍 관련 지식을 원하시면 프로그래밍 입문을 방문해 주세요! !

위 내용은 vscode의 디버거 사용법에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!