详解如何在vscode里面调试js和node . js的方法步骤

  

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求。

  

作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四,详情不表,粗略概括如下:
  

  

1。打开铬开发者工具,
  2.点击进入源标签页,在页面的左侧就能看到JS代码的目录;
  3.找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是糟蹋过的,则需导入相应的源映射来映射源码。
  4 .刷新页面(如果设置断点的位置是一个事件处理函数,则直接触发这个事件即可),代码运行到断点处的时候,程序就会挂起,这时候用鼠标徘徊就可以查看当前各个变量的数值,并以此判断程序是否正常运行了。

  

但是,当我们用JavaScript开发运行在服务端的node . js程序时,Chrome开发者工具暂时派不上用场了。虽然也有办法实现在Chrome上调试,不过这不是今天我们讨论的范围。

  

还有,说用console.log的那位同学,请你先不要说话…

  

实际上,许多IDE都集成了调试的功能,包括较新版本的WebStorm就对node . js调试支持得很好。

  

但是很多开发人员会觉得IDE太重,有没有更轻量级一些的工具来实现断点调试呢?今天就要给大家安利一下在VScode上进行断点调试的方法。
  

  

一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node . js,下面介绍下怎样在vscode里面走断点。

  

  

一:在左侧扩展中搜索调试器对铬并点击安装:
  

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

二:在自己的html工程目录下面点击f5,或者在左侧选择调试按钮
  

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

,在上方
  

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

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

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

3:之后会出现laungh。json的配置文件在自己的项目目录下面
  

  

详解如何在vscode里面调试js和节点。js的方法步骤

  

4:不过对于不同的代码文件要调试的话,每次都需要修改一下配置文件
  

  

        {   “版本”:“0.2.0”,   “配置”:[{   “类型”:“铬”,   “请求”:“发射”,   “名称”:“推出Chrome反对localhost”,   “url”:“http://localhost: 8080”,   “webRoot”:“$ {workspaceRoot}”   },   {   “类型”:“铬”,   “请求”:“附加”,   “名称”:“附加到Chrome”,   “端口”:9222年,   “webRoot”:“$ {workspaceRoot}”   },   {   “名称”:“启动索引。html(禁用sourcemaps)”,   “类型”:“铬”,   “请求”:“发射”,   “sourceMaps”:假的,   “文件”:“$ {workspaceRoot}/jst test1/test1。html“#每次需要修改这里的文件地址   }   ]   }      

5:到这里就可以进行调试了,在
  

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

中选择推出指数。html(禁用sourcemaps)调试项,按f5调试,会出现,同时打开古耳浏览器,点击
  

  

详解如何在vscode里面调试js和节点。js的方法步骤
  

  

,即可进入调试阶段

  

  

调试nodejs有很多方式,可以看这一篇https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/

  

其中我最喜欢使用的还是V8检查员和vscode的方式。

详解如何在vscode里面调试js和node . js的方法步骤