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

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

1 . 下载图片

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

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

步骤 1

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

第 2 步

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

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

步骤3

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

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

2 . 下载影片

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

步骤 1

Abre la ventana del inspector de elementos presionando el atajo de teclado F12 (debería funcionar en la mayoría de los sistemas). Alternativamente, podés hacer clic derecho en cualquier parte de la página web y seleccionar “Inspeccionar.” La ventana del inspector de elementos debería aparecer. 🖱️

第 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 开发，这里有一个指南可以帮助您入门。 💻