Chrome DevTools 的 8 个鲜为人知但非常致命的功能

Chrome DevTools 是开发人员拒绝接触任何其他浏览器的最大原因之一。

但是我们中的大多数人只使用了少数几个功能,而对许多默默发布的更令人兴奋的功能一无所知。

让我们揭开其中一些隐藏的宝石!

每个人都有自己喜欢的操作系统、硬件平台、设备类型、设备外形等。但有一点是所有人的共同点——他们运行的是 Chrome 浏览器,而且只运行 Chrome 浏览器! 我认为可以肯定地说,浏览器大战已经结束,Chrome 令人信服地获胜。

Windows 用户仅使用默认浏览器下载 Chrome,然后使用 Chrome,忽略 Windows 的所有“建议”。 Apple 的设备(尤其是 MacBook 和大屏幕设备)也是如此,尽管 Apple 有许多强有力的声明和转换策略,但用户和开发人员还是避免使用 Safari。

如果设备未运行 Chrome,则很有可能它正在运行与 Chrome 兼容的衍生产品,例如 勇敢的 或者 维瓦尔第. 是的,我知道,从技术上讲,这些浏览器并非基于 Chrome,但那是另一个讨论。 普通用户可能出于意识形态或特殊原因使用这些其他浏览器,但对于开发人员而言,除了 Chrome 之外,看不到其他浏览器。

甚至它是一个吞噬记忆的怪物这一事实也被忽略了。 原因很简单: Chrome 开发者工具.

图片来源:官方 Chrome DevTools 文档

现在,如果您正在阅读本文,可以安全地假设您是高级用户、修补匠、Web 开发人员或符合这些要求的人。 因此,我们都不需要介绍 DevTools、如何打开它、它的各种功能等。

相反,不要浪费任何时间,让我们直接深入了解 Chrome DevTools 的一些鲜为人知但非常有用的功能。

设计模式

开发人员经常做的事情之一是检查页面上的元素,然后修改其 HTML 以预览某些内容或测试更改的效果。

然而,直接在 DevTools 中使用 HTML 并不是最顺畅的事情——费力地浏览标签汤,竭力寻找正确的开始/结束括号,并在编辑文本时处理大量的空白(空白显然在您看到的文档中丢失了),是您可能必须处理的一些问题。 如果您是一名设计师并且不想在混乱中筛选,那就更糟了。

这是该网站 (techblik.com) 的其中一个页面的屏幕截图:

深度嵌套的 HTML 和神秘、令人困惑的 CSS 类是当今任何非平凡网站的典型特征,至少可以说,这就是 DevTools 体验欠佳的地方。 🤭

但是 DevTools 有一个称为设计模式的功能,在许多情况下可以减轻痛苦。 使用设计模式(顺便说一下,这不是官方名称;这只是人们根据它的激活方式和作用而命名的——别担心,我们很快就会看到!),更改页面可以可视化和实时化,就像编辑电子表格或文本编辑器一样! 唯一的问题是默认情况下此功能未启用,激活它有点令人头疼,尤其是对于非开发人员而言。

无论如何,这样做非常简单; 您需要做的就是按照以下说明进行操作。 根据您在用户成熟度曲线上的位置,这可能很容易笑,也可能有点困难。 以下是该怎么做:

  • 确保您要编辑的网页已加载,并且您当前正在查看它(也就是说,有问题的选项卡是活动的)。
  • 以通常的方式打开 DevTools 面板(键盘快捷键、鼠标单击等)。 我喜欢使用键盘快捷键,在 Mac 上,Opt + Cmd + I 就可以了。
  • 现在,打开 DevTools,转到名为“Console”的选项卡。 你们中的一些人可能会对这一切看起来多么愚蠢和明显而翻白眼,但是嘿,让我们也想想(数百?)成千上万的人在使用浏览器控制台和 JavaScript 时挣扎(无论出于何种原因) ).
  • 单击光标旁边的第一行,然后会出现输入提示,现在您可以在那里编写 JavaScript 代码(请参见下面的屏幕截图)。
  • 现在我们需要编写一些 JavaScript 代码。 不要担心,因为您需要编写/键入的内容非常简短明了:document.designMode = “on”。 您还可以复制并粘贴此页面中的代码(如果这样做,请确保格式不会被复制——我们只需要纯文本)或者如果您有信心,请将其键入。
  • 点击 Enter/Return。
  新标签:带有卡片的 Google Now 新标签页 [Chrome]

