本文会忽略一些过于基础的知识和细节
持续更新,欢迎关注~
本篇文章介绍Sources面板的使用,截图如下:
image.png
左侧面板
-
Page
已加载的全部资源,以域名划分文件夹。 -
Snippets使用示例Snippets
代码片段,不会因为刷新丢失,使用:添加=>保存(ctrl+s)=>运行(Run
)=>不用则移除(Remove
)
注:以下了解即可
-
Filesystem & Overrides
可以加载本地文件夹 -
Content scripts
扩展工具的脚本,比如百度翻译插件等
js调试
大家都会用的就略了...
右键行号,可以看到其他调试菜单
右键菜单
-
条件断点示例Add conditional breakpoint
条件断点:选择后让你输入一个表达式,这个表达式返回值决定这行代码会不会被暂停
-
Blackbox Script
黑盒脚本:跟代码时不会走的代码的内部,比如第三方框架。一般来说,正确的使用f10 f11 f12
不需要使用这个
右侧面板
右侧面板
-
Watch
变量监察:添加个变量后会一直监察这个变量的值,当前作用域无值时显示< not availble >
-
Call Stack
函数调用栈:略 -
Scope
作用域:显示断点所在的作用域,级别划分如下:
-
Local
当前作用域
展开时作用域下的变量 -
Closure (x)
闭包作用域,x是函数名称 -
Script
标签作用域 -
Global
全局作用域Window
Scope示例
-
Breakpoints
断点:略 -
断点示例1XHR/fetch Breakpoints
请求断点:ajax和fetch请求都可以在这里打断点并在Call Stack
显示调用栈,很方便追踪
断点示例2 -
DOM Breakpoints
这里列出的就是上篇中html的断点 -
Global Listeners
全局监听器:指的是绑定在 window 对象上的事件 -
Event Listeners Breakpoints
所有事件的断点:勾选指定类型,比如Mouse/click
,则所有的click事件都会被断住
网友评论