Chrome Dev Tools---[基础篇]

Chrome Dev Tools 是每一位前端工程师开发调试的必备利器，称之为FE的瑞士军刀也毫不为过。然而，每每当发现一些自己不知道的用法时，我们经常会觉得，自己只是掌握了其强大功能的九牛一毛。为了能够让她发挥出最大功效，首先，我们应当了解她更多的使用方法；然后，在开发中合适的场景下，刻意练习使用；最后，熟练掌握那些之前不了解的功能，并为我所为用，最大提升效率。

本文翻译自谷歌官方文档，主要介绍了Elements, Console, Sources, Network四个Tab页面下的功能。敬请期待Chrome Dev Tools 性能篇

Elements

• 进入：

  1. Cmd + Alt + c inspect，点击想观察的节点
  2. console中inspect(DOM)，DOM为想观察的节点。

• 遍历节点：

  1. 鼠标点击
  2. 在DOM节点中，上下箭头跳转，向右箭头，展开折叠的节点。向左箭头，折叠打开的节点。

• 编辑节点
  F2 -> Edit as HTML. ctrl+enter保存更改，Esc退出更改，不保存.

• 编辑 DOM 节点名称或属性

  1. 直接在节点名或属性上双击
  2. 选中突出节点，Enter,然后Tab选择.
  3. 右键,Edit/Add Attribute.

• 点击并拖动,可以移动DOM节点.

• 右键->Scroll into view,滚动页面使节点在视口中显示.

• 断点调试

  1. 右键节点->break on，可以对该节点的子树修改、属性修改、节点移除三种事件添加断点
  2. 右侧DOM Breakpoints,管理DOM断点.
  3. Event Listener
     1. Ancestors 显示祖先节点的事件侦听器。
     2. 每个Event Listener包含两个属性
        • handler, 右键 -> Show Function Definition
        • useCapture, addEventListener函数中useCapture的值(bool).
        • Framework listeners, 框架事件监听器.

• Styles，位于面板左侧，主要是样式相关内容

  • 页面底端的Computed 可以编辑，修改。
  • 点击Styles中的文件名->跳转到Source->右键，Local Modifications.
  • Inherited from <NODE>,点击<NODE>可以跳转到该DOM节点。
  • 灰色条目不是已定义规则，而是在运行时计算的规则。
  • 鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。
  • 点击右上角.cls,可以查看、增加、删除class。
  • 点击(并长按)右上角+按钮，(选择要向哪一个样式表)添加一个新的 CSS 规则。
  • 点击右上角:hov，或在元素上点击右键，启用/删除伪类。
  • 点击css属性进行修改，tab跳转；Alt/ /Shift/Shift+Fn + 上/下，增减0.1,1,10,100。
  • 鼠标悬停到样式表上面，此时右下角出现三个点，移动过去，此时有color,background-color等快捷方式。
  • 点击color声明左侧带颜色的小正方形，打开color-picker。

Console

• 进入: Cmd + Alt + J
• 编辑时，输入Shift + Enter实现换行，而不会直接运行。
• Settings -> General -> Console ->
  • Hide network messages/ Log XMLHttpRequests/ Preserve log / Enable custom formatters
  • Show timestamps 展开消息堆叠.

Console API

• Ctrl + L/ clear() /console.clear() 清空console.
• 右键 -> Save As 保存console输出.
• 日志组按组输出,可嵌套:

  console.group("Group Name")
  console.groupCollapsed("Group Name")//默认折叠
  console.groupEnd()
  

• 计时器,时间戳,在Timeline上有标注

  console.time("name");
  console.timeEnd("name");
  // 向Timeline添加一个标记
  console.timeStamp("Adding result");
  

• 断言,在console中可跳转到代码对应位置.

  console.assert(a < 500, "a > 500!");
  

• 堆栈追踪&&错误处理

  // 追踪堆栈
  try {
      // some code here
  } cache(e) {
      console.log(e.stack);
  }
  // 打印跟踪调用栈
  console.trace();
  // 处理运行时异常
  window.onerror = function(message, url, line){
      console.log("window.onerror was invoked with message = " + message + ", url = " + url + ", line = " + line);
  }
  

• 字符串替换 %s %d %f %o(DOM节点) %O(js对象) %c 样式。不过有了ES6以后，推荐使用更加方便、灵活的模板字符串
• 添加cpu配置文件.将会添加到Profiles面板中

  console.profile("label");
  console.profileEnd();
  