“而已??!”

是的,仅此而已!

现在您可以像编辑文档一样自由编辑页面。 查看此示例视频,其中我使用设计模式实时编辑 Spotify 网站:

设计模式功能虽然令人兴奋,但并不是灵丹妙药。 例如,您不能轻松地复制粘贴按钮、更改它们的外观等。 与理想的可视化网页编辑器相比,它实际可以做的事情数量非常少; 但是,它确实解决了需要以可视方式即时更改内容的用例。

也就是说,声称 Chrome 人员正在测试此功能的接受程度并不过分牵强。 如果它获得了良好的反响和强大的用例,那么有理由期待更强大的编辑功能很快就会出现! 🤞🏻🤞🏻

模拟网络状况

Chrome DevTools 中的 Network 选项卡可能是使用最广泛的选项卡(当然,我没有相关数据,但作为一名 Web 开发人员,我可能有 20-30% 的时间使用 Console 选项卡,而其余时间使用网络选项卡)。 它为我们提供了关于从页面发出的请求、它们的类型、元数据/标头、状态、资产(图像、样式表等)的下载进度、加载时间等的各种信息。 有了如此令人难以置信的实用性,难怪“网络”选项卡是最常见的。

然而,很容易错过我们正在讨论的功能; 您可能没有注意到一个无害的下拉菜单,上面写着显而易见的内容:在线。

如果单击此选项,您将看到一个下拉菜单,其中包含各种选项,可让您限制网络速度:快速 3G、慢速 3G、离线等。虽然此选项可能有多种用例,但最常见的是测试网站离线时在慢速网络上的性能或 Web 应用程序行为(假设添加了此类功能)。

让我们试一试。 我将网络设置为“Slow 3G”并重新加载与上一个屏幕截图相同的页面。 在我这样做之前,请注意前面的屏幕截图,在我当前的网络连接(40 Mbps 宽带)下,大多数资产的下载时间都在 100 毫秒以内。

现在,是时候看看慢速 3G 对它的影响了。

有什么不同!

请注意,资产的加载时间现在在 5-10 秒范围内。 此外,网站在 17.25 秒内完成加载! 是的,我知道你在想什么,但你必须考虑到在慢速 3G 网络上,任何现代网站都需要几秒钟才能加载。 是否要在慢速网络上快速加载是另一回事,但总而言之,它必须是一个商业决策,收益证明付出的努力是合理的。

在上面的屏幕截图中,请注意网络选项卡上的警告图标。 这是 Chrome 提醒您进行了一些非默认的持久更改的方式,除非您知道自己在做什么,否则您应该重置它。

交互式颜色选择器

在 DevTools 中检查 DOM 元素是我们几乎每天都会做的事情。 我们也习惯了旁边显示的 CSS 详细信息部分,我们知道我们可以编辑它并立即看到结果。

这其中隐藏的一个小小的便利是,如果你点击一个 CSS 颜色属性,就会弹出一个熟悉的颜色选择器界面!

请注意,它不是一个简单的、基本的颜色选择器。 它允许您控制透明度、更改正在使用的颜色系统、直接从页面选择颜色等等。

因此,下次您尝试网站的强调色时,例如,您无需计算或猜测您心中的阴影的正确值! 事实上,很多人喜欢直接在浏览器中设计网站; 对他们来说,这些功能简直就是天赐之物! 🙂

监控页面元素上的事件

