参考
- https://blog.csdn.net/yin767833376/article/details/51656402
- https://developer.mozilla.org/en-US/docs/web/API/Console#Usage
- Alert
优点
阻塞执行
缺点
必须清理
遮挡
console
console 提供了访问浏览器控制台的能力, 在全局可以拿到, web workers 中也可以, 不只是 log
优点
不阻塞, 多种多样
可以不清理
缺点
清理麻烦, 不清理冗余
一些方法
console.log()
Console.assert() 可以打印堆栈信息
console.clear() 清理控制台
console.count([label]) 统计次数的
console.error() 打错误日志, 可以类似打堆栈使用
console.group() 相当于增加缩进
console.groupEnd() 相当于减少缩进
- console.info(obj1 [, obj2, ..., objN]);
- console.info(msg [, subst1, ..., substN]);
跟 log 差不多
console.table(me); 通过 key,value 对象打表
console.time() console.timeEnd() 用这个可以计算一段代码执行的时间
console.trace() 打印调用栈
console.warn(msg [, subst1, ..., substN]) 打印警告
chrome 断点调试
添加断点
source -> ctrl+p 找到要打断点资源 -> 点行号就可以加断点了
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 重来
来源: https://www.cnblogs.com/floor/p/8736904.html