答应我，不要再用console.log调试了 故事背景 事情是这样的，因为我经常会接到一些 CR，就时常会看到推上来的 console.log 写在代码里没删... 这太要命了，要知道这在明治维新时期可是要浸猪笼的 所以，今天正好趁这个机会，分享一下我平时是怎么调试代码的 注意：我用的是 vscode,其它IDE按照这个思路，大差不差 1. 调试配置 要实现最基本的配置其实很简单,你只需要在你的项目根目录文件夹下创建一个 .vscode/launch.json 文件就行，然后里面写入你想要调试的那个页面，也就是你本的开发环境起用的链接，比如我下面举个??： { "configurations":[ { "type":"chrome",//模式：chrome、edge 可选 "name":"lambo",//调试的名称，可以自定义 "request":"launch",//请求配置类型：可以是 attach 或者 launch "url":"http://localhost:8000/meta"//你当前想要调试的页面地址 }, ...//你可以创建多个调试配置，方便快速启动 ] } 2. 打断点 进入想要修改的代码页面，把鼠标移到想要打断点的那一行，把鼠标悬浮在这一行的最前面，会出现一个点，提示你打断点，你点击就会变红，比如： 悬浮上去点击添加短点这个时候你打开vscode的拓展菜单上的那个小蜘蛛（根据你使用的icon库的不同，可能会有些区别）： 小蜘蛛你会发现你所有打的断点都会在左下角的断点面板内，你可以点击前面的勾选框选择是否需要使用这个断点： 3. 启动调试 确定好你需要调试的断点位置之后，点击运行，这里运行你之前配置的那个名称的脚本： 然后不出意外，会新开一个chrome的页面，因为这个是vscode自带的chrome浏览器，所以它非常的纯粹，任何的数据都是一次性的，就像无痕模式一样，你关掉就彻底清除了，所以调试起来很方便。 当你跳转到你对应节点的时候，左侧变量面板，会给你展示当前断点位置所的所有变量（包括组件，全局），我们大多数时候看local面板就行： local面板然后按F5跳到下一个断点，一直调试到你觉得满意的结果为止。 按F5结语 如果你想增加你的工作效率，并且往更高阶的前端进发，调试的能力是必不可少的，另外debug还有很多拓展性的功能，你可以借这个机会去了解一下，比如它的监视，还有调用堆栈...等等 阅读原文