你可能不知道的 10 个 Chrome DevTools 技巧

Chrome DevTools 对前端工程师来讲，几乎天天都会用到，可是有些技巧你可能不知道，让咱们来了解一下吧~

1. 轻松获取某个审查元素的引用

打开控制台，在 Elements 界面下，对着某个 dom 标签点击右键，选择 Store as global variable。

2. 建立并钉住一个动态表达式

你能够在控制台建立一个动态表达式，而且把它钉到控制台顶部，这对观察页面上某个变化的元素很是有用。

3. 模拟弱网环境

在 Network 界面下能够模拟多种不一样的网络环境，利用它能够观察你的应用在不一样环境下的加载时间。

4. 禁用缓存和保存日志

缓存有时候会形成不少难以排查的 bug，为了排除这个因素，你能够勾选Network 界面下的 Disable cache 选项（它只在 DevTools 窗口打开时生效）。

Preserve log 可让你在切换页面的时候也能保存控制台中的打印日志。

5. 在控制台直接建立截图

Chrome Devtools 有一个内置的截图工具。打开控制台，而后按下 Ctrl+Shift+P，输入 screenshot ，便可选择针对当前网页进行截图。若是选择 Capture node screenshot 还能够针对当前选中的元素建立截图。

6. 不仅是 console.log

除了 console.log，还有几个经常使用的方法:

console.warn, console.error

console.warn 能够打印出黄颜色的警告信息，也能够配合 filter 方便查询。

console.table

若是你有一个数组，用 console.table 来打印就再合适不过了。

还有更多的方法如： console.assert，console.group，你能够在这里找到：Google Developers

7. $_ 返回最近那个表达式

使用 $_ 能够打印出你在控制台最后使用的表达式的值。

8. 直接使用 $

你能够直接使用 $ 来查询元素，这不须要 jquery，由于它就是 document.querySelector 的别名。

同时 $$ 也是 document.querySelectorAll 的别名。

9. 触发元素的 hover 状态

在审查元素时，能够在 Styles 页面点击 :hov ，便可打开 Force element state 面板，而后就能轻松调试元素的特殊状态。

10. Ctrl+Click 查找 CSS 属性

若是想知道某个具体的 css 规则在哪定义的，只须要在 Style 面板中，在那个规则上使用 Ctrl+Click （Mac 下用 CMD+Click）。

欢迎关注

码力全开（codingonfire）

每周更新一篇原创或翻译文章~