你是如何调试前端代码的？
打一个log？或者在浏览器打debugger就没了？
你是否羡慕后端哥们直接在编辑器内进行断点调试，无需打开浏览器F12来进行debugger？
log大家自然都会，我们首先在浏览器中实现debugger
普遍的调试方案
打开 Chrome DevTools，在源代码/来源 (Sources )面板找到自己的代码来源位置，找到代码运行，打上个断点，然后刷新浏览器就可以进行调试了
代码会在断点处断住，右边会显示当前 local 作用域的变量，global 作用域的变量，还有调用栈 call stack。
上面有几个控制执行的按钮，分别是：
1.恢复执行
2.单步执行
3.进入函数调用
4.跳出函数调用
5.单步调试
6.让断点失效
7.在异常处断住
在浏览器中还可以看到作用域、调用堆栈等非常实用的调试方法用来排查代码中的复杂问题可再合适不过了
使用VScode进行调试
打开vscode，按照以下进行操作，我的chrome因为装了过多的插件，整了过多的狠活导致无法进行调试，所以我后面会使用Edge进行演示。
创建launch文件
打开launch文件并把访问的 url 改为开发服务器启动的地址：3000(我这个测试项目是，大家的是多少该多少)
直接启动！
你会发现它启动了浏览器，并打开了这个调试网址
VSCode 多了一排控制执行的按钮
无需再写debugger，直接点击代码左侧后点击刷新即可
代码会执行到断点处断住，本地和全局作用域的变量，调用栈等都会展示在左边。
有啥区别或者好处吗？
好处就是方便调试，毕竟一个在浏览器，一个在编辑器。我们可以边调试边写代码。提高我们的开发效率
番外篇
为什么我的Vue DevTools打不开？
可能是没有在开发模式开启或是直接引用的以打包的vue。比如一些基于乾坤的vue项目就会将一些公共资源包在webpack中排除在打包范围以外，然后减少打包时间与线上的加载时间。这时候就会有vue 的 devtools打不开的情况，但是不要怕，我们直接强开
原理实际上就是打开全局变量中vue.config.devtools = true 即可。实际要修改__VUE_DEVTOOLS_GLOBAL_HOOK__这个全局变量里面的值，或者在页面加载时，进行debugger修改，每一次手动打开非常麻烦。所以我们选择直接躺平。下载插件。
在这里，chrome我们选择(需要魔法，硬访不行)
Edge我们选择
打开后我们就可以在任何vue基础的网站，使用vue devtools了。任何网站哦！
这是掘金：
非常nice非常好用兄弟们。
