调试JS代码

一、vs code调试

1.在vs code中如何进行代码调试？

首先，在vs code中配置 auto-attach，通过ctrl + shift + p，输入 auto-attach。设置成smart（智能）。如下图：

然后，对需要调试的语句在行号前方单击打断点。打完断点之后，可以通过在package.json文件中的调试按钮进入到调试模式，如下图

进入到调试阶段后，要知道debug按钮的含义，具体的调试信息可以在侧边栏中看到，比如变量、监视、调用堆栈

1. 继续（F5）: 点击后代码会直接执行到下一个断点所在位置，如果没有下一个断点，则认为本次代码执行完成。
2. 单步跳过（F10）：点击后会跳到当前代码下一行继续执行，不会进入到函数内部。
3. 单步调试（F11）：点击后进入到当前函数的内部调试，比如在 fn 这一行中执行单步调试，会进入到 fn 函数内部进行调试。
4. 单步跳出（Shift + F11）：点击后跳出当前调试的函数，与单步调试对应。
5. 

备注一个打开 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