chrome devtools使用详解——Sources

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

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


面板

左侧面板


  1. Page
    已加载的全部资源,以域名划分文件夹,ctrl+p 进行搜索。
  1. Snippets
    代码片段,不会因为刷新丢失,使用:添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)
    Snippets使用示例
  • Filesystem & Overrides 可以加载本地文件夹
  • Content scripts 谷歌扩展工具的脚本
  1. Overrides
    本地文件覆盖线上文件,需要保持和线上文件夹结构一致,这个功能还是很好用的,毕竟线上压缩后的代码没法看,而且刷新也起作用

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

你可能感兴趣的:(chrome devtools使用详解——Sources)