如何调试你 Node 编码?

lxf2023-03-16 19:58:01

如何调试你 Node 编码?下边本文给大家介绍一下二种比较常见的调节 Node.js 的形式,有一定的实用价值,希望能帮助到大家!

如何调试你 Node 编码?

有些时候,我烦恼于 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

结论如下所示:

如何调试你 Node 编码?

结果出来一个连接——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 详细地址。

能够看见页面如下所示:

如何调试你 Node 编码?

第三种方法

Chrome 浏览器 HTTP 监视插口网页页面,开启 dev tool,执行完 node --inspect=8888 index.js 后能够看见这一标志,点击一下:

如何调试你 Node 编码?

就能发生跟电脑浏览器一样的调节网页页面,例如 Sources Panel查询脚本制作、Profile Panel 检测性能等。

如何调试你 Node 编码?

此外,能够浏览访问 chrome://inspect/#devices,能够看见现阶段电脑浏览器监视的所有 inspect。

如何调试你 Node 编码?

Vscode 调节

除开电脑浏览器以外,各种热门的 IDE 也支持 Node.js 的调节,本文以 Vscode 为例子

Launch Configuration

开启调节网页页面,给大家 Node 新项目添加一个 launch 配备:

如何调试你 Node 编码?

挑选 Node.js

如何调试你 Node 编码?

那么就会在工程网站根目录形成相对应的文档 .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"
    }
  ]
}

按 F5、或者点击如下所示按键:

如何调试你 Node 编码?

结论:

如何调试你 Node 编码?

能够看见,在左边可以显示现阶段修饰符数值,调用堆栈等相关信息,右上角也可以逐渐调节函数公式、重新启动等服务,十分强大。

Attach to Node Process Action

根据 Attach to Node Process Action 的形式,大家能直接调节运行中的 Node.js 过程。

就像我们先启动项目——npm run start

随后 command shift p(window Ctrl Shift p),键入 Attach to Node Process Action,回车键,随后选定运行时过程再回车键,就能跟上边配备一样调试代码了。

如何调试你 Node 编码?

如何调试你 Node 编码?

汇总

文中归纳了二种比较常见的调节 Node.js 的形式。第一种 Node.js 根据 websocket 的形式将信息的传递给 Chrome 电脑浏览器,我们直接在 Chrome 内进行调节。第二种就是利用 Vscode Launch Configuration,自定配备的形式进行调节。根据 Attach to Node Process Action 的形式,能够方便快捷的调节后台运行的 Node.js 编码,而无需配备。

大量node基本知识,请访问:nodejs 实例教程!!

以上就是关于聊一聊调节 Node.js 代码的两种形式的具体内容,大量欢迎关注AdminJS其他类似文章!