一些大概率会用到的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取到的值，也会取到相应不同的值
新特性
-
invert利用新的复选框反转过滤网络请求的条件
比如说，您可以在过滤文本框里输入 “status-code: 404” ，查看那些状态码为 404 的网络请求。点击反转复选框，可反转过滤条件（显示那些状态码为不是 404 的网络请求）。
2.支持中文，设置面板选择语言，习惯了的话直接使用英文也可以
网友评论