详细说明如何在vscode中调试js和node.js

在开发过程中，一次写出完美无瑕的程序几乎是不可能的。在断点处调试代码是常见的需求。

作为前端开发工程师，我们过去开发的JavaScript程序都是在浏览器端运行的，利用Chrome提供的开发工具可以方便地调试源代码断点。共有四个步骤，细节未列出，大致总结如下：

1.打开Chrome开发者工具；2.点击进入Sources选项卡，在页面左侧可以看到JS代码的目录；3.找到需要设置断点的源文件，点击鼠标左键需要中断哪一行代码来设置断点。如果你的代码很丑，你需要导入相应的源代码映射来映射源代码。4.刷新页面(如果在事件处理程序中设置了断点，则可以直接触发此事件)。当代码运行到断点时，程序将挂起。这时可以用鼠标悬停查看各种变量的当前值，判断程序是否正常运行。

但是，当我们使用JavaScript开发运行在服务器端的Node.js程序时，Chrome开发工具暂时没有用。虽然在Chrome上有调试的方法，但这超出了今天讨论的范围。

还有，那个说要用console.log的同学，请你先别说话…

实际上，许多ide都集成了Debug功能，包括更新版本的WebStorm，它非常支持Node.js调试。

但是很多开发人员觉得IDE太重了。你有没有更轻的工具来调试断点？今天我就给大家安利一下如何调试VScode上的断点。

一般来说，每个人都在浏览器端调试js，但有时他们希望像在后台一样在代码工具中调试js或node.js。下面是如何在vscode中断点。

1、用于调试js

1.在左扩展中搜索Chrome调试器，然后单击安装：

第二：在你自己的html项目目录下点击f5，或者选择左边的调试按钮

，在顶部

，选择下拉按钮，会有一个添加，选择chrome

3:之后，laungh.json的配置文件将出现在您自己的项目目录下

4:但是，如果要调试不同的代码文件，每次都需要修改配置文件

{ 'version': '0.2.0 '，' configurations ' :[{ ' Type ' : ' Chrome '，' request': 'launch '，' name': 'Launch Chrome对抗localhost '，' URL ' : ' http://localhost :80 '，' webRoot ' : ' $ { workspaceRoot } ' }，{ ' Type ' 3: ' Chrome '，' request ' : ' attach '，' name

选择“启动index.html”的调试项目，按f5调试，会出现。同时，打开谷歌浏览器并点击

，可以进入调试阶段

2、用于调试node.js

调试nodejs的方法有很多。你可以阅读这篇文章。

其中，我最喜欢用V8 Inspector和vscode。

在vscode中，单击蜘蛛按钮

您可以在出现debug的地方看到边栏，然后添加配置

选择环境

您可以看到文件launch.json.

启动时，选择相应的配置，然后单击指向右侧的绿色三角形

启动模式和连接模式

{ 'version': '0.2.0 '，' configurations ' :[{ 'type': 'node '，' request ' : ' Launch Program '，' Program ' : ' $ { workspaceRoot }/index . js ' }，{ ' type ' : ' node '，' request': 'attach '，' name': 'Attach to Port '，' Address' :' localhost '，' Port '连接模式是连接已启动的服务。比如你已经在外面启动了项目，突然需要调试。您不需要关闭已启动的项目并在vscode中重新启动它。只要在附加模式下启动它，vscode就可以连接到启动的服务。调试结束了，直接断开就行了，明显比启动方便。

使用npm在调试中启动

很多时候，我们在package.json的脚本中编写很长的启动命令和配置，例如

脚本' : { ' start ' : ' node _ env=production port=8080 babel-node。/bin/www '，' dev' : '节点mon-inspect-exec babel-node-preferences env。/bin/www'}

{ 'name': '通过NPM启动'，' type': 'node '，' request': 'launch '，' runtimeExecutable': 'npm '，' runtimeArgs': [ 'run-script '，dev' /此处的Dev对应于package.json中脚本中的Dev '，' port ' : 9229//此端口是调试端口，而不是项目启动端口}，通过在debug中使用nodemon启动

只使用npm启动，虽然在dev命令中使用了nodemon，程序可以正常重启，但是重启之后，调试就断开了。因此，vscode需要使用nodemon来启动项目。

{ 'type': 'node '，' request': 'launch '，' name': 'nodemon '，' runtimeExecutable ' : ' nodemon '，' Args ' :[' $ { workspaceRoot }/bin/www ']，Restart' : true，' protocol' :' inspector '，//相当于-inspecting ' source maps ' : true '，' console ' : '集成终端'，' internal coloptions ' 3333333330

节点mon-inspect-exec babel-node-预置env。/bin/www非常方便，项目可以正常重启，每次重启都会启动调试功能。

但是，我们不想一直打开调试功能。

这需要使用上面提到的连接模式。

使用以下命令正常启动项目

节点mon-inspect-exec babel-node-预置env。/bin/www当我们想要调试时，在vscode的调试中运行以下配置

{'type' :' node '，' request' :' attach '，' name' :' attach to node '，' restart' : true，' port' : 9229}这些都是本文的内容。希望对大家的学习有帮助，多多支持我们。