노드 디버깅 도구 사용에 대한 자세한 설명

이번에는 Node 디버깅 도구의 주의사항에 대해 자세히 설명하겠습니다. 실제 사례를 살펴보겠습니다.

2016년 Node는 Chrome 브라우저의 "개발자 도구"를 공식 디버깅 도구로 사용하기로 결정했습니다. 이를 통해 Node 스크립트도 그래픽 인터페이스를 사용하여 디버깅할 수 있어 개발자의 작업이 크게 용이해졌습니다.

이 글에서는 Node 스크립트의 디버깅 도구를 사용하는 방법을 소개합니다.

1. 샘플 프로그램

설명의 편의를 위해 샘플 스크립트를 올려드립니다. 먼저 새 작업 디렉터리를 만들고 입력합니다.

$ mkdir debug-demo
$ cd debug-demo

그런 다음 package.json 파일을 생성하고 Koa 프레임워크와 koa-route 모듈을 설치하세요. package.json 文件，并安装Koa 框架和 koa-route 模块。

$ npm init -y
$ npm install --save koa koa-route

接着，新建一个脚本 app.js ，并写入下面的内容。

// app.js
const Koa = require('koa');
const router = require('koa-route');
const app = new Koa();
const main = ctx => {
 ctx.response.body = 'Hello World';
};
const welcome = (ctx, name) => {
 ctx.response.body = 'Hello ' + name;
};
app.use(router.get('/', main));
app.use(router.get('/:name', welcome));
app.listen(3000);
console.log('listening on port 3000');

上面代码是一个简单的 Web 应用，指定了两个路由，访问后会显示一行欢迎信息。如果想详细了解代码的详细含义，可以参考Koa 教程。

二、启动开发者工具

现在，运行上面的脚本。

$ node --inspect app.js

上面代码中， --inspect 参数是启动调试模式必需的。这时，打开浏览器访问 http://127.0.0.1//3000，就可以看到 Hello World 了。

接下来，就要开始调试了。一共有两种打开调试工具的方法，第一种是在 Chrome 浏览器的地址栏，键入 chrome://inspect 或者 about:inspect ，回车后就可以看到下面的界面。

在 Target 部分，点击 inspect 链接，就能进入调试工具了。

第二种进入调试工具的方法，是在 http://127.0.0.1//3000 的窗口打开"开发者工具"，顶部左上角有一个 Node 的绿色标志，点击就可以进入。

三、调试工具窗口

调试工具其实就是"开发者工具"的定制版，省去了那些对服务器脚本没用的部分。

它主要有四个面板。

1. Console：控制台

2. Memory：内存

3. Profiler：性能

4. Sources：源码

这些面板的用法，基本上跟浏览器环境差不多，这里只介绍 Sources （源码）面板。

四、设置断点

进入 Sources 面板，找到正在运行的脚本 app.js

ctx.response.body = 'Hello ' + name;

다음으로 새 스크립트 app.js를 만들고 다음 내용을 작성합니다.

$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"

위 코드는 두 개의 경로를 지정하는 간단한 웹 애플리케이션입니다. 접속 후 한 줄의 환영 정보가 표시됩니다. 코드의 자세한 의미를 자세히 알고 싶다면 Koa 튜토리얼을 참고하세요.

2. 개발자 도구 시작

이제 위 스크립트를 실행합니다.

$ node --inspect-brk=9229 app.js

위 코드에서 --inspect 매개변수는 디버그 모드 필수입니다. 이때, 브라우저를 열고 http://127.0.0.1//3000에 접속하시면 Hello World를 보실 수 있습니다.

다음으로 디버깅을 시작할 시간입니다. 디버깅 도구를 여는 방법은 두 가지가 있습니다. 첫 번째는 Chrome 브라우저의 주소 표시줄에 chrome://inspect 또는 about:inspect를 입력하고 Enter를 누르는 것입니다. 다음 인터페이스를 볼 수 있습니다.

