如何调试你 Node 编码?下边本文给大家介绍一下二种比较常见的调节 Node.js 的形式,有一定的实用价值,希望能帮助到大家!
有些时候,我烦恼于 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
结论如下所示:
结果出来一个连接——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 详细地址。
能够看见页面如下所示:
第三种方法
Chrome 浏览器 HTTP 监视插口网页页面,开启 dev tool,执行完 node --inspect=8888 index.js
后能够看见这一标志,点击一下:
就能发生跟电脑浏览器一样的调节网页页面,例如 Sources Panel查询脚本制作、Profile Panel 检测性能等。
此外,能够浏览访问 chrome://inspect/#devices
,能够看见现阶段电脑浏览器监视的所有 inspect。
Vscode 调节
除开电脑浏览器以外,各种热门的 IDE 也支持 Node.js 的调节,本文以 Vscode 为例子。
Launch Configuration
开启调节网页页面,给大家 Node 新项目添加一个 launch 配备:
挑选 Node.js
那么就会在工程网站根目录形成相对应的文档 .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、或者点击如下所示按键:
结论:
能够看见,在左边可以显示现阶段修饰符数值,调用堆栈等相关信息,右上角也可以逐渐调节函数公式、重新启动等服务,十分强大。
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.js 的形式。第一种 Node.js 根据 websocket 的形式将信息的传递给 Chrome 电脑浏览器,我们直接在 Chrome 内进行调节。第二种就是利用 Vscode Launch Configuration,自定配备的形式进行调节。根据 Attach to Node Process Action 的形式,能够方便快捷的调节后台运行的 Node.js 编码,而无需配备。
大量node基本知识,请访问:nodejs 实例教程!!
以上就是关于聊一聊调节 Node.js 代码的两种形式的具体内容,大量欢迎关注AdminJS其他类似文章!