如何使用检查元素进行网页抓取

现代交互式网站直观易用，但您是否想过它们蕴含着多少宝贵的数据？如果您知道如何使用“检查元素”功能，就可以揭示网站底层 HTML 和 CSS 结构，这对于网络爬虫至关重要。

开发者和设计师花费大量时间打造美观易用的网站。然而，所有这些用户体验的背后，是支撑网站运行的源代码——它是网站的骨架。多亏了“检查元素”功能，我们用户才能窥探网站的内部构造。

使用“检查元素”功能有很多好处，尤其对于网页设计师、开发者、营销人员或正在构建自定义网页爬虫的用户而言。该工具允许您了解元素的功能，检查它们在不同屏幕分辨率下的显示效果，从源代码中获取数据以用于网页抓取等等。那么，让我们深入了解一下如何使用“检查元素”功能。

什么是检查元素？

“检查元素”是网页浏览器的一项功能，可让您查看网站的 HTML 结构。它内置于大多数现代桌面浏览器（例如 Chrome、Firefox 或 Safari）中，并且是开发者工具的一部分——开发者工具集允许开发人员测试、排查故障和对网站进行实验。

通过使用“检查元素”，您可以查看和临时编辑 HTML、CSS 和 JavaScript 代码，监控网站性能，以及查找有关特定元素的布局信息（例如，按钮的尺寸和边距）。

“检查元素”功能对于网页抓取也很有用。构建抓取工具时，您可能只需要提取相关的数据点，而不是整个 HTML 结构。该功能允许您查找并收集想要抓取的特定 CSS 选择器、元数据或隐藏元素。

为什么要使用检查元素？

“检查元素”功能允许网页设计师和开发人员实时临时修改元素属性，从而简化了他们的工作。简而言之，它允许他们在对网站进行实际更改之前测试错误修复并尝试新功能。

该功能对于网络爬虫也很有用。

它可以帮助您收集特定的 CSS选择器 或其他 数据点 为您的刮刀。
检查元素 还可以帮助查看您的抓取工具的请求标头是否不会被网站阻止。抓取工具使用的标头通常与普通用户不同。但此功能可以让您看到它，确定它是否看起来足够自然，并相应地进行更改。

“检查元素”功能对营销人员和SEO专家来说非常实用。

通过检查 HTML 和 CSS 代码，营销专家可以检查网站的内容是否达到标准。您可以查看颜色和字体按照 品牌准则，检查 链接信息 （跟随或不跟随链接）、检查网站内容在桌面、响应式和移动视图上是否显示良好等等。

网站用户也可以从中找到从中受益的方法。

如果网站难以下载某些媒体，您可以使用 检查元素 至 找到源 URL，然后从那里下载。
你也可以找点乐子——尝试使用 检查元素 至 重写整篇文章 通过改变 HTML 元素值。

“检查元素”功能还有其他用途。有时，您可以通过修改源代码绕过付费墙，从而获得网站的完全访问权限。但是，我们不建议您出于不道德的目的使用“检查元素”功能——这不仅会违反网站的使用条款，还可能面临法律后果。

如何使用检查元素：详细说明

使用“检查元素”工具非常简单。该工具包含多个不同的选项卡，您可以探索这些选项卡，但最常见的用途包括：

元素面板 允许检查和修改 HTML 和 CSS 代码。

控制台面板 允许检查和调试 JavaScript。

来源面板 允许检查和修改 CSS 或 JavaScript 源文件（弹出窗口、分析文件）。

网络面板 允许监控 HTTP 请求。

性能面板 允许分析网站的性能 – 加载和下载速度。
应用程序面板 允许管理 cookie、本地存储和其他会话数据。

请记住，这些面板在每个浏览器中都有不同的名称。例如，Chrome 和 Safari 中的“元素面板”称为“Elements”，而 Firefox 则将其称为“Inspector”。但是，其中的内容保持不变。

如果您是第一次使用“检查元素”功能，建议您在同一个网站上使用不同的浏览器进行测试，以便熟悉该工具的相关术语。

访问 HTML 代码的最简单方法是右键单击网站上的任何元素，然后选择“检查”或“检查元素”。但是，不同的浏览器和操作系统略有不同。让我们来详细分析一下。

Google Chrome 和 Mozilla Firefox

在 Google Chrome 和 Mozilla Firefox 中打开“检查元素”有三种方法：1) 右键单击进行检查，2) 使用快捷键，或 3) 通过浏览器的菜单栏打开开发者工具。

使用右键单击： 使用鼠标或触控板，右键单击网站上的任何元素。然后选择“检查”。

使用快捷方式： 您可以使用键盘快捷键打开 检查元素。 在 MacOS 上， 点击 command + option + i. 在Windows上， 点击 Ctrl + Shift + i。此外，您可以使用 F12 在 Windows 和 MacOS 上打开开发人员工具（有时您可能还需要按 Fn 键）。
使用浏览器的菜单： 在 Chrome 上找到烤串菜单（三个堆叠的点），在 Firefox 上找到汉堡菜单（三个堆叠的线）。通常，它位于 URL 栏的右侧。找到“更多工具”，然后选择“开发者工具”。

Safari

如果您是 Windows 用户，则无法使用最新版本的 Safari 浏览器，因此只能在 macOS 系统上打开 Safari 的“检查元素”功能。此外，该操作流程也与 Chrome 或 Firefox 浏览器有很大不同。

首先，你需要启用 开发者工具 在 Safari 设置中。要执行此操作，您可以按 command 和 , （逗号按钮），或者在设备屏幕顶部的菜单栏（带有 Apple 标志的栏）中，单击 Safari，然后单击设置... 在设置面板中，导航到“高级”栏。在那里，选中“显示 Web 开发人员的功能”框。现在您可以打开 检查元素.

