🌓 🍣 🤗 我最喜欢的Chrome开发者工具 📓 🏄 🎴

朋友们，美好的一天！

Chrome Developer Tools是用于开发Web应用程序的功能非常强大的工具包。使用这些工具，我们可以导航DOM，检查服务器请求，调整应用程序性能等。

在许多可用功能中，有几个非常有趣的功能。这些“功能”有助于减少一两次点击-这不是我们聚集在这里的原因吗？

jQuery风格访问DOM

jQuery是一个很棒的库。她在整个时代一直在管理网络。根据一些报告，世界上超过70％的最受欢迎网站都使用jQuery的那个版本。对于2006年写的图书馆来说，这是一个了不起的成就。

jQuery提供的最流行的API是$，用于选择DOM元素。在Chrome开发者工具控制台（以下称为控制台）中，可以使用$选择器，它是document.querySelector（）的别名。

例如，要单击一个按钮，您需要执行以下操作：

$$是document.querySelectorAll（）的同义词：

使用$还有很多技巧。有时选择器太复杂而无法手动键入，或者我们根本无法确定选择器的足够特异性。如果在“元素”选项卡中选择一个项目，则可以使用$ 0变量

在控制台中获取它：实际上，控制台允许您访问最后选择的5个项目。这些元素分别通过变量$ 0- $ 4可用：

复制项目属性

元素选项卡非常有用。它存储了我们网站的DOM树，允许您查看元素的样式并即时对其进行更改。

我发现的真正很棒的事情是能够使用上下文菜单复制元素的属性（不仅限于此）。

例如，您可以复制元素选择器：

该选择器可能不够具体或过于具体，但无论如何仍有助于调试代码。

如您所见，我们还可以复制元素样式，即“路径” JS（document.querySelector（SELECTOR））或XPath。

网络请求过滤

有时我们必须处理一个向服务器发送大量请求的页面。我的意思是，有很多要求。

在这些荒野中跋涉寻找特定的要求并不是一件令人愉快的职业。幸运的是，您可以过滤掉查询。

一组过滤器允许您按类型显示查询，例如XHR / Fetch，样式表，JS脚本，图像等：

您还可以在过滤器上方的输入字段中指定自己的条件：

模拟不同的网络连接速度

使用“网络”标签，我们可以在不同连接速度的条件下测试我们的站点。默认设置为在线，您可以在其中充分享受连接的带宽。

除在线外，还提供诸如快速3G，慢速3G和离线等“预设”，它们在页面加载速度，文件下载速度和时间延迟方面有所不同。如果需要模拟其他内容，可以使用“添加...”按钮添加自己的配置文件：

在控制台中使用实时表达式

什么是现场表情？

实时表达式是在控制台中不断“评估”的表达式。假设您要跟踪变量的值。您可以一次又一次输入：

由于有了Live Expressions，您可以专注于代码并允许Chrome独立监视更改：

此功能可用于控制台中声明的变量和脚本中声明的变量。

模拟各种设备

那些使用响应式应用程序的人会熟悉您在努力工作时所感受到的感觉，并长期以页面布局的美感着眼，以了解在分辨率不同的设备上所有东西如何分崩离析。

我不是在这里谈论媒体查询，而是展示一种测试其工作的方法。

如果单击看起来像平板电脑和电话的按钮，您将看到浏览器查看区域如何根据各种设备的大小而变化。

您可以从包含热门设备（例如iPhone X，iPad Pro，Pixel 2，Pixel 2 XL等）的预设列表中选择一个设备。此列表远不完整（不太相关），但足以解决大多数问题。

如果未列出所需的设备，则可以手动设置分辨率。如您所见，我设置了自己的权限来模拟OnePlus 6（我的日常小工具）：

更改项目状态

您是否遇到过当您将鼠标悬停在元素上时要使用应用于元素的样式的情况（：悬停），但是每次将光标移至“样式”选项卡时，元素都会失去其悬停？

开发人员工具使您可以修复元素的状态。我们可以轻松启用/禁用以下状态：活动，悬停，焦点，焦点内和访问：

这是我最喜欢的Chrome开发者工具。感谢您的关注。

编码愉快！

我最喜欢的Chrome开发者工具