美文网首页全栈前端
chrome devtools使用详解——Sources

chrome devtools使用详解——Sources

作者: 前往悬崖下寻宝的神三算 | 来源:发表于2018-09-06 10:03 被阅读158次

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

    本篇文章介绍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

    相关文章

      网友评论

        本文标题:chrome devtools使用详解——Sources

        本文链接:https://www.haomeiwen.com/subject/hqgowftx.html