元素检查器技巧：8 个必须知道的技巧！ 🛠️

浏览器中的元素检查器可能看起来像是仅限开发人员的工具，但即使您对编程一无所知，您也可以用它做一些非常酷的事情！ 🚀

1 . 下载图片

也许您需要从网站下载图像。您尝试右键单击并点击“保存图像”，但发现该选项变灰或“保存图像”按钮没有出现。其他时候，您可能只能下载图像的缩略图，而不能下载整个文件。 🤔 发生什么事了？

开发人员经常故意禁用此“保存图像”按钮，或者使用不允许以这种方式下载图像的 Web 框架。但是元素检查器中有一个方便的解决方案。只需三个简单的步骤，您就可以从网站获取全尺寸的任何图像资源。 📸

步骤 1

做 右击 在页面上的任意位置，然后选择“检查元素”或“检查”。您还可以在浏览器中使用检查器特定的键盘快捷键。 F12 适用于大多数浏览器和操作系统。我使用 Firefox 进行此演示，但步骤相同。 🖱️

第 2 步

在元素检查器窗口中，单击“网络”选项卡。网络选项卡应该有“图像”作为其子菜单之一。点击“图片”。 🖼️

现在重新加载页面，以便所有图像资源都出现在“图像”选项卡中。使用 地址栏旁边的刷新按钮 从您的浏览器中或按 Ctrl+R。 🔄

步骤3

一切就绪了。整个图像库应加载到列表中。该列表是动态更新的，因此随着更多图像上传到网站，它们也会出现在这里。 🖼️✨

您可以将鼠标悬停在文件上以查看其预览和尺寸。双击在新选项卡中打开文件，您可以使用右键菜单将其保存。 💾

2 . 下载影片

就像图片资源一样，有时网站不允许 释放 直接播放影片。但是您可以通过在元素检查器中加载它们来下载它们。将它们加载到检查器后，只需双击文件名即可在新选项卡中打开它。 🎥

步骤 1

按下 F12 键盘快捷键打开元素检查器窗口（在大多数系统上应该有效）。或者，您可以右键单击网页上的任意位置并选择“检查”。应该会出现元素检查器窗口。 🖱️

第 2 步

单击“网络”选项卡，然后单击“媒体”以过滤除视频文件之外的所有内容。重新加载页面。通过单击浏览器的刷新按钮或按 Ctrl+R。 🔄

步骤3

视频文件应加载到列表中。您无法进行即时预览，但可以双击文件在新选项卡中打开它。在那里，您可以右键单击并下载。 🎬

3 . 截取整页截图

如果您想保存整个网页，您可以快速将其下载为 PDF 或 HTML 文件。但是如果您想对整个页面进行常规截图该怎么办？这里 我会解释怎么做。 📸

Firefox 在上下文菜单中有一个专门的截图工具，所以我将向你展示如何在 谷歌浏览器 和其他浏览器。 🌐

通过右键单击页面上的任意位置或按 F12 打开检查器工具。

按 Ctrl+Shift+P 打开运行窗口。我写 截取全尺寸屏幕截图 在这个窗口中。点击它。 📄

将立即出现“另存为”窗口，允许您以 JPG 格式保存整页截图。 💾

4 . 假装你在打电话

大多数网站的加载方式会根据设备类型和屏幕尺寸而不同。如果您想欺骗网站，让其认为您正在使用其他设备（无论出于何种原因），您可以使用检查器工具轻松实现。 📱

在 Chrome 中，从右键单击菜单或使用 F12 打开元素检查器窗口。然后点击左上角的小型笔记本电脑和电话图标。 Firefox 有一个类似的按钮，称为响应式设计模式（Ctrl+Shift+M）。 🖥️

您将获得一个可以模拟的设备列表，还可以手动调整 屏幕。一旦您选择了移动设备，您会注意到您的浏览器也模拟了触摸手势。 📱✨

5 . 识别来源

此技巧适用于创意人员，但任何对网站字体感兴趣的人都可以使用此技巧。您可以使用 检查工具来识别 有时甚至下载字体。 🖋️

首先，打开元素检查器工具。接下来，单击“网络”选项卡（它可能隐藏在溢出菜单中）并选择“源”。

然后按 Ctrl+R。渲染的字体将被加载到列表中，可能是 WOFF 格式。您可以通过双击字体名称直接下载。例如，How-To Geek 使用 Roboto 作为其默认字体。 🔤

如果您需要有关字体的更多详细信息，请转到“元素”选项卡并选择“样式”。向下滚动到字体系列属性并单击它。网站上将会显示相应的文字。这样您就可以准确地识别来源。 🎨

6 . 编辑页面上的文本（暂时）

您是否知道可以使用检查器临时编辑网页上的几乎所有内容？此工具允许您编辑组成网站的代码，因此如果您知道一些代码，您可以使页面看起来您想要的样子（仅在您的机器上，直到您重新加载页面）。 🛠️

即使您不懂任何编码，您也可以编辑任何网页上的基本文本。这可以是和朋友们玩的一个有趣的小恶作剧。 😉

突出显示要编辑的页面上的文本并右键单击它。然后选择“检查”或“检查元素”。

相关文本片段应出现在“元素”选项卡中。只需双击并将文本替换为您想要的任何内容。 ✏️

关闭元素检查器，您就完成了！请注意，如果您重新加载页面，您的更改将被撤消。 🔄

7 . 删除项目

就像编辑文本一样，您也可以从网页中删除特定元素。再次强调，更改仅会持续到您重新加载页面为止。 ❌

右键单击要删除的项目，然后选择“检查”或“检查元素”。

将鼠标悬停在标签上“

”，直到整个元素被突出显示。然后只需按下 Delete 键。 🔚

就这样，它就没了！ 🕵️‍♂️

8 . 识别颜色值

给创意者的另一个提示：你可以从任何 网页上的颜色 使用元素检查器中的吸管工具。 🎨

右键单击页面上的任意位置并打开检查器。默认情况下，“规则”窗口在“检查器”选项卡内打开。向下滚动以查找标有颜色的任何属性。

颜色属性旁边应该有一个彩色的圆圈或正方形。单击它以打开颜色选择器并按下旁边的吸管图标。 🖌️

您可以将此吸管拖到页面上的任何位置来查找颜色值。单击吸管将自动使用您刚刚选择的颜色值填充属性。您可以从这里轻松复制它。 📋

---

这些 提示几乎不触及表面 比使用元素检查器实际上可能实现的效果要好。如果您想深入了解 Web 开发，这里有一个指南可以帮助您入门。 💻