【tool】Chrome DevTools

一些大概率会用到的tips

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

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

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

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

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

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

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

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

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

user-agent设置

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

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

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