🎜🎜🎜대상 섹션에서 검사 링크를 클릭하세요 .디버깅 도구에 들어갈 수 있습니다. 🎜🎜디버깅 도구에 들어가는 두 번째 방법은 http://127.0.0.1//3000 창에서 "개발자 도구"를 여는 것입니다. 상단 왼쪽 모서리에 녹색 노드 로고가 있습니다. 입력하다. 🎜🎜🎜🎜🎜🎜3 디버깅 도구 창🎜🎜 🎜🎜디버깅 도구는 실제로 "개발자 도구"의 사용자 정의 버전으로, 서버 스크립트에 쓸모 없는 부분을 생략했습니다. 🎜🎜주로 4개의 패널로 구성되어 있습니다. 🎜

1. 🎜콘솔: 콘솔🎜
2. 🎜메모리: 메모리🎜
3. 🎜프로파일러: 성능🎜
🎜출처: 소스 코드🎜

🎜🎜🎜이 패널의 사용법은 기본적으로 브라우저 환경과 유사합니다. 여기서는 소스(소스 코드) 패널만 소개합니다. 🎜🎜🎜🎜4. 중단점 설정 🎜🎜🎜🎜소스 패널에 들어가서 실행 중인 스크립트 app.js를 찾습니다. 🎜🎜🎜🎜🎜11번째 줄(아래 줄)의 줄번호를 클릭하면 중단점을 설정할 수 있습니다. 🎜

$ node app.js

🎜🎜🎜🎜이 때, 브라우저가 http://127.0.0.1:3000/alice에 접속하면 페이지에는 서버가 돌아오기를 기다리고 있다는 메시지가 표시됩니다. 디버깅 도구로 전환하면 Node 기본 스레드가 일시 중지된 단계에 있음을 확인할 수 있습니다. 🎜🎜🎜🎜🎜콘솔 패널에 들어가서 이름을 입력하면 앨리스가 반환됩니다. 이는 중단점 컨텍스트에 있음을 나타냅니다. 🎜🎜🎜🎜

再切回 Sources 面板，右侧可以看到 Watch、Call Stack、Scope、Breakpoints 等折叠项。打开 Scope 折叠项，可以看到 Local 作用域和 Global 作用域里面的所有变量。

Local 作用域里面，变量 name 的值是 alice ，双击进入编辑状态，把它改成 bob 。

然后，点击顶部工具栏的继续运行按钮。

页面上就可以看到 Hello bob 了。

命令行下，按下 ctrl + c，终止运行 app.js 。

五、调试非服务脚本

Web 服务脚本会一直在后台运行，但是大部分脚本只是处理某个任务，运行完就会终止。这时，你可能根本没有时间打开调试工具。等你打开了，脚本早就结束运行了。这时怎么调试呢？

$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"

上面代码中， --inspect=9229 指定调试端口为 9229，这是调试工具默认的通信端口。 -e 参数指定一个字符串，作为代码运行。

访问 chrome://inspect ，就可以进入调试工具，调试这段代码了。

代码放在 setTimeout 里面，总是不太方便。那些运行时间较短的脚本，可能根本来不及打开调试工具。这时就要使用下面的方法。

$ node --inspect-brk=9229 app.js

上面代码中， --inspect-brk 指定在第一行就设置断点。也就是说，一开始运行，就是暂停的状态。

六、忘了写 --inspect 怎么办？

打开调试工具的前提是，启动 Node 脚本时就加上 --inspect 参数。如果忘了这个参数，还能不能调试呢？

回答是可以的。首先，正常启动脚本。

$ node app.js

然后，在另一个命令行窗口，查找上面脚本的进程号。

$ ps ax | grep app.js 
30464 pts/11  Sl+  0:00 node app.js
30541 pts/12  S+   0:00 grep app.js

上面命令中， app.js 的进程号是 30464 。

接着，运行下面的命令。

$ node -e 'process._debugProcess(30464)'

上面命令会建立进程 30464 与调试工具的连接，然后就可以打开调试工具了。

还有一种方法，就是向脚本进程发送 SIGUSR1 信号，也可以建立调试连接。

$ kill -SIGUSR1 30464

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何实现vue-router中query动态传参

vue+storejs获取数据使用说明

위 내용은 노드 디버깅 도구 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!