为什么要使用debugger本文将介绍如何使用断点进行JavaScript调试。在阅读本文之前，您需要提出一个问题：为什么要使用断点进行调试？我们首先需要承认使用断点是很有必要的，否则下面介绍的所有断点调试方法都是废话。console.log是前端开发最常用的调试方式，简单直接的解决了一些问题。但是当遇到非常复杂的问题时，console.log就会变得不方便。举个例子：如果你看过Leetcode，对于一个逻辑复杂的算法，一定有深刻的理解。如果算法的某个测试用例报错，有时仅凭目测很难找出有问题的方法。重现步骤非常繁琐的错误。重现花了10分钟，但只跟踪到某行代码，需要第二次添加日志才能继续查找问题。查看日志->添加日志->查看日志……这个过程重复了几次，今天剩下的砖块搬不动了。一段运行过程冗长的代码和一段没有注释且随机命名的代码服务端代码有过nodejs服务端开发经验的同学相信都经历过postman和ide之间的反复跳转。如果仅仅依靠日志，对于一个庞大复杂的Object，控制台是不容易看清全貌的。如果一个接口还涉及到数据库的增删改查和第三方依赖，那么要恢复上次请求的结果也是一件很痛苦的事情。在这些情况下，断点调试是非常有价值的，将调试的时间复杂度从O(n)降低到O(1)，让搬砖更开心。这是文章的内容大纲：Chrome调试器基本使用VSCode调试SPAChrome调试NodejsVSCode调试NodejsChrome调试器基本使用最简单的断点调试就是在代码中添加一个调试器，然后在浏览器中刷新页面。然后浏览器将在调试器语句处停止执行。为了便于理解，引入一个简单的例子，在一个文件夹中创建index.html和index.js，然后在index.html中导入index.js。index.js的内容如下：//国际惯例，helloworld。constgreet=()=>{constgreeting="hellodebugger";//浏览器执行这里会暂停debuggerconsole.log(greeting);};greet();console.log("jsevaluationdone");执行命令：npmi-gserveserve。然后访问http://localhost:5000并打开开发者工具。这时候我们的helloworld断点就打上了，像这样：d8090eb4-4a1f-4dfb-bf30-c08c762d66ad图中分为四个区域，蓝色区域用于文件选择，Page栏指的是当前页面。JS文件，Filesystem会显示我们系统中的文件。通常我们使用页面。粉红色是代码的行号和内容。代码行号可以点击添加新断点，再次点击取消。黄色区域用于控制代码的执行。您只需掌握前四个按钮的含义即可应对大多数场景。按钮1是让代码继续执行（resume），如果遇到下一个断点，会再次中断执行。按钮2允许浏览器执行当前行（图中的第3行），然后中断下一行的代码。按键3是进入当前功能，查看功能的具体内容。假设我们当前停在第7行greet()，点击按钮3会进入greet方法（即第2行）。如果不想再看greet方法，直接点击按钮4，跳出这个方法，返回到第8行。绿色区域可以查看变量内容和当前调用栈。debugger是最简单粗暴的断点方式，但是需要修改我们的代码。需要注意的是，上线前必须删除这些语句。也可以通过配置webpack自动去除。但是毕竟还是有点不方便，下面就来看看如何通过vscode来简化断点的方式。VSCode调试SPA应用首先我们使用Vite创建一个Vue应用进行演示（React步骤类似）。#创建vut-ts应用npminitvitecdhello-vitenpminstall#调用VSCodecli打开工程，#或者在VSCode中手动打开。code.npmrundev然后在VSCode中创建一个新文件.vscode/launch.json并填写这些内容：{"version":"0.2.0","configurations":[{"type":"pwa-chrome","request":"launch","name":"LaunchVueproject",//这里填写项目的访问地址"url":"http://localhost:3000","webRoot":"${workspaceFolder}"},]}然后用cmd+q退出你正在运行的Chrome（这一步很重要，不能跳过），按f5启动VSCode的调试功能。VSCode将帮助您启动Chrome窗口并访问上述配置中的url。这时候我们的断点就会生效，我们可以一步步控制代码的运行，找出bug的根源。这里有一个实用的小技巧，就是在BREAKPOINTS中，勾选UncaughtExceptions，这样代码报错的地方就会自动中断执行。当我们遇到错误时，使用这种方法可以节省定位问题代码的时间。另外我们可以发现，当VSCode断点生效时，ChromeDevtools也会同步显示这个断点。在VSCode中，有两种调试模式，分别是launch和attach。由于真正执行代码的是Chrome中的JS引擎，所以是否中断代码的控制权在Chrome手中。那么为什么VSCode的断点可以控制代码的中断呢？是因为VSCode通过devtools-protocol向Chrome发送指令，告诉Chrome需要暂停哪一行代码。这个发送指令的过程称为附加。launch过程包括attach，即先启动（start）浏览器，然后附加（attach）断点信息。所以附加模式是启动模式的一个子集。听起来启动模式会更方便，省去了我们手动启动浏览器的过程。但有一个问题。如果同时开发多个前端项目会怎样？每个项目启动一个调试过程，会打开多个浏览器，切换多个浏览器会很麻烦。我们可以使用附加模式来解决这个问题。首先，我们使用命令行启动Chrome。使用命令行的原因是我们需要给Chrome的启动传递参数。#Cmd+q需要退出正在运行的Chrome/Applications/Google\Chrome.app/Contents/MacOS/Google\Chrome--remote-debugging-port=9222才能运行这个命令#如果看到这个输出，说明通过参数成功DevToolslisteningonws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75bVSCode通过websocket与Chrome通信，--remote-debugging-port指定websocket使用的端口。然后我们修改launch.json文件如下：{"version":"0.2.0","configurations":[{"type":"pwa-chrome","re??quest":"attach","name":"VueApplication",//项目访问的url"url":"http://localhost:3000",//websocket端口，需要和--remote-debugging-port参数保持一致。"port":9222,"webRoot":"${workspaceFolder}"},]}注意在开始VSCode调试前需要在Chrome中打开http://localhost:3000页面。然后我们在VSCode中设置断点，刷新浏览器，代码成功停在了断点处。第二个和第n个项目可以使用相同的配置，不同的是url字段要根据项目配置修改。Chrome调试Nodejs以上就是如何调试页面，接下来我们说说如何调试nodejs应用。让我们从最简单的例子开始，创建一个helloworld://debug.js文件constgreeting='hellonodejsdebugger'debuggerconsole.log(greeting)并运行这个文件node--inspect-brkdebug.jsDebuggerlisteningonws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a求助，看：https://nodejs.org/en/docs/inspector--inspect-brk的意思是运行这个js文件，在文件的第一行设置断点。然后打开Chrome并转到Devtools。点击红框中的按钮，会打开一个nodejs专用的调试窗口，代码会在第一行中断。Nodejs调试窗口：该方法的本质是ChromeDevtool根据v8引擎的调试协议向nodejs进程发送指令，控制代码的运行。可以发现，在网页的调试中，Chrome是接收指令的一方，而在nodejs调试中，Chrome则变成了发送指令的一方。所谓从悲剧的乙方到甲方的华丽转身，node默认的websocket端口是9229，如果需要（比如端口被占用），我们可以通过一些方式改变这个端口。node--inspect=9228debug.jsDebuggerlisteningonws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87帮助见：https://nodejs.org/en/docs/inspector当我们打开Devtool时，Chrome默认检查9229端口，但是当我们更改端口号时，需要手动指定Chrome检查的地址。点击下图中的Configure按钮，输入127.0.0.1:9228，点击Done。此时RemoteTarget中会出现刚刚启动的node进程，点击inspect进入调试。使用VSCode调试Nodejs至此，我们已经达到了调试node的目的，但是还是有点繁琐，不够自动化。我们可以使用VSCode一键启动调试。用VSCode打开刚才的项目，在launch.json中输入：{"version":"0.2.0","configurations":[{"type":"pwa-node","re??quest":"launch","name":"LaunchProgram","skipFiles":["
