一些大概率会用到的tips

整体面板

• run command 命令集Cmd + Shift + P
  
• store as global通过其来储存为全局变量，变量名为 temp1 一直延续下去，就可以配合 copy 获取变量名打印了，该功能对 HTML 元素同样适用
• copy命令复制变量
• 编辑页面上的任何文本,在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了
• Shift+Esc：打开浏览器的任务管理器，（浏览器卡住崩溃时常用）

$ 符

这个 $ 和 jQuery 中的 $ 有部分相似之处，均可以作为选择器来使用，

• $() 返回满足指定 规则的第一个元素
• $$() 返回满足指定 CSS 规则的所有元素（dom数组）
• $_，取到在控制台中次执行结果的引用
• $0是刚选中的那个dom，$0 $1 $2 $3 $4代表最近审查选中过的5个DOM节点
• $x将所有满足指定 XPath 的节点放在一个数组返回

console面板

• console.time和console.timeEnd， 一般配合使用，可以用于统计时间

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

• console.trace追踪代码调用栈，类似于代码的端点

• console.table或者table打印表格显示

• console.dir或者dir目录收缩展示
  

• console.group和console.groupEnd分组输出信息，跟dir有点像，不过group的名字是变量的名称
  

  
  console.groupCollapsed跟console.group是一样的，使用前者会默认收缩

• keys和values， 跟Object.keys()和 Object.values() 相同

• copy与Save global variable配合使用，新版chrome右键支持copy obj和copy value

Element面板

• 审查选中某个dom之后，按H键（切换到英文输入法）就可以展示/隐藏dom节点（使用的是visiblity: hidden属性，因此会占据文档流）
• 审查元素 scroll into view

Network面板

• 重新发送xhr请求，右键，选择replay xhr
  在平时和后端联调时，我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求，我们往往都是通过刷新页面、点击按钮等方式去触发xhr请求，这种方式有时显得会比较麻烦，我们可以通过google提供的Replay XHR的方式去发起一条新的请求
• capture screenshots 勾选分析网络请求

Waterfall 资源的详细网络加载信息

相关字段描述:

1、Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.

2、Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。

3、Proxy Negotiation 与代理服务器连接的时间花费。

4、DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。

5、Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。

6、SSL 完成SSL握手的时间花费。

7、Request sent 发起请求的时间。

8、Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。

9、Content Download 获取Response响应数据的时间花费。

✔ 可以根据请求时间的长短，对项目做出相应的优化。如，有些JS、CSS文件可以合并、进行压缩等操作，对于图片可以懒加载

source面板

自定义代码片段(snippets)

我们经常有些 JavaScript 的代码想在控制台中调试，假如代码量多的情况下直接在 console 下写比较麻烦，或者我们经常有些代码片段 (防抖、节流、获取地址栏参数等) 想保存起来，每次打开 Devtools 都能获取到这些代码片段，而不用再去从笔记里面找。

performance面板

overrides重写

如果你想把修改的值保存下来，刷新页面的时候不会被重置，可以考虑这个模块
select folder for overrides

fileSystem

在里面可以添加本地文件进行编辑操作，相当于一个编辑器（这种方法是对本地源代码的编辑）
add folder to workspaces添加要同步的工作目录，能够将更改保存到计算机上相同文件的本地副本。

移动设备

当针对移动设备进行开发时，会有一些诸如获取地理位置，角度、尺寸、方向等操作。我们使用快捷键Ctrl+shift+p调出菜单，然后搜索sensors，点击会出现Sensors面板：

user-agent

在电脑端模拟手机端来做User-Agent的设置来模拟请求，

user-agent设置

这样window.navigator.userAgent取到的值，也会取到相应不同的值

新特性

1. invert利用新的复选框反转过滤网络请求的条件
   比如说，您可以在过滤文本框里输入 “status-code: 404” ，查看那些状态码为 404 的网络请求。点击反转复选框，可反转过滤条件（显示那些状态码为不是 404 的网络请求）。
   

2.支持中文，设置面板选择语言，习惯了的话直接使用英文也可以