怎么使用 VSCode 调试浏览器上的的 JS 代码

怎么使用 VSCode 调试浏览器上的的 JS 代码?下面本篇文章给大家介绍一下用 VSCode 调试网页的 JS 代码的方法,希望对大家有所帮助!

相比纯看代码来说,我更推荐结合 debugger 来看,它可以让我们看到代码实际的执行路线,每一个变量的变化。可以大段大段代码跳着看,也可以对某段逻辑一步步的执行来看。【推荐学习:《vscode教程》】

Javascript 代码主要有两个运行环境,一个是 Node.js ,一个是浏览器。一般来说,调试 Node.js 上跑的 JS 代码我会用 VSCode 的 debugger,调试浏览器上的 JS 代码我会用 chrome devtools。直到有一天我发现 VSCode 也能调试浏览器上的的 JS 代码,试了一下,是真的香。

具体有多香呢?我们一起来看一下。

在项目的根目录下有个 .vscode/launch.json 的文件,保存了 VSCode 的调试配置。

我们点击 Add Configuration 按钮添加一个调试 chrome 的配置。

1.png

配置是这样的:

2.png

url 是网页的地址,我们可以把本地的 dev server 跑起来,然后把地址填在这里。

然后点击 debug 运行:

3.png

VSCode 就会起一个 Chrome 浏览器加载该网页,并且在我们的断点处断住。会在左侧面板显示调用栈、作用域的变量等。

最底层当然是 webpack 的入口,我们可以单步调试 webpack 的 runtime 部分。

4.png

也可以看下从 render 的流程,比如 ReactDOM.render 到渲染到某个子组件,中间都做了什么。

5.png

或者看下某个组件的 hooks 的值是怎么变化的(hooks 的值都存在组件的 fiberNode 的 memerizedState 属性上):

6.png

可以看到,调试 webpack runtime 代码,或者调试 React 源码、或者是业务代码,都很方便。

可能你会说,这个在 chrome devtools 里也可以啊,有啥特别的地方么?

确实,chrome devtools 也能做到一样的事情,但 VSCode 来调试网页代码有两个主要的好处:

  1. 在编辑器里面给代码打断点,还可以边调试边改代码。

  2. 调试 Node.js 的代码和调试网页的代码用同样的工具,经验可以复用,体验也一致。

对于第一点,chrome devtools 的 sources 其实也可以修改代码然后保存,但是毕竟不是专门的编辑器,用它来写代码比较别扭。我个人是比较习惯边 debug 边改代码的,这点 VSCode 胜出。

调试 Node.js 我们一般用 VSCode,而调试网页也可以用 VSCode,那么只要用熟了一个工具就行了,不用再去学 chrome devtools 怎么用,而且用 VSCode 调试体验也更好,毕竟是我们每天都用的编辑器,更顺手,这点也是 VSCode 胜出。

但你可能说那我想看 profile 信息呢? 也就是每个函数的耗时,这对于分析代码性能很重要。

这点 VSCode debugger 也支持了:

7.png

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: