7个能提升你生产力的隐藏Chrome DevTools功能

开发人员工具对于软件开发是必不可少的。咱们须要它们来开发、测试和调试咱们的工做。做为web应用程序开发人员，您使用Chrome DevTools的概率很是高。

本文将向您展现Chrome DevTools的一些隐藏功能，以帮助您提升生产力，有些你能够能已经知道，有些你可能还不知道。

你将看到如下内容：

1. 在低端设备上测试Web应用性能
2. 捕获不一样设备大小的屏幕截图
3. 更改用户代理
4. 测试你的明亮(Light)和暗黑(Dark)主题
5. 为视力障碍者测试您的Web应用程序
6. 按媒体资源过滤网络请求
7. 在控制台中获取DOM节点引用

开始吧~~

---

在低端设备上测试Web应用性能

通常而言，咱们开发人员都是在具备高速网络链接的高端设备上工做。但不幸的是，咱们的用户并不能一直使用高端设备和高速互联网链接。

随着移动设备的兴起，咱们都应该更加意识到这种状况。并不是每一个人都拥有超贵的手机或始终能够访问4G。

您知道如何轻松模拟低端设备和低速网络链接吗？

你能够很容易地在Chrome DevTools中控制CPU的能力和网络速度。这样，您能够测试您的Web应用程序性能并根据其进行优化。你能够这样作：

1. 打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令菜单。
2. 输入 Show Performance，而后按回车键打开性能面板。

按右边的齿轮图标打开捕获设置。如今，您能够为网络和CPU选择不一样的限制选项。

还有一个更简单的选项来模拟预约义的设备配置文件。

按下 CMD/CTRL + SHIFT + M 切换设备的工具栏，你能够在中档手机和低端手机之间进行选择，这些选项将相对地设置网络和CPU节流。

捕获不一样设备大小的屏幕截图

您已经建立了外观漂亮的网络应用，并但愿捕获屏幕截图。幸运的是，Chrome DevTools支持，你能够很容易地为你的web应用捕捉一个正常的、全尺寸的或区域的屏幕截图。

打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令菜单，输入 screenshot 查看全部截图捕捉选项，选择其中之一来捕获屏幕截图。

还有一种更简单的方法来捕获普通和全尺寸的屏幕截图。

按下 CMD/CTRL + SHIFT + M 切换设备的工具栏，按设备工具栏右侧的三个点菜单，在这里，您能够在捕获屏幕截图和捕获全尺寸屏幕截图之间进行选择。

这些选项将捕获所选模拟设备视图的屏幕截图。

更改用户代理

做为Web应用程序开发人员，您须要编写可在多个平台上运行的应用程序。彷佛还不够，您还须要考虑不一样平台上的不一样浏览器。

您可能须要对特定浏览器的样式表进行有条件的更改，多亏了Chrome DevTools，你能够很容易地动态改变用户代理并测试全部这些。你能够这样作：

1. 打开Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令菜单。
2. 输入 Show Network conditions 按回车键打开网络条件面板，取消选中 User agent 选项右边的 Select automatically 复选框。

如今，您能够从预约义的用户代理列表中进行选择。

测试你的明亮(Light)和暗黑(Dark)主题

preferreds-color-scheme CSS属性可帮助您检测用户是否已请求系统使用浅色或深色主题。使用此属性，您能够轻松在暗色和亮色主题之间切换，而无需任何用户交互。

要测试此行为，您无需更改系统设置，Chrome DevTools可帮助您轻松实现。你能够这样作：

1. 打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行菜单
2. 输入 Show Rendering 后回车打开渲染面板。

您能够在其中使用 Emulate CSS media feature prefers-color-scheme 选项在 preferred-color-scheme:light 和 preferred-color-scheme:dark 之间进行选择。

为视力障碍者测试您的Web应用程序

做为web应用程序开发人员，咱们有责任确保咱们的程序是可访问的。若是咱们没有任视力障碍，就很难理解它是什么样子并根据它来测试咱们的程序。幸运的是，Chrome DevTools也提供了解决方案。

使用视觉缺陷模拟，您能够测试您的web应用程序的人谁有视力模糊，原色盲，后色盲，三色盲，色盲。

打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行菜单，输入 Show Rendering 后回车打开渲染面板。

您可使用 Emulate vision deficiencies 选项在 Blurredvision，Protanopia，Deuteranopia，Tritanopia 和 Achromatopsia 之间进行选择。

按媒体资源过滤网络请求

您是否知道可使用属性按照许多不一样的条件过滤网络请求？

Chrome DevTools提供了不少选项来过滤网络请求。例如，您可使用 large-than:1k 属性过滤大小大于 1kb 的请求。

打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行，输入 Show Network 后回车打开网络面板。将 larger-than:1k 写入过滤器输入，而后按Enter。

在控制台中获取DOM节点引用

您是否曾经想过在控制台中获取DOM节点引用以进行一些测试？您可使用JavaScript来作到这一点。您可使用诸如 document.getElementById 之类的方法，并将节点分配给变量。

可是某些节点可能没有ID甚至没有Class。与其与选择器纠缠，不如想出一种更简单的方法。在这种状况下，您能够利用Chrome DevTools。

Chrome DevTools具备一项称为 Store as global variable 的功能。您能够轻松地在控制台中获取任何节点,你能够这样使用它：

1. 右键单击要在屏幕上得到的任何节点，在菜单中选择 检查 以打开Chrome DevTools并选择元素。
2. 右键单击元素面板中的节点，选择 Store as global variable ，以后，它将在控制台中的全局变量中可用。

总结

Chrome DevTools功能强大。您可能还不知道不少其余功能。请查看如下资源部分以了解更多信息。

资源：

• https://developers.google.com...
• https://twitter.com/ChromeDev...
• https://www.youtube.com/chann...

---

若是对你有所启发和帮助，能够点个关注、收藏，也能够留言讨论，这是对做者的最大鼓励。

做者简介：Web前端工程师，全栈开发工程师、持续学习者。

如今关注公众号，送精品视频视频教程大礼包！