使用右键单击： 右键单击网站上的任何元素，然后按“检查元素”

使用快捷方式： express command + option + i 在键盘上打开 检查元素。 Safari 默认不使用 F12 键快捷键，但您可以通过键盘设置手动设置。
使用设备上的菜单栏： 在 Safari 上打开页面后，您可以在屏幕顶部的菜单栏上访问各种设置（确保 Safari 屏幕处于活动状态）。在那里，您可以按“开发”，然后单击“显示 Web 检查器”。

移动设备（iOS 和 Android）

在 iOS 或 Android 上使用“检查元素”功能并不简单，因为大多数情况下它仍然需要在电脑上使用。不过，您可以尝试以下几种方法。

远程调试

您可以尝试使用 Android 上的 Chrome 或 iOS 上的 Safari 进行远程调试。远程调试允许您在计算机上使用手机环境。此方法需要使用计算机，并且功能最强大。

在安卓设备上：

启用开发者选项。在“设置”中，点击“关于手机”，然后点击版本号七次。
然后，通过 USB 将您的移动设备连接到您的计算机。
在计算机上打开 Chrome，然后转到 chrome：// inspect。您将在那里看到已连接的设备。
现在你可以访问你的目标网站并打开 检查元素。 这样，您就可以在桌面上检查移动视图。

在iOS 设备上，操作过程类似：

在您的移动设备上，转到“设置”，然后找到 Safari。
当 Safari 设置打开时，找到高级，然后在那里切换 Web 检查器。
然后，将您的 iOS 设备与 Mac 连接，并在电脑上打开 Safari。转到菜单栏中的开发，然后选择您的 iOS 设备。
现在，转到你的目标网站，然后打开 检查元素。

使用浏览器开发人员工具

部分移动浏览器还提供“请求桌面版网站”选项，该选项会显示类似桌面版网站的布局，方便您进行一些基本检查。如果您无法使用电脑，但又需要查看网站的不同布局（移动版和桌面版），此功能非常实用。不过，您仍然无法打开“检查元素”工具。

您还可以查看网站在桌面设备上如何适应不同的屏幕分辨率。许多浏览器都提供“响应式设计模式”，可以帮助您查看网站内容在不同屏幕参数下的显示效果。您可以在使用此功能时打开“检查元素”工具，但这需要一台电脑。

使用第三方应用程序

有一些第三方应用程序可用于元素检查 - 您可以为 iOS 和 Android 设备下载它们。但是，它们可能价格昂贵，并且与在桌面上使用开发人员工具相比，它们的功能可能有限。

检查元素游乐场

现在您已经了解了“检查元素”是什么以及如何使用它，可以尝试将所学知识付诸实践。虽然有些更改非常简单（例如，更改文本），但有些更改可能需要基本的 HTML 和 CSS 知识。如果您不知道如何使用它们，网上有很多免费的 HTML、CSS 和 JavaScript 教程可供参考。

检查 Element Playground 以进行网页抓取

如果您想使用“检查元素”功能进行网页抓取，您可能需要从目标网站复制一些选择器——这有助于抓取工具只提取与您相关的内容。经验丰富的开发者知道如何找到这些选择器并编写抓取逻辑，但如果您是新手，ChatGPT也可以帮您进行网页抓取。

在下面的示例中，您会找到一个包含术语及其描述的表格。使用“检查元素”功能查找它们的 CSS 选择器（将鼠标悬停在代码上即可突出显示该代码定义的区域）。

完成后，您可以编写一个简单的 Python 抓取工具来从下表中抓取所有术语和描述，并将它们保存为 CSV 格式。

术语	描述
代理服务器	代理服务器是客户端和服务器（网站）之间的中间人。它隐藏用户的原始 IP 地址，从而提高安全性和隐私性，并允许绕过地理限制。
的网络浏览器	网络浏览器是一种允许用户访问和查看互联网上的网站的软件。
IP地址	IP 地址是分配给连接到互联网的任何设备的一串唯一数字。IP 有助于识别互联网上的设备。
网页抓取工具	Web Scraper 是一款自动从网站提取数据的软件。您可以使用 Python 等语言自行构建 Web Scraper，也可以选择现成的 Web Scraper。

测试检查元素的其他简单方法

下面列出了一些可以使用“检查元素”功能进行操作的典型 HTML 元素——标题、表格和图像。这里有一些示例供您尝试。

方案一：使用“检查元素”工具修改标题的大小。

找到 <h2> 标题 检查元素 部分。
代码看起来应该像这样： <h2> ... </h2>.
双击上 <h2> 标记并将数字 (2) 更改为 1 至 6 之间的任意数字。
观察网站如何随着标题大小的变化而更新。

建议二：更改段落内的内容。

找到 <p> 标签包含以下文本：“这是一个段落。”
双击段落文本。
用您自己的句子或短语替换文本。

方案三：在表格中添加更多行和列。

在源代码中找到表格。表格行由以下代码定义： <tr> 标签和列 <td> 标签。
添加新 <tr> 标签来创建新行。
在新行中，使用多个 <td> 标签来添加列。
尝试改变每个的宽度 <td> 通过使用 CSS 调整其属性（例如， 'width="100px"').

方案四：使用 CSS 自定义表格背景颜色。

为您的 <table> 源代码中的标签。
在 - 的里面 ”style”属性，该属性已包含“width“和”border-collapse”，添加一条新规则：'background-color:Tomato;“。
确保所有属性都放在引号内，如下所示：'"style="border-collapse: collapse; width: 100%; background-color:Tomato;"“。
检查背景颜色如何变化。