阅读 452

chrome devtools使用进阶——Sources

本文会忽略一些过于基础的知识和细节 持续更新,欢迎关注~

本篇文章介绍Sources面板的使用,截图如下:

image.png

左侧面板


  1. Page 已加载的全部资源,以域名划分文件夹。

  2. Snippets 代码片段,不会因为刷新丢失,使用:添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)

    Snippets使用示例

注:以下了解即可

  • Filesystem & Overrides 可以加载本地文件夹
  • Content scripts 扩展工具的脚本,比如百度翻译插件等

js调试


大家都会用的就略了...

右键行号,可以看到其他调试菜单

右键菜单

  1. Add conditional breakpoint 条件断点:选择后让你输入一个表达式,这个表达式返回值决定这行代码会不会被暂停

    条件断点示例

  2. Blackbox Script 黑盒脚本:跟代码时不会走的代码的内部,比如第三方框架。一般来说,正确的使用f10 f11 f12不需要使用这个

右侧面板


右侧面板

  1. Watch 变量监察:添加个变量后会一直监察这个变量的值,当前作用域无值时显示< not availble >

  2. Call Stack 函数调用栈:略

  3. Scope 作用域:显示断点所在的作用域,级别划分如下:

  • Local 当前作用域 展开时作用域下的变量
  • Closure (x) 闭包作用域,x是函数名称
  • Script 标签作用域
  • Global 全局作用域Window
    Scope示例
  1. Breakpoints 断点:略

  2. XHR/fetch Breakpoints 请求断点:ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈,很方便追踪

    断点示例1
    断点示例2

  3. DOM Breakpoints 这里列出的就是上篇中html的断点

  4. Global Listeners 全局监听器:指的是绑定在 window 对象上的事件

  5. Event Listeners Breakpoints 所有事件的断点:勾选指定类型,比如Mouse/click,则所有的click事件都会被断住

参考链接

CompileYouth

关注下面的标签,发现更多相似文章
评论