前端调试相关

参考

• https://blog.csdn.net/yin767833376/article/details/51656402
• https://developer.mozilla.org/en-US/docs/Web/API/Console#Usage

---

Alert

• 优点

1. 阻塞执行

• 缺点

1. 必须清理
2. 遮挡

---

console

console提供了访问浏览器控制台的能力,在全局可以拿到,web workers中也可以,不只是log

• 优点

1. 不阻塞,多种多样

2. 可以不清理

• 缺点

1. 清理麻烦,不清理冗余

• 一些方法

1. console.log()

2. Console.assert() 可以打印堆栈信息

3. console.clear() 清理控制台

4. console.count([label]) 统计次数的

5. console.error() 打错误日志,可以类似打堆栈使用

6. console.group() 相当于增加缩进

7. console.groupEnd() 相当于减少缩进

8. console.info(obj1 [, obj2, ..., objN]);

   console.info(msg [, subst1, ..., substN]);

   跟log差不多

9. console.table(me); 通过key,value对象打表

10. console.time() console.timeEnd() 用这个可以计算一段代码执行的时间

11. console.trace() 打印调用栈

12. console.warn(msg [, subst1, ..., substN]) 打印警告

---

chrome断点调试

1. 添加断点

   source -> ctrl+p找到要打断点资源 -> 点行号就可以加断点了

2. source下右侧面板介绍

• watch 显示了要跟踪的变量当前的值,在这里可以添加跟踪,取消跟踪等操作

  ps:可以在资源文件选中右键加watch 选项为 Add selected selected text to watches

---

• callback 显示了函数调用栈,

---

• scope 显示了当前作用域中的变量

---

• breakpoints显示了添加的断点,可以添加的断点进行操作,例如移除多有断点,禁用所有断点等

• XHR/fetch BP

  可以在任何xhr fetch断,也可以指定URL

• DOM Break points 后面看

• global listeners

  这个我也没打看懂是啥意思

• Event Listener Break points

  看了下有很多很多的事件可以加断点,不仅仅是mouse事件,键盘事件

  还有类似

  Animation

  Canvas

  Clipboard

  Control

  DOM Mutation

  Device

  Drag / drop

  这些东西，很多应该也用不上的

---

DOM断点

这个也是chrome中有的.

• 添加方法

  进element面板 -> 选中要加断点的dom结点-> 右键 -> 选择break on -> 然后几个选项自行体会

---

debugger

这个跟上边的chrome source断点差不多,就是在js代码写debugger,然后运行到那里就会停下来.像这样.功能方面对比上面就有些弱了.不过那你的资源很难找时还是不错的选择

<script>
function sum(a,b) {
    debugger;
    return a*b;
}

sum(1,5);
</script>

强大的IDE

要是我们的代码不依赖宿主，不需要window，document之类，可以在IDE中调试，用node环境

以visual studio code 为例

在行号左边点击可以加断点，右键还能加条件断点

F5 可以启动调试

左侧面板可以看到

• 变量信息

• 监控的变量

• 函数调用栈

• 断点信息

还有一些快捷键记录一下

• F5 启动调试

• F10 单步跳过

• F11 单步前进

• shift+F11 单步后退

• shift + F5 停止

• Ctrl + shift + F5 重来