我们经常处于这样一种情况,我们希望我们知道我们感兴趣的那个特定元素发生了什么。当在一个重要的代码库中使用 jQuery 时尤其如此——无论是你的还是其他人的; 事件处理程序和逻辑遍布各处,追踪错误可能是一场噩梦。

值得庆幸的是,Chrome 开发者工具为此提供了一个绝妙的功能。 它将为您观察指示的元素并将事件记录到控制台。 但有一点令人失望:此功能没有基于 CSS 类名的元素选择功能。 因此,$(“#email”) 的 jQuery 方式不可用。 🙂

  如何关闭无响应的 Chromebook 应用程序

话虽如此,让我们看看如何让它发挥作用。 我们首先使用 DevTools 检查器执行一个简单的“检查元素”。 是的,这就是我们每天使用的检查工具。

在下面的屏幕截图中,我使用了检查器工具来突出显示文本输入。 我所说的“突出显示”并不是指页面上的元素被突出显示(正如您所见,它不是); 相反,在文本输入上单击了检查器光标,DevTools 中相应的 HTML 代码被突出显示。

这样做的目标是当前检查的元素以进行事件监视,这使得该元素可以作为一个名为 $0 的特殊 JavaScript 变量进行访问。 接下来,确保我没有粗心地单击浏览器窗口的其他地方(尤其是 HTML 代码部分),我单击控制台并为该文本输入附加一个事件侦听器。 为此,我只需要一行代码:monitorEvents($0, ‘mouse’)。 这里的“鼠标”部分告诉 Chrome 我只对监视基于鼠标的事件感兴趣。

只要我按下 Enter/Return,监控就会被激活,如果我现在将鼠标悬停在文本输入上或单击文本输入,这些事件就会作为 JavaScript 对象记录到控制台:

正如您在屏幕截图中看到的那样,当我单击该元素、键入我的名字然后将鼠标移开时,捕获了几种类型的鼠标事件(键入事件是键盘事件,未记录)。 事件本身就是 JavaScript 对象,从屏幕截图中可以清楚地看出; 每个事件对象都包含大量信息。 例如,我扩展了“点击”事件对象,属性的数量无法在一张屏幕截图中放得下!

我强烈建议您立即试用此功能,因为它肯定会为您即将进行的项目省去很多麻烦!

网站性能报告

如今,网站性能决定了企业/网站的成败。 即使是性能的小幅提升也会转化为巨大的 SEO 收益以及用户满意度。 但是你怎么知道你网站的哪些部分需要注意,哪些已经很好了?

是否需要聘请专家团队,耐心等待几天?

好吧,在某些情况下需要这样做,但幸运的是,Chrome DevTools 已经涵盖了我们其他人。 在最新版本的 Chrome(2020 年末)中,您会在 DevTools 中找到一个 Lighthouse 选项卡。 几个月前,它被称为 Audits,令人困惑的是,这就是您在撰写本文时会在官方文档中找到的名称。 不管怎样,重点是Lighthouse曾经是一个免费检查网站性能的时髦网站,但后来谷歌把它拿下了(没有给出原因)。 值得庆幸的是,同样强大的功能后来又出现在 DevTools 中。

要生成性能报告,您需要做的就是在加载您感兴趣的页面后点击一个按钮:

正如您在屏幕截图右侧所见,有几个选项可以控制您想要的信息量(当然还有您想要测试的内容)。 一旦您对设置感到满意,请点击那个蓝色的大按钮,坐下来放松一下。 几秒钟后,您将获得如下所示的有益报告:

您在上面的屏幕截图中看到的数字显示了每个类别的总分。 渐进式 Web 应用程序 (PWA) 的类别显示为灰色,可能是因为该网站没有 PWA 功能。 此外,正如您可以从屏幕截图(最右侧)中的滚动条大小看出的那样,这是一份很长的报告。

以下是性能部分的一部分:

我不会说 Lighthouse 及其建议是网站性能的圣杯,但这些非常有帮助; 这是因为网站所有者和开发人员很少知道存在哪些问题以及如何准确解决这些问题。

老实说,作为一名 Web 开发人员,我什至感到迷茫,因为性能和测试往往是某种专业。 因此,Lighthouse 是一个鲜为人知、未被充分重视的工具,现在是 Chrome DevTools 的一部分,对企业主和开发人员/系统管理员等有着巨大的用途。

代码编辑能力

DevTools 中的 Sources 选项卡允许我们访问网站加载的各种文件。 它还具有代码编辑、保存片段等功能。这对网络开发人员来说应该不足为奇。 然而,DevTools 也有一些内置的便利,使习惯了他们最喜欢的代码 IDE 的开发人员的生活更轻松。

  如何强制 Cortana 在 Windows 10 上使用 Chrome

DevTools 使用一些众所周知的键盘快捷键,可以节省您的时间并最大程度地减少代码争用的麻烦。 例如,Ctrl + D(或 Mac 上的 Cmd + D)可用于突出显示多次出现的单词。 类似地,按住 Ctrl(或 Mac 上的 Cmd)并单击代码中的多个位置会为您提供多个光标。 看看下面的视频以获得更好的想法:

如果您认为这很酷,请确保深入研究官方文档以利用 DevTools 必须提供的所有代码编辑功能。

控制 DOM 元素状态

有时我们正在测试或调试某些东西,但我们追求的行为仅在特定元素状态下可用。 根据它的状态,您可能会度过一段糟糕的时光; 对我来说,它是“悬停”状态,因为我记得浪费了无数分钟试图为悬停动作计时或添加额外的临时 CSS 等。

值得庆幸的是,Chrome DevTools 有一种简单的方法来更改被检查元素的状态。 更重要的是,如果我们右键单击元素(在元素选项卡中),这样做的选项就在那里,但考虑到功能的数量和一天工作的压力,很容易忽略这一点:

是的,真的就这么简单!

现在,您无需在代码中加入条件测试逻辑、编写额外的 CSS 或在观察处于不同状态的元素时跳过其他一些步骤。

工具面板

最后但并非最不重要的是此列表中的“工具”面板。 这是另一个非常有用的功能,这些功能隐藏得很好,只能使用键盘快捷键才能看到。 顾名思义,工具面板不是一个单一的工具,而是一个仪表板,其中几乎所有 DevTool 的功能都可用。 由于提供整体 DevTools 功能的函数太多,因此顶部有一个搜索栏。

要激活工具面板,请确保您位于 DevTools 面板中,然后按 Ctrl + Shift + P(或 Mac 用户为 Cmd + Shift + P):

工具面板充满了功能和惊喜。 例如,您知道可以直接从 DevTools 截取屏幕截图吗?

我打赌不会,因为你必须启动“工具”面板并在搜索栏中键入“screenshot”才能发现:

您还会注意到几个用于截取屏幕截图的选项,包括一个用于选定 DOM 节点的选项! 更多地探索“工具”面板,我保证您不会失望的!

如果您需要远程截取任何网页的屏幕截图,请查看 techblik.com 屏幕截图工具。

结论

Chrome 浏览器本身功能丰富,但它真正出彩的地方是 DevTools 产品。 正如我们在这篇文章中看到的,有相当多的隐藏特性——以及其他隐藏在众目睽睽之下的特性——绝大多数用户都不知道。 为什么隐藏这些功能?

我猜其中一些是非常实验性的(例如设计模式),Chrome 开发人员想让日常用户很难找到这些功能。 对于其余的许多功能,我认为这只是信息过载的情况:如果有 120 个功能,其中一些具有子功能等等,则几乎不可能为此类设计正确的 UI一个场景。 此外,谷歌历来在其产品的用户体验方面做得并不好,所以就是这样。 🤷🏻‍♂️

无论如何,我希望您发现其中一些功能很有用。 但更重要的是,我希望这篇文章能让您了解什么隐藏在哪里,以便下次您想要探索或搜索特定内容时,您知道去哪里“深入挖掘”。 😆