一 常用快捷键
1． 新打开新标签页 ctrl+鼠标点击链接
2． 打开新浏览器 Shift+鼠标点击链接
3． 向下滚动整个页面 space键 相反操作 Shift+ space
4． 打开上一个关闭的页面 Ctrl/Cmd +Shift+T
5． 新建收藏标签 Ctrl+Shift+D， 保存标签也可以选中url拖动至收藏
6． 选中搜索 选中后鼠标右键选择Search谷歌
7． 重置gongle浏览器 输入:Chrome://restart 命令到google浏览器
8.设置地址栏，自定义搜索引擎功能chrome://settings
9． 打开历史浏览记录 Ctrl或Cmd+H 亦可长按后退键
10. 去除复制样式 Ctrl或Cmd+Shift+V来进行变更
11. 设置扩展功能 chrome://extensions/shortcuts
12. 清空控制台 Ctrl + L 或 clear（）
13. 格式化代码 进入 Sources 面板 点击在开发者工具底部的格式化按钮
14. 打开无痕模式 Ctrl + Shift + N
二 控制台命令行 API
· $_：返回最近一次计算过的的表达式的值
· $$()：相当于 querySelectorAll() ，返回匹配的所有元素，可以用 class 和 id 匹配
· $()：相当于 querySelector() ，返回匹配的第一个元素，同样也可以用 class 和 id 匹配
· 4（没有 0 返回当前选中的元素，$1 返回前一个选中的元素，以此类推
· $x(path)：返回匹配给定的 XPath 表达式的 DOM 元素的数组
· copy()：复制指定的内容到复制粘贴板
· inspect()：在 ELement 面板打开指定的 DOM元素，或者在 Profiles 面板打开 JS 堆元素
· getEventListeners()：返回注册在指定对象上的事件监听器数组，如 click
· keys()：返回一个数组，包含对象所有属性
· values()：返回一个数组，包含对象的所有属性的值
· monitor(function)：监视函数的调用，返回函数名和函数被调用时传入的参数，必须在调用函数前调用该方法，负责无效
· unmonitor(function)：停止监视函数的调用，与 monitor 一起使用
· monitorEvents(object[, events])：监听某个对象的事件，输出到控制台，可以监听单个事件，到监视器，事件数组，或被映射到通用事件类型中之一，如监听单击事件 click，监听鼠标类型事件 mouse
· unmonitorEvents(object[, events])：停止监视指定的对象和指定事件的事件，与 monitorEvents 一起使用
· profile([name])：使用可用的文件名开始一个 JavaScript CPU 分析会话
· profileEnd([name])：停止当前使用 profile()方法开始的分析会话，并在配置面板上显示结果
· table(data[, columns])：通过用可选用的列标题传进一个数据对象进来，以表格的形式输出对象数据
过滤请求****
控制面板 => Network => filter图标 => is:running => 刷新监控的页面
滚动元素到视图****
控制面板 => Elements => 右击选中的DOM节点 => Scroll into view
预设设备****
控制面板 => setting图标 => Devices => Add custom device...
捕获全屏快照****
控制面板 => command + shift + p => capture full size screenshot
捕获局部快照****
控制面板 => 审查元素 => command + shift + p => capture node screenshot
快速清空站点缓存****
控制面板 => ctrl+shift+p => clear site data
更改调试面板主题****
控制面板 => setting设置图标 => Preferences => Appearance => Theme
页面刷新但保留之前页面的请求****
解决方法：浏览器调试工具preserve log勾上
Network 请求
Preserve log：跳转页面或者刷新页面还保留之前发起的请求详情。可以用来追踪一些接口。 Disable cache：在调试一些加载时间或者性能的时候需要用到，禁止从缓存中加载。 No throttling：用来设置网络带宽，模拟一些网络场景，还可以自定义。
过滤器： 过滤你想看的内容和详情，点击右上角的设置图标，有平时用不到的四个过滤。Show overview是控制时间线的展示，Capture screenshots是控制抓图信息的展示。
网页截图信息： 看见页面加载过程的显示内容，如果追求性能和体验的极致，那就需要通过这个去分析。
时间线： 用来展示各个请求所用的时间，可以非常详细的知道页面的加载过程和时间。相当于图形统计，一般没用，主要还是看详细列表。
详细列表： 这个是使用最多的，可以查看每个请求从发起到完成的所有状态。
下载信息： requests是请求数量，transferred是通过网络加载的资源大小，resources是页面加载所有资源大小，finish是所有请求发起到响应完成的时间，一般来说是比Load大。如果只有一个html静态，一般是差不多。DOMContentLoaded在MDN上面的解释是当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。Load在MDN上面的解释是当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
DOMContentLoaded和Load这边要提一下，现在很多都会通过页面渲染流程来说DOMContentLoaded的执行时机，也确实没错，只不过要明确一个概念，DOMContentLoaded只需要HTML文档被完全加载和解析完成后就会触发。
