是一种流行的 JavaScript运行时,与谷歌 Chrome浏览器使用相同的 V8 引擎。它是跨平台的,在创建 Web 服务器、构建工具、命令行工具等方面越来越受欢迎。
(资料图片仅供参考)
但是,在我们编写代码并运行它之后,如果出现问题,事情就不会那么清楚了。如果幸运的话,你的代码可能会崩溃并显示一条明显的错误消息。如果你不走运,你的应用程序还是能运行的,但是最后的结果就不尽人意了。
调试是修复软件 Bug的艺术。修复 Bug通常很简单,更正一个字符或编辑一段代码就可能解决了问题。但是找到 Bug的原因就是另一回事来,开发人员通常会花费非常多的时间来查找问题的根源。
有一些方法可以尽可能的避免 Bug:
Git等源代码控制系统来管理代码修订。这些工具可以帮助其他人检查更新并定位错误出现的方式、时间和位置。 Bug跟踪系统,例如 Jira、FogBugz或 Bugzilla。使用这些报告 Bug、突出重复、记录重现的步骤、确定严重性、计算优先级、分配开发人员、记录讨论和跟踪修复进度。 TDD是一种开发模式,它鼓励开发人员在编写代码之前先编写代码来测试函数的运行情况。 没有任何解决方案可以根除所有的 Bug,我们可能会在在所有的编程语言中遇到以下类型。
当你的代码没有遵循语言的规则时,就会导致错误。通常,它可能是语句拼写错误或缺少括号。
VS Code等优秀的代码编辑器有助于在我们尝试运行 之前发现常见的 问题:
你还可以使用 ESLint等代码检查器来发现其他语法问题或与正常编码风格的偏差。使用以下命令将 ESLint安装为全局 模块:
npmieslint-g然后从命令行检查 JavaScript文件:
使用 ESLint for VS Code extension会更容易,它会在你编码时验证代码:
逻辑错误意味着你的代码可以正常运行但没有按预期工作。例如,用户无法使用有效的凭据登录;报告显示不正确的统计信息,用户数据未保存到数据库等。原因可能是任何原因:
if (x > 5)而不是 if (x < 5)通常需要单步执行代码并检查执行期间特定点的状态。
当应用程序执行时,运行时错误变得很明显。它可能不会发生并且可能是由无效的用户输入引起的,例如
众所周知,运行时错误最难以复现,因此良好的日志记录必不可少。
操作系统中设置的环境变量可以控制 应用程序的设置。最常见的,我们通常在调试时或在实时服务器上把 NODE_ENV设置为 development、production
你可以在 Linux/macOS上设置环境变量:
NODE_ENV=development在 Windows(传统 DOS)命令提示符下:
setNODE_ENV=development或 Windows Powershell:
$env:NODE_ENV="development"我们的应用程序可以检测环境设置并在必要时启用调试消息,例如:
//runningindevelopmentmode?constDEVMODE=(_ENV==="development");if(DEVMODE){("applicationstartedindevelopmentmode");}NODE_DEBUG使用 启用调试消息。(下面的章节会详细讲解)。
你可以在启动应用程序时将命令行选项传递给 node或运行时。nodemon最有用的一个选项是 --trace-warnings,它在 promise无法解决或拒绝时输出堆栈跟踪:
其他选项包括:
--enable-source-maps:在使用 TypeScript等转译器时启用 SourceMap --throw-deprecation: 使用不推荐使用的功能时抛出错误 --inspect:激活 V8 Inspector(请参阅下面的 V8 Inspector部分)。 调试应用程序最简单的方法就是在执行期间将值输出到控制台:
(`ConardLi:${myVariable}`);一些开发人员声称你永远不应该使用 (), 因为这样会变更代码,并且存在更好的调试选项。但我还是认为控制台打印日志记录是一种更快速实用的选择,查找和修复错误比你使用的查找方法更重要。我们还应该考虑使用 ()之外的其他方法:
()接受逗号分隔的值列表。例如:
letx=17;("x:",x);//x:17使用 ES6解构也可以提供类似的输出:
({x});//{x:123}可以格式化对象以便于阅读,()会为你完成更复杂的工作:
(myObject,{depth:null,color:true});标准 util模块提供了一个 debuglog方法,它可以有条件地将日志消息写入 STDERR:
constutil=require("util");constdebuglog=("myapp");debuglog("myappdebugmessage[%d]",123);当你将 NODE_DEBUG环境变量设置为 myapp或通配符 (如或my) 时,控制台将显示这些调试信息:
MYAPP4321:myappdebugmessage[123]实际上是包装了 V8 JavaScript引擎。V8包含自己的检查器和调试客户端,你可以从 inspect参数开始(注意不要将其与下面使用 Chrome调试 应用程序 --inspect中描述的标志混淆):
调试器在第一行暂停并显示 debug提示:
$<Debuggerlisteningonws:///b9b6639c-bbca-4f1d-99f9-d81928c8167c<Forhelp,see:/en/docs/inspector<...ok<Debuggerattached.<const>4port=([2]||||3000),5http=require("http");6我们可以输入 help来查看命令列表:
cont或者 c:继续执行 next或者 n:运行下一个命令 step或 s: 进入一个被调用的函数 outor: 跳出一个被调用的函数并返回它的调用者 pause: 暂停运行代码 您还可以:
watch ("x")查看变量值 setBreakpoint()/sb()命令设置断点(或者你也可以插入 debugger;语句) .exit退出调试器 这听起来确实有点笨拙,不过在没有其他选择或者你想自虐的话,可以尝试使用下内置的调试客户端。
使用 --inspect标志启动 V8检查器(nodemon也支持这个标志。):
它会启动调试器,并且侦听 :
Debuggerlisteningonws:///4b0c9bad-9a25-499e-94ff-87c90afda461如果你在另一台设备或 Docker容器上运行 应用程序,请确保端口 9229可访问并使用以下方式授予远程访问权限:
node--inspect=您可以使用 --inspect-brk替代 --inspect来停止第一个语句的处理,这样你就可以逐行执行。然后打开 Chrome浏览器(或任何其他基于 Chromium的浏览器)并在地址栏中输入 chrome://inspect:
几秒钟后,你的 应用程序应就会显示为远程目标。如果没有找到,请选中 Discover network targets并单击 Configure按钮来添加运行应用程序的设备的 IP地址和端口。单击目标的检查链接来启动 DevTools,如果你使用之前使用过浏览器调试客户端应用程序,这应该很熟悉。
要直接从 DevTools加载、编辑和保存文件,请打开 Sources看板,单击 Add folder to workspace,选择 文件的位置,然后单击 Agree。现在可以从左侧窗格或按 Ctrl| 打开你应用程序的任何脚本,Cmd+P并输入文件名。单击任意行号来设置断点(显示为蓝色标记):
断点指定调试器可以暂停处理的位置,这允许我们可以检查程序的状态,包括局部和全局变量。我们可以定义任意数量的断点或向代码中添加 debugger语句,这些语句在调试器运行时也会停止处理。
右侧面板提供以下内容:
Watch面板,你可以在其中通过单击+图标并输入其名称来监视变量 Breakpoints面板,你可以在其中查看、启用或禁用断点 Scope面板,你可以在其中检查所有变量 Call Stack面板,你可以在其中查看为达到这一断点而调用的函数。 在 Paused on breakpoint消息上方出现一行图标。
从左到右,这些图标执行以下操作:
resume execution: 继续处理到下一个断点 step over: 执行下一个命令但停留在当前函数内,不要跳入它调用的任何函数 step into:执行下一个命令并跳转到它调用的任何函数 step out: 继续处理到函数结束,返回调用命令 step: 类似于 step into,只是它不会跳转到 async函数中 pause on exceptions:每当发生错误时停止处理。 假设你有一个运行 1700次迭代的循环,但你对最后一次的状态感兴趣:
for(leti=0;i<1700;i++){//setbreakpointhere?}您可以右键单击该行,选择 Add conditional breakpoint,然后输入条件,例如 :
i=999条件断点将会显示为黄色而不是蓝色。
日志点就像 (),没有代码! 当代码执行一行时输出表达式,但与断点不同的是,处理不会暂停。想要添加日志点,只需右键单击任意一行,选择 “Add log point”,输入表达式,例如:
"loopcounteri",iVS Code支持 并具有内置的调试客户端。在本地系统上运行 应用程序时无需配置。打开你的启动脚本(通常是 ),激活 Run and Debug看板,单击运行和调试 按钮,然后选择 环境,单击任意行来激活断点。
如果你正在运行一个 Web 应用,可以在浏览器中打开它,VS Code会在遇到断点或 debugger语句时停止执行:
VS Code调试类似于带有 Variables、Watch、Call stack和 Breakpoints面板的 Chrome DevTools。Loaded Scripts面板显示应用程序加载的脚本,可能也包括 内部的脚本。下面是一些工具栏的操作:
resume execution: 继续处理到下一个断点 step over: 执行下一个命令但停留在当前函数内,不要跳入它调用的任何函数 step into:执行下一个命令并跳转到它调用的任何函数 step out: 继续处理到函数结束,返回调用命令 和 Chrome DevTools一样,你可以右击任何一行来添加:
x > 3. URL: { }如果你想在另一台设备、虚拟机上调试代码,或者需要使用其他启动选项(例如 nodemon)
编辑器将启动配置存储在项目隐藏文件夹内的 文件中。要生成文件,请单击 “create a launch” 面板顶部的 create 文件链接,然后选择 环境。
您可以使用 add configuration按钮将任意数量的配置设置对象添加到 "configurations" 数组。VS Code可以:
进程本身,或者 Web Socket服务器,可能在远程机器或 Docker容器上运行。 上面的屏幕截图显示了 nodemon启动配置。Add Configration按钮提供了一个 nodemon选项,因此你应该编辑该 "program" 属性来指向你的入口脚本 ( ${workspaceFolder}/)。
保存 ,然后从 “Run and Debug” 面板顶部的下拉列表中选择 nodemon,然后单击绿色运行图标:
nodemon将启动你的应用程序,然后你就可以像以前一样编辑代码并设置断点或日志点。
要了解更多信息,请参考 /docs/editor/debugging#_launch-configurations
VS Code可以调试任何 应用程序,但下面的扩展可以让调试变得更简单:
Remote - Containers:连接运行在 Docker容器中的应用程序 Remote - SSH:连接到远程服务器上运行的应用程序 Remote - WSL:通过 Windows上的 WSL连接 Linux上运行的应用程序 大家还有什么 项目的调试技巧,可以在留言区分享出来~
本文译自:/an-introduction-to-debugging-in-nodejs
参考:
最后,欢迎学编程的朋友们加入鱼皮的,和上万名学编程的同学共享知识、交流进步,学习原创项目并享有答疑指导服务。
往期推荐
关键词: