如何使用检查元素

赌博

大多数人不知道有一个开发工具宝库可供他们使用，而且隐藏在他们最喜欢的浏览器中。

如何使用检查元素

每个网络浏览器都提供开发人员工具来检查网站的编码，但是，对于普通互联网用户来说，它是一个外国实体。毕竟，谁想看网站的编码，对吧？

事实证明，通过查看网站的编码，您可以学到很多东西。请继续阅读以了解检查元素功能必须提供什么以及如何使用它。

如何在特定浏览器中使用 Inspect 元素

大多数浏览器都有检查网站元素的工具，但它们的工作方式通常相同。

在 Google Chrome 中使用 Inspect Element

  1. 打开您要检查的网站。

  2. 右键单击页面上的任意位置并选择 检查.

    或者

  3. 单击工具栏右上角的三个垂直点。

  4. 去 更多工具.

  5. 选择 开发者工具.

    或者

  6. 按下 F12 PC 上的键盘快捷键或 CMD + 选项 + I 在 Mac 上。

在 Microsoft Edge 中使用检查元素

  1. 打开一个网站。

  2. 单击浏览器工具栏右上角的三个垂直点。
  3. 向下滚动并点击 更多工具.

  4. 点击 开发者工具.

    或者

  5. 右键单击网站上的任意位置。
  6. 点击 检查.

    或者

  7. 按 Ctrl + Shift + I.

这三种方法中的任何一种都会给你相同的结果。

如果您正确执行此操作，您将在浏览器底部看到一个新窗格。这些是开发人员工具，包括元素选项卡。这是您检查元素所需的工具。

默认情况下，面板将在屏幕底部打开，但您可以随时更改其显示方式。按照以下简单步骤重新定位开发人员工具面板：

  1. 单击开发人员工具面板上角的三个垂直点。

  2. 选择停靠边（左侧、底部或右侧）或取消停靠到单独的窗口。

将光标悬停在“开发人员工具”面板框架的边缘并拖动将缩小或扩大工作区。例如，如果您选择将面板停靠在浏览器窗口的右侧，请尝试将鼠标悬停在左边框上。当您看到箭头光标时，您可以拖动面板以调整其大小。

使用 Inspect 元素（特定于操作系统）

尽管通过向您展示如何在浏览器中使用 Inspect Element（它首先存在的位置）可能已经涵盖了所涉及的许多步骤，但无论如何我们将向您展示如何在大多数操作系统上使用。

如何在 Chromebook 上使用 Inspect Element

Chromebook 上的默认浏览器是 Google，因此请按照 Chrome 浏览器说明访问 检查元素.这里有一个小进修课程给你：

  1. 打开一个网站。

  2. 单击工具栏右上角的三条垂直线。

  3. 选择 更多工具.

  4. 点击 开发者工具.

您也可以使用右键单击方法或 F12 功能键以更快地访问开发人员工具。

如何在 Android 设备上使用 Inspect Element

在 Android 设备上运行 Inspect Element 略有不同。查看如何进入 Android 上的 Inspect Element 面板：

  1. 按下 F12 功能键。
  2. 选择 切换设备栏.

  3. 从下拉菜单中选择 Android 设备。

当您选择特定的 Android 设备时，您会注意到网站的移动版本正在加载。从这里，您可以在舒适的桌面上自由使用 Android 设备上的“检查元素”功能。

此方法适用于 Chrome 和 Firefox 浏览器，因为它们的开发人员工具中有一项称为设备模拟的功能。

它也以相同的方式适用于 iPhone 设备。您只需要在下拉菜单中选择正确的即可。

如何在 Windows 中使用检查元素

Inspect Element 工具不一定是特定于操作系统的，而是特定于浏览器的。这意味着开发人员工具是您使用的浏览器的一项功能，不一定是 Windows。但是，无论您喜欢哪种浏览器，都可以进入“检查元素”面板。

如果您使用的是 Windows 操作系统，则您也可能会使用 Microsoft Edge 浏览器。查看如何在 MS Edge 上访问 Inspect Element：

  1. 打开您要检查的网站。

  2. 点击浏览器窗口角落的三个垂直点。

  3. 向下滚动并选择 更多工具.

  4. 点击 开发者工具.

您还可以使用 F12 如果您想更快地访问 Inspect Element，请使用功能键。此外，右键单击网页并选择“检查”也可以。

如何在 Mac 上使用检查元素

如果您使用的是 Mac，则您选择的浏览器可能是 Safari。在 Safari 上打开 Inspect Elements 与在 Chrome 和 Firefox 上打开略有不同。但通过以下步骤同样简单：

  1. 打开 Safari 浏览器。
  2. 点击 苹果浏览器 在标题选项卡中。
  3. 选择 喜好 从下拉菜单中。
  4. 点击 先进的 位于屏幕顶部的齿轮图标。
  5. 选中显示的框 在菜单栏中显示开发菜单.

通过这些步骤可以在浏览器上启用检查元素功能。如果您不先启用 Inspect Element，则在打开网站时将看不到该选项。

完成此步骤后，只需右键单击任何打开的网页并选择“检查”。您还可以使用快捷键命令： CMD + 选项 + I （检查）。

如何在 iPhone 上使用 Inspect Element

您想使用“检查元素”功能查看移动版本的网页在 iPhone 上的显示方式吗？只需几个简单的步骤，您就可以做到这一点以及更多。但是在查看元素之前，您需要启用 网络检查员 对于您的 iOS 设备：

  1. 去 设置.

  2. 现在，选择 苹果浏览器.

  3. 滚动到底部并点击 高级菜单.

  4. 现在，点击切换开关打开 网络检查员.

此外，您需要确保 Mac 上的“开发”菜单已启用：

  1. 打开 Safari。
  2. 选择 苹果浏览器 从顶部标题。
  3. 接下来，点击 喜好.
  4. 然后，点击 先进的.
  5. 选中显示的框 在菜单栏中显示开发菜单.

启用 iOS 移动设备和 Mac 后，您将在 Mac 的顶部栏中看到“开发”菜单。单击它以查看连接的 iPhone 和设备上活动的网页。选择网页还会在 Mac 屏幕上打开同一页面的 Web Inspector 窗口。

但请记住，这些说明仅适用于运行 Mac 的 Safari，不适用于 Windows 上的 Safari。

如何在 Google 表单中使用 Inspect 元素

您还可以在 Google 表单上使用 Inspect 元素。但是，如果您正在寻找测验的答案，那您就不走运了。您不会在编码中找到答案。如果您是表单的创建者或编辑者，则只能查看答案。无论哪种方式，如果您是在 Google 表单上回答测验的学生，您将只能看到自己的答案。

  1. 您可以右键单击表单并选择 检查 查看表单的所有代码。

如何在被阻止时使用 Inspect 元素

有时，您会发现无法检查网页，并且如果您尝试右键单击它，检查选项会变灰。你可能认为它被阻止了，但有很多方法可以解决这个问题：

方法一—— 关闭 JavaScript

  1. 进去 设置.

  2. 搜索 ”JavaScript”.

  3. 关掉 JavaScript.

方法 2 – 长期访问开发者工具

不是右键单击鼠标进行检查，而是执行以下操作：

  1. 去 设置 在您的浏览器中。

  2. 选择 更多工具.

  3. 向下滚动并点击 开发者工具.

方法 3 – 使用功能键

您也可以尝试使用 F12 阻止右键单击进行检查的网页上的功能键。

在找到适合您的方法之前，您可能必须尝试所有这些方法。作为最后的手段，您还可以尝试通过键入来查看源代码 查看源：[输入完整网址]. 维基百科查看源页面

如何在 Discord 上使用 Inspect 元素

在 Discord 上检查您的编码是一个简单的过程。只需使用 Ctrl + Shift + I 命令或 F12 Discord 页面上的键。

如何在学校 Chromebook 上使用 Inspect Element

如果您的 Chromebook 是由学校发行的，则使用 Inspect Element 功能只需几个简单的步骤：

  1. 在网页上单击鼠标右键或两指点击并选择 检查.
  2. 按 Ctrl + Shift + I.
  3. 尝试使用 view-source:[url] 方法，例如“查看源代码：//www.wikipedia.com“，没有引号。

但是，一些学校和组织阻止了此功能。因此，如果它不适合您，您可能需要与您的组织或学校管理员联系。

如何使用 Inspect 元素查找答案

您可以使用 Inspect Element 查找各种问题的答案，例如：

  1. 在移动设备上预览网站设计。
  2. 找出竞争对手正在使用的关键字。
  3. 速度测试。
  4. 更改网页上的文本。
  5. 查找快速示例以向开发人员展示您的需求。

当您启动 Inspect Element 面板时，您将看到该网站的所有编码。这包括内置于其中的所有 JavaScript、CSS 和 HTML 编码。这就像查看网页的源代码一样，只是您可以对代码进行更改。此外，您还可以实时看到任何更改。

该工具使营销人员、设计师和开发人员能够在最终确定之前查看任何设计更改，这是非常宝贵的。但是，使用 Inspect Element 对编码进行更改不会永远持续下去。当您重新加载页面时，它将返回其默认状态。

其他常见问题

如何使用 Inspect Element 命令查找答案？

使用 Inspect Element 功能查找答案的唯一方法是网站在提交后立即显示它。在这种情况下，答案存在于编码中。

否则，当您使用“检查元素”功能以及您提交的任何答案时，您只是查看测验或测试的编码。

检查元素是否非法？

不，Inspect Element 工具并不违法，它是为 Web 开发人员设计的。查看网站的源代码并不违法，只有当您将收集的信息用于恶意目的（例如尝试利用等）时，才会成为问题。

是否可以禁用浏览器中的检查元素？

最简洁的答案是不。

您无法在浏览器中禁用检查元素。但是您可以设置参数来阻止用户执行某些操作，例如在网页上单击鼠标右键。有许多在线教程可以设置正确的脚本以禁用某些事件。但是，您实际上无法完全禁用“检查元素”功能。

了解网页的内部结构

检查网页的 Inspect Element 功能可能是您从未知道自己需要的开发人员工具 - 即使您自己不是开发人员。它有大量的设计和营销应用程序，可以让您的网站运行更流畅。或许还能让你在竞争对手中占据优势。

你用 Inspect Element 做什么？在下面的评论部分告诉我们。