> 웹 프론트엔드 > JS 튜토리얼 > 노드 디버깅 도구를 호출하는 방법

노드 디버깅 도구를 호출하는 방법

php中世界最好的语言
풀어 주다: 2018-06-15 11:55:25
원래의
1361명이 탐색했습니다.

이번에는 Node 디버깅 도구를 호출하는 방법과 Node 디버깅 도구를 호출하는 방법에 대한 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

JavaScript 프로그램은 점점 더 복잡해지고 있으며 디버깅 도구의 중요성도 점점 더 중요해지고 있습니다. 클라이언트 스크립트에는 브라우저가 있습니다. 노드 스크립트를 디버깅하는 방법은 무엇입니까?

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. 🎜출처: 소스 코드🎜
🎜🎜🎜이 패널의 사용법은 기본적으로 브라우저 환경과 유사합니다. 여기서는 소스 패널만 소개합니다. 🎜🎜🎜🎜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中文网其它相关文章!

推荐阅读:

如何利用Node静态资源服务器

nodejs+mysql怎样操作数据库

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