网站设计流行趋势,做网站爱游戏,柳州市安全教育平台,新版大都会app大家好#xff0c;我是若川#xff08;点这里加我微信 ruochuan12#xff0c;长期交流学习#xff09;。今天推荐这篇调试文章#xff0c;熟悉我的读者都知道我写的源码文章都多次强调要调试#xff0c;而且写了调试方法。点击下方卡片关注我、加个星标#xff0c;或者查… 大家好我是若川点这里加我微信 ruochuan12长期交流学习。今天推荐这篇调试文章熟悉我的读者都知道我写的源码文章都多次强调要调试而且写了调试方法。点击下方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列在纷繁复杂的代码世界中出错是难免的也许在传统的前端代码中你习惯于 console 来排查问题这是不合理的在现代的社会下调试代码是你最快找到问题的方法。这篇文章就是教你如何快速的使用调试找到问题。查找和识别错误的速度越快你下班的时间就越早。在当前 Node.js v15 版本下以前非常多的调试方式已经失效了Node.js 传统的调试协议也进行了许多升级我们按照最新的方式来告诉你如何调试。为什么要使用调试众所周知代码是写调出来的而不是猜出来的。如果不通过调试运行代码那么意味着需要去猜测代码中发生的事情YY 一下如果代码运行到这个地方这个值可能是什么。使用调试的主要好处就是可以观察程序的运行情况而不用做假设可以一次跟随程序执行一行代码。另一方面你可以控制代码执行的逻辑你可以暂定执行或者逐行运行甚至修改内存中的值让它走到另一个分支里。Node.js 内置的调试使用 Node.js 内置的调试方式是最简单直接的但是现阶段都有 IDE所以大家都不太关心底层的实现一键开启调试就行了。而实际上 IDE 的调试都是基于这个内置调试之上的。在了解内置的 Node.js 调试方式之前我们先来了解一下另一个概念断点breakpoint。断点顾名思义断点就是能断住代码执行的点一般情况下它的表现真的是个点。比如 vscode 里的断点红红的点十分醒目。image.png断点会强制任何 JavaScript 调试器在给定点暂停。这样就可以让代码执行到这个地方停下观察这行代码以及之后代码里的变量值。让我们回归传统在没有 IDE 的情况下比如文本编辑器Vim 啥的都是使用 debugger 语句来让打断点的。您使用调试器语句。您可以在代码的任何位置添加此语句比如async function initMethod() {debugger;console.log(bbb);
}initMethod();
这样我们就希望调试的时候会在这一行停下来。调试模式光有断点还不行普通情况下Node.js 会忽略这个 debugger只有开了调试模式才会暂停到这一行原因是调试器太强大有些恶意行为可以通过它注入代码。通过给 node 增加 --inspect 参数才会开启调试模式这个模式下还会开放一个默认的 9229 端口允许其他 IDE 接入。这个模式下会输出下面的信息Debugger listening on ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5
For help, see: https://nodejs.org/en/docs/inspector
ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5 是暴露的调试链接里面包含了协议host端口和一个唯一的 uuid。这是一个标准 v8 调试协议。我们执行一下这个命令。咦为啥什么反应都没有代码直接执行结束了脑中一个大大问号事实上仅仅开启调试还是不够的调试器还没有接收到足够的信息或者说没有一个展现调试的地方。node 还提供了另一个会卡住的调试命令。--inspect-brk 会停在代码的第一行等待下一步的指示用他就行了。但是这只是普通的卡住代码我们需要能支持 v8调试协议的 UI。有许多种方法可以作为 UI而最简单的就是我们电脑上一般都会有的 Chrome 浏览器。Chrome 自带了一个调试页 chrome://inspect/ 打开后如果是在本机会直接列出可调式的端口和文件地址如果在远程也可以配置 ip。点击这个 inspect 添加我们的项目后蓝色的断点条就乖乖的展现到眼前了。这个时候我们就可以进行单步调试了不需要 debugger 了。在 Chrome UI 打开的时候控制台会输出一句话。表明这个调试协议已经连上了 node 开启的调试端口。我们总结一下整个调试分为两个部分“开启 node 调试端口” “符合 v8调试协议的调试器 attach 到调试端口”。VSCode 调试VSCode 是我们最常用的 IDE集成了调试的 UI所以我们不再需要开启 Chrome 来调试了。本质和最基本的一样开启调试端口连接调试端口。只是 VSCode 本身是个编辑器可以直接在其之上打断点集成度更高这也是为什么我们一般都使用 IDE 的缘故。VSCode 提供了一个调试 UI需要用户配置一个 launch.json等价于启动命令。image.png内容如下核心是 runtimeExecutable 使用的命令以及 runtimeArgs 参数这里不再需要 --inspect 了IDE内部会处理。{// 使用 IntelliSense 了解相关属性。// 悬停以查看现有属性的描述。// 欲了解更多信息请访问: https://go.microsoft.com/fwlink/?linkid830387version: 0.2.0,configurations: [{name: test,type: node,request: launch,cwd: ${workspaceRoot},runtimeExecutable: node,runtimeArgs: [test.js],console: integratedTerminal,protocol: auto,restart: true,port: 7001,autoAttachChildProcesses: true}]
}
在上面的配置字段中有个 request 字段有两个值可以选择launch 和 attach 它表示VS Code中核心的两种调试模式。launch 指的是直接由编辑器启动直接 fork 一个进程比如我们这个示例而 attach 表示服务已经启动我们是 attach 到原来那个进程中比如上面的 Chrome 调试。_ 然后打上断点执行就行了。执行的时候我们发现命令行会发现一段话。cd /Users/harry/project/application/my_midway_app ; /usr/bin/env NODE_OPTIONS--require /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uidhttp VSCODE_INSPECTOR_OPTIONS{inspectorIpc:/var/folders/xw/yl56_kmj5nd_r0cql7rcv8640000gn/T/node-cdp.94650-2.sock,deferredMode:false,waitForDebugger:,execPath:/Users/harry/.nvs/default/bin/node,onlyEntrypoint:false,autoAttachMode:always,fileCallback:/var/folders/xw/yl56_kmj5nd_r0cql7rcv8640000gn/T/node-debug-callback-02a1ac2abe751152} /Users/harry/.nvs/default/bin/node test.js
第一个 cd 忽略我们主要看看中间这段。VSCode 启动的时候加载 bootloader.bundle.js 这个文件然后传了一堆 IPC 启动参数比如创建了一个 sock 文件其余的把 launch 里的参数翻译了一下传入。核心就是这个 bootlaoder 文件由于 VSCode 是 ts 写的这个文件的源码在这。https://github.com/microsoft/vscode-js-debug/blob/ca280351b2/src/targets/node/bootloader.ts最核心的代码是 inspectOrQueue 方法代码如下其中有几个特别关键的地方。function inspectOrQueue(env: IBootloaderInfo): boolean {// 省略// 如果没有传 --inspect则开启调试端口const openedFromCli inspector.url() ! undefined;if (!openedFromCli) {// if the debugger isnt explicitly enabled, turn it on based on our inspect modeif (!shouldForceProcessIntoDebugMode(env)) {return false;}inspector.open(0, undefined, false); }const info: IAutoAttachInfo {ipcAddress: env.inspectorIpc || ,pid: String(process.pid),telemetry,scriptName: process.argv[1],inspectorURL: inspector.url() as string,waitForDebugger: true,ppid: String(env.ppid ?? ),};if (mode Mode.Immediate) {// 同步模式直接跟着应用启动监听调试端口spawnWatchdog(env.execPath || process.execPath, info);} else {// 异步模式等进程启动attach 监听端口const { status, stderr } spawnSync(env.execPath || process.execPath,[-e,const crequire(net).createConnection(process.env.NODE_INSPECTOR_IPC);setTimeout((){console.error(timeout),process.exit(1)},10000),c.on(error,e{console.error(e),process.exit(1)}),c.on(connect,(){c.write(process.env.NODE_INSPECTOR_INFO,utf-8),c.write(Buffer.from([0])),c.on(data,e{console.error(read byte,e[0]),process.exit(e[0])})});,],{env: {NODE_SKIP_PLATFORM_CHECK: process.env.NODE_SKIP_PLATFORM_CHECK,NODE_INSPECTOR_INFO: JSON.stringify(info),NODE_INSPECTOR_IPC: env.inspectorIpc,},},);}// 省略return true;
}
不管是异步还是同步的模式其原理都是 Node.js 最基础的 “开启端口”“连接调试端口” 这两个步骤。VSCode 还会考虑到别的场景比如代码创建子进程时会将子进程也自动添加调试参数方便自动 attach 等。在这里我们会发现一个新的名词叫 AutoAttach 。这是 VSCode 在 2018 年 7 月提出的新名词微软表示用户基本都不太会写 launch.json 文件经常写错没错就是我所以为了简化写法特地做的新功能。这个功能怎么用呢简单的来说只要启动的 node 加上 --inspect 命令VSCode 就能自动监视到并且 attach 到进程里开启调试不再需要复杂的配置。开启的命令加到了选项里cmdshiftp 搜索。有几种附加方式。比较常用的是仅带标志。这样我们只要在 VSCode 终端里输入任意带有 --inspect 的命令就会自动被断点到了很香。总结一下调试到这里基本就讲完了所有的调试的原理都是一样的藉由 Node.js 原生的打开调试端口的能力不同的 IDE 才能连接到该端口进而做出更加强大的能力。比如 VSCode 不仅仅能做传统的调试也能增加配置在执行调试前后增加钩子执行自己的命令这都是扩展能力的体现。相信你看完这篇文章对 Node.js 应用的调试方式有了一定的理解写出更好的代码。最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信 ruochuan12 拉你进群。················· 若川出品 ·················今日话题2019年9月20日那时关注粉丝突破了10002020年佛系了很久运营了快两年还没到达一万关注间接说明了运营公众号的难度。我的目标是早日突破一万关注目前进度9062/10000如果你愿意帮忙宣传我的公众号助力早日突破五位数那真是太好了。欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你现在还能加我进模拟面试群若川知乎问答2年前端经验做的项目没什么技术含量怎么办点击上方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列
