调试JS代码
一、vs code调试
1.在vs code中如何进行代码调试？
首先，在vs code中配置 auto-attach，通过ctrl + shift + p，输入 auto-attach。设置成smart（智能）。如下图：
然后，对需要调试的语句在行号前方单击打断点。打完断点之后，可以通过在package.json文件中的调试按钮进入到调试模式，如下图
进入到调试阶段后，要知道debug按钮的含义，具体的调试信息可以在侧边栏中看到，比如变量、监视、调用堆栈
- 继续（F5）: 点击后代码会直接执行到下一个断点所在位置，如果没有下一个断点，则认为本次代码执行完成。
- 单步跳过（F10）：点击后会跳到当前代码下一行继续执行，不会进入到函数内部。
- 单步调试（F11）：点击后进入到当前函数的内部调试，比如在 fn 这一行中执行单步调试，会进入到 fn 函数内部进行调试。
- 单步跳出（Shift + F11）：点击后跳出当前调试的函数，与单步调试对应。
备注一个打卡 vs code 禅模式的快捷键：ctrl+k 再按 z。
2.Chrome浏览器的调试技巧
简单的elements、console调试，这边就不赘述了。
关于Chrome浏览器的调试技巧我主要会介绍平时开发中使用的很少的技术点。
2.1 network
调试台中的network可以浏览页面加载的快照，非常清晰的看出整个网页资源的加载过程。
2.2 performance
网页加载过程中的各种事件都可以在性能面板中看到
2.3 memory
memory记录着内存情况。观察此面板可以判断是否有内存泄漏的发生。
2.4 application
应用面板中用的比较多的是localstorage、sessionstorage和cookie。其他功能也需要我们进行深入学习，比如indexDB和webSQL