• 其他特殊用法

  // DOM元素格式化为JS对象
  console.dir(document.body);
  // 输出object子级元素xml
  console.dirxml(object);
  
  // 将Object,Array输出
  console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
  console.table([[1,2,3], [2,3,4]]);
  console.table(family, ["firstName", "lastName", "age"]);
  
  // 记录相同字符串传入的次数(多用于统计函数调用次数)
  console.count("Login called for user " + user);
  

Command Line API

• ↑ / ↓切换查看表达式

• 选择元素

  $('code') // document.querySelector()
  $$('figure') // document.querySelectorAll()
  $x('html/body/p') // 返回与指定xpath匹配的数组元素
  $0 - 4 // 返回最近访问过的5个元素,$0为最新的一个
  

• 监听事件, 查看时间监听器(Elements->Event Listener中也可以查看)

  monitorEvents(document.body, "click"); // 监听事件
  unmonitorEvents(document.body); // 取消监听
  getEventListeners(document); // 返回在指定对象上注册的事件侦听器
  

• 复制:将指定对象的字符串表示形式复制到剪贴板.

  copy(object);
  copy($0);
  

• 调试函数

  debug(fn); // 调用fn时开始调试
  undebug(fn); // 停止调试
  
  monitor(function); // console中将输出函数调用,以及传入的参数
  unmonitor(function); // 停止监控
  

• 在Elements中打开指定元素/对象/函数.

  inspect(DOM);
  inspect(object/function);
  

• 查看对象

  keys(object);
  values(object);
  

Sources

• 添加断点
  • 添加Event断点:
    Source标签->右侧Event Listener Breakpoints->Mouse->click
  • DOM断点.Elements 面板中，对DOM节点右键，Break On...
  • XHR断点
  • 异常断点:右上角Pause on exceptions
  • 条件断点

  //  当DOM元素满足某个条件进行断点，同时查看这个元素
  elem.hasAttribute('class') && inspect(elem);
  

• 在编辑器中行首右键,continue to here
• 检测变量值
  • Watch->+,添加希望检测的表达式,比如,a,typeof a
  • Scope窗格,在脚本暂停时,会显示当前变量
• 右上角Deactivate breakpoints,启动/忽略全部断点
• Call Stack调用堆栈
  • 在Call Stack中右键,Restart Frame
  • Async,提高完整的异步函数调用堆栈的可视性
  • 使用非匿名函数,提高堆栈可读性
• 将第三方脚本添加入黑箱:
  • 在已打开的文件中,右键->Blackbox Script
  • 在Call Stack中,右键->Blackbox Script
  • Settings->Blockboxing->add pattern,下拉菜单中,Blackbox黑箱,Disabled阻止执行
• 实时编辑:编辑器中修改代码->Cmd + s，继续运行代码
• Threads,切换线程
• Source Map, Settings中开启
• Snippets 编写代码，运行结果输出到console

Network

• 面板中，蓝线标志DOMContentLoaded事件，红线标志load事件。
• Http1.0/1.1下,chrome最多支持对同一个domain6个TCP请求
• Shift + 光标移动到request上面，此时绿色标志该请求的发起者，红色标志该请求的依赖项。
• 摄像机按钮，Capture Screenshots，再次刷新页面时，可以在时间轴上方看到对应屏幕状态。
• disable cache,throttle,Offline,hide data urls
• 右键->clear browser cache
• 右键表格header -> 添加/移除显示列
• header:Use large request rows,Show overview
• 右键request->copy response->console中copy({})->得到格式化的JSON
• • 右键request->block request 在drawer中,查看被block的request
• 右键XHR request -> reply XHR
• Summary: request数量,大小,时间
• Filter
  • 空格隔开:并
  • domain,has-response-header,is(is:running),larger-than,method,mime-type,mixed-content,scheme,set-cookie-domain,set-cookie-name,set-cookie-value,status-code
• Timing含义:
  Queuing: 排队时间.
  Stalled: http请求建立到发出去.
  Proxy Negotiation、DNS Lookup
  Initial Connection/Connecting: 建立链接花费时间。TCP握手移机重试.
  SSL: 建立SSL链接花费时间.
  Request sent: 发起请求的时间.
  Waiting (Time to first byte (TTFB)): 发起请求到接受第一个字节数据.
  Content Download: 获取响应数据的时间.