Open yanyue404 opened 1 year ago
1.调试 bar
从左到右,各个图标表示的功能分别为:
2. 调试面板
调试程序时,多注意下下面截图的面板,里面提供大量信息,可以帮助你排查问题、梳理流程、了解程序运行状态;
ctrl + p
ctrl + shift+ f
说明:在抛异常处断住,自己写 throw Error
throw Error
说明:在满足某个表达式的时候断住
也可以用来打印日志:
说明: 打印日志但不断住,觉得断住太多次的时候可以用这个,把输入的条件表达式打印到控制台。
说明:在 DOM 子树修改、属性修改、节点删除的时候断住
说明:在某个事件发生的时候断住, 顺着调用栈可以找到源码
说明:在发送 url 包含某内容的请求时断住, 追踪上下文可以查看到触发方法相关信息
step1: copy fetch;
step2: 复制并执行 fetch 请求;
step3:network 面板查看新纪录
F12 下 ctrl + shift + p command
Elements 面板
Console 面板
Source 面板
1.调试 bar
从左到右,各个图标表示的功能分别为:
2. 调试面板
调试程序时,多注意下下面截图的面板,里面提供大量信息,可以帮助你排查问题、梳理流程、了解程序运行状态;
源码调试
ctrl + p
定位单文件ctrl + shift+ f
生产定位源码断点调试
1. 异常断点
说明:在抛异常处断住,自己写
throw Error
2. 条件断点
说明:在满足某个表达式的时候断住
也可以用来打印日志:
3. 日志断点
说明: 打印日志但不断住,觉得断住太多次的时候可以用这个,把输入的条件表达式打印到控制台。
4. DOM 断点
说明:在 DOM 子树修改、属性修改、节点删除的时候断住
5. Event Listenter 断点
说明:在某个事件发生的时候断住, 顺着调用栈可以找到源码
6. url 请求断点
说明:在发送 url 包含某内容的请求时断住, 追踪上下文可以查看到触发方法相关信息
Network 面板
step1: copy fetch;
step2: 复制并执行 fetch 请求;
step3:network 面板查看新纪录
其他
F12 下 ctrl + shift + p command
其他文章