写点什么

新手向:前端程序员必学基本技能——调试 JS 代码

作者:若川
  • 2022 年 6 月 27 日
  • 本文字数:1809 字

    阅读完需:约 6 分钟

1. 前言

大家好,我是若川为了能帮助到更多对源码感兴趣、想学会看源码、提升自己前端技术能力的同学。我倾力最近组织了源码共读活动,已进行三个月,大家一起交流学习,共同进步,很多人都表示收获颇丰。


想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQueryunderscorelodashvuexsentryaxiosreduxkoavue-devtoolsvuex4koa-composevue 3.2 发布vue-thiscreate-vue玩具vite等 10 余篇源码文章。


最近组织了源码共读活动,每周大家一起学习 200 行左右的源码,共同进步。常有小伙伴在微信群里提关于如何调试的问题,而我写的调试方法基本分散在其他文章中。所以特此写一篇关于调试的文章。此外,之后写文章也可以少写些调试相关的,只需持续更新这篇文章。


本文仓库地址,求个star


阅读本文,你将学到:


1. 学会基本调试技能
复制代码

2. 推荐安装或者更新到最新版 VSCode

官网下载安装 VSCode


如果你的VSCode不是中文(不习惯英文),可以安装简体中文插件。<br>如果 VSCode 没有这个调试功能。建议更新到最新版的 VSCode(目前最新版本 v1.62.2)。

3. 配置 auto-attach

VSCode 调试 JS 的方法有很多,目前比较推荐的就是无需配置的 auto-attach


默认无需配置,超级好用


ctrl + shift + p,打开输入 >auto attach。默认是智能(smart)。如果不是,可以查看设置成智能,或者根据场景自行设置成其他的。




更多可以查看官方文档:nodejs-debugging

4. 调试 Node.js 代码

我特意新建了一个仓库。供读者动手实践。


git clone https://github.com/lxchuan12/nodejs-debugging.gitcd nodejs-debugging# npm i -g yarnyarn install
复制代码


一般来说,从 package.json 文件查看入口,其中 main 字段会说明入口文件是什么。同时查看 scripts 脚本文件。


一般提前在入口文件打好断点。

4.1 调试操作方式

操作方式一:package.json


package.json 找到相应的 scripts。鼠标悬浮在相应的命令上,会出现运行命令调试命令两个选项,选择 调试命令 即可进入调试模式。或者点击 scripts 上方的 调试,再选择相应的命令。也可以进入调试模式。



操作方式二:终端命令


通过快捷键 ctrl + 反引号 打开终端。或者通过查看 —— 终端打开VSCode` 终端。


在终端进入到目录。执行相应的脚本。


VSCode 则会自动进入到调试模式。如下图所示:



接着我们看按钮介绍。

4.2 调试按钮介绍

详细解释下几个调试相关按钮。


  • 继续(F5): 点击后代码会直接执行到下一个断点所在位置,如果没有下一个断点,则认为本次代码执行完成。

  • 单步跳过(F10):点击后会跳到当前代码下一行继续执行,不会进入到函数内部。

  • 单步调试(F11):点击后进入到当前函数的内部调试,比如在 fn 这一行中执行单步调试,会进入到 fn 函数内部进行调试。

  • 单步跳出(Shift + F11):点击后跳出当前调试的函数,与单步调试对应。

  • 重启(Ctrl + Shift + F5):顾名思义。

  • 断开链接(Shift + F5):顾名思义。



调试走到不是想看的文件时(或者完全不是这个目录下的文件时),可以选择单步退出按钮或者重新调试。

5. 其他调试

由于很多项目都配置了代码压缩,难于调试。所以开发环境下,一般通过配置生成 sourcemap 来调试代码。大部分开源项目(比如 vue、vue-next 源码)也会在贡献指南中说明如何开启 sourcemap


普通 webpack 配置


devtool: 'source-map',
复制代码


调试 vue-cli 3+ 生成的项目。


Vuejs 官方文档调试


// vue-cli 3+module.exports = {  configureWebpack: {    devtool: 'source-map'  }}
复制代码


chrome 调试代码其实也类似。在 chrome devtoolssource 面板找到相应文件,去打断点再调试。

6. 其他参考链接

如何调试代码看以下这些参考链接,动手练习可以学会,Node.js 也类似。


前端容易忽略的 debugger 调试技巧


慕课网调试课程


掘金 chrome 免费小册


慕课网 nodejs 调试入门

7. 总结

文章比较详细的介绍了 VSCode 调试 Node.js 调试代码的基本技能,Chrome 调试代码其实也是类似。调试代码是前端程序员基本技能,必须掌握。组织了源码共读活动发现很多人都不会,或者说不熟悉。让我感到十分诧异。所以写下这篇文章分享给读者。


建议大家可以克隆我的项目,动手实践,多操作几次就熟悉了。


git clone https://github.com/lxchuan12/nodejs-debugging.gitcd nodejs-debugging# npm i -g yarnyarn install
复制代码


最后可以持续关注我 @若川。欢迎与我交流,参与 https://juejin.cn/post/7079706017579139102 活动,每周大家一起学习 200 行左右的源码,共同进步。

发布于: 13 小时前阅读数: 7
用户头像

若川

关注

还未添加个人签名 2018.09.11 加入

https://lxchuan12.gitee.io

评论

发布
暂无评论
新手向:前端程序员必学基本技能——调试JS代码_JavaScript_若川_InfoQ写作社区