如何本地调试js文件

329 阅读1分钟

使用vscode内置的node调试器

以下三种方式调试都可以:

1)点击运行和调试按钮 image.png 2)点击create a launch.json file可以生成一个调试配置文件 image.png 3)在package.json配置调试命令,运行Debug Script image.png

调试服务脚本

第一种:谷歌 首先,新建一个工作目录,并进入该目录

$ mkdir debug-demo
$ cd debug-demo

然后,生成package.json文件,并安装 koa 框架和 koa-route 模块

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

接着,新建一个脚本index.js,并写入下面的内容

// index.js
const Koa = require('koa');
const router = require('koa-route');

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a53f1fcea3b43d4bdae51f8fa374df9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=723&h=568&s=38870&e=png&b=212121)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddb56a407c6c45918b01cc3e53f68fd4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=723&h=568&s=38870&e=png&b=212121)
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');

现在,运行上面的脚本

$ node --inspect index.js

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

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

image.png

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

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

image.png

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

  • Console:控制台
  • Memory:内存
  • Profiler:性能
  • Sources:源码

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

image.png

这时,浏览器访问 http://127.0.0.1:3000/alice ,页面会显示正在等待服务器返回。切换到调试工具,可以看到 Node 主线程处于暂停(paused)阶段。

调试非服务脚本

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

第一种:直接将调试代码卸载命令里面

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

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

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

第二种:--inspect-brk指定在第一行就设置断点。也就是说,一开始运行,就是暂停的状态。

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

image.png