前言 记得我还是一个小菜鸡的时候，就有人问过我，都用什么调试，我红着脸说到，我只会用console调试。羞愧的我想再继续掌握一下vscode调试的方法，可惜当时没有找到很好的教程，加上相关基础较差，只

1. Debugger for Chrome 2. 配置lanuch.json 点击侧边栏的调试图标, 打开调试页面。 在调试页面点击添加配置(Add configuragion), Chrome Debugger会生成一个.vscode/launch.json。可以在这个文件…

方法虽然简单粗暴，但是它是实用且简单的。然而，如果 BUG 十分复杂，涉及到跨组件甚至是源码，采用打 log 的方式就变得十分麻烦了； F12 打开调试工具之后刷新页面，断点就会停在 created 里了。 当然，这里只是做简单的示例，实际情况更加复杂的时候，右边的堆栈可以让你…

对于每位开发者而言，bug已经是不能再寻常的东西，debug也是家常便饭的事情。然而寻根溯源起来，还得从上个世纪五十年代讲起。 1947年9月9日，哈佛大学在测试马克II型艾肯中继器计算机的时候，一只飞蛾粘在一个继电器上，导致计算机无法正常工作，操作员把飞蛾移除之后，计算机又恢…

如图↑，直接sources面板中打断点。 若在第6行的空行打断点，看到一个动画显示断点从第六行溜到第七行。vscode的debugger扩展实质就是与这个通信，并反馈结果到自己的ui上。 因此如果你看到vscode中用鼠标打的断点与显示不一致，那么其实是浏览器就是这样做的，只是…

背景现在webpack打包流行，但是编译后的代码找起来却没有那么容易了，遇到bug打断点找不到代码就成了前端一个痛点，一下分享一下怎么在vscode里面断点调试调试方法1、插件下载：首先在vscode

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。