浏览器中隐藏着一个强大的工具：Inspect Element。右键单击任何网页，单击Inspect，您将看到该网站的内部结构：它的源代码、构成其设计的图像和CSS、它使用的字体和图标、驱动动画的Javascript代码等等。你可以看到网站加载所需的时间，下载所用的带宽，以及文本中的确切颜色。或者，你可以用它来改变任何你想要的页面。Inspect Element是一个完美的方法，可以让你了解是什么让网站运转正常，找出你的网站上出现了什么问题，模拟出一个颜色和字体的变化会是什么样子，并且让你不必用Photoshop在屏幕截图中显示私人细节。这是一种你从来不知道你的浏览器拥有的超能力。让我们学习如何使用googlechrome Inspect元素来帮助您的工作，无论您是开发人员还是从未编写过一行代码的营销人员。如果你在手机上读这篇文章，是时候切换到你的笔记本电脑上，打开谷歌浏览器，准备修改一些代码。包括Mozilla Firefox和苹果Safari在内的大多数web浏览器都包含Inspect Element工具，而微软的Internet Explorer和Edge浏览器则包含类似的开发工具集。本教程主要介绍googlechrome的Inspect Element工具，但大多数功能在其他浏览器中的工作原理相同。等等，我为什么要使用Inspect元素？googlechrome Inspect元素允许您查看网站的源代码，并根据需要调整任何内容如果您从未出于好奇偷看过网站的代码，您可能会想知道为什么要学习如何使用Inspect元素。设计师：想预览一下移动网站的设计效果吗？或者想看看注册按钮上不同颜色的绿色会是什么样子？使用Inspect元素可以在几秒钟内完成这两项任务。营销人员：想知道竞争对手在他们的网站标题中使用了什么关键词，或者想看看你的网站在谷歌的页面速度测试中加载速度是否太慢？检查元素可以同时显示两者。编者：厌倦了在截图中脱口而出你的名字和电子邮件吗？使用Inspect元素，您可以在一秒钟内更改网页上的任何文本。支持代理：需要一个更好的方法来告诉开发人员需要在一个站点上修复什么？Inspect元素允许您快速地进行示例更改，以显示您正在谈论的内容。对于这些和其他许多用例，Inspect元素是一个方便的工具。它是浏览器中开发人员工具的一部分，它包括许多额外的功能：运行代码的控制台、查看站点背后的原始代码的源代码页、包含网站中加载的每个文件列表的源代码页等等。你可以自己探索所有这些，但现在，让我们看看如何使用主元素选项卡来调整我们自己的网页。如何开始检查元素有几种方法可以访问googlechrome Inspect元素。只需打开一个你想尝试编辑的网站（要跟随本教程，请打开Zapier.com网站)，然后用以下三种方法之一打开"检查元素"工具：右键点击网页上的任何地方，在弹出菜单的最底部，你会看到"检查"。点击它。单击googlechrome工具栏最右边的汉堡包菜单（有3个堆叠的点的图标），单击More Tools，然后选择Developer Tools。或者，在"文件"菜单中，单击"查看"->"开发人员"->"开发人员工具"。喜欢键盘快捷键吗？在Mac上按CMD+Option+I，或者在PC上按F12键打开"检查元素"，而不单击任何内容。默认情况下，开发人员工具在浏览器最底部的一个窗格中打开，并将显示Elements选项卡，这是我们一直在寻找的著名的Inspect Element工具。屏幕底部的Inspect Element没有太多的空间可以使用，所以单击Inspect Element窗格右上角靠近"X"的三个垂直点（单击它关闭窗格）。现在，您将看到一个选项，可以将窗格移到浏览器的右侧（右停靠视图），也可以在完全独立的窗口中打开窗格（取消停靠视图）。在本教程中，让我们将窗格停靠在浏览器窗口的右侧，以便为我们提供更多的工作空间。您可以将鼠标悬停在左侧边框上，使"开发人员工具"面板变宽或变窄。一旦↔ 光标出现时，向左拖动窗格可将其加宽或向右缩小。现在我们进入了Inspect元素，在我们的指尖有一系列有用的工具，我们可以使用这些工具使任何站点看起来像我们想要的那样。在本教程中，我们将重点介绍元素、仿真和搜索选项卡。搜索"搜索"选项卡允许您在网页中搜索特定内容或HTML元素。它有点隐藏：你需要点击3个点，然后点击搜索所有文件来发现它。然后你就可以在网页中的每个文件中搜索你想要的任何东西。元素"Inspect Element"是我们将在本教程中探索最多的工具，它是在大多数浏览器中启动开发人员工具时首先打开的工具。或者，单击开发人员工具中的"元素"选项卡返回到它，如果您已经在其他地方进行了探索。在Explore选项卡中，您可以看到构建网站的所有HTML、JavaScript和CSS。这几乎与查看网站的源代码相同，有一个关键的区别：您可以更改任何代码，并在您打开的站点上实时查看更改。您可以更改从副本到字体的任何内容，然后截屏新设计或保存更改（只需转到"查看">"开发人员">"查看源代码"并将页面另存为HTML文件，或将代码更改复制到文本编辑器中）。但是，一旦重新加载页面，所有更改都将永久消失。仿真有没有想过在手机上预览网页而不把手机从口袋里掏出来？"仿真"选项卡让您可以像在任何设备上一样查看网页，其中包括常用设备的预设或设置屏幕分辨率和纵横比的选项。你甚至可以设置一个模拟的网速，看看一个网站在拨号上网时的加载速度。它也有点隐藏：您需要打开Inspect元素并单击phone图标按钮来启动它。然后，你就有了一个完美的工具来理解别人是如何体验一个网页的。该上班了。我们将首先使用搜索来查找网页上的内容，然后使用元素编辑网站上的文本和更多内容，最后将使用仿真来查看我们的网站在手机上从特定位置的外观。使用Inspect Element Search在站点上查找任何内容想知道你最喜欢的网站是什么？搜索是最好的工具，除了阅读网站的全部源代码。您只需打开默认元素视图，按CTRL+F或CMD+F并搜索源代码，但完整的搜索工具将允许您搜索页面上的每个文件，帮助您查找CSS和JavaScript文件中的文本或找到文章所需的图标图像。要开始，请打开Zapier.com网站在Chrome中，如果你还没有，打开Inspect元素，点击开发者工具面板右上角的3个垂直点（靠近关闭的"X"），然后选择"搜索所有文件"。搜索选项卡将出现在开发者工具窗格的下半部分。记得怎么打开元件？只需右键单击并单击Inspect Inspect Element，或按Mac上的Command+Option+i或PC上的F12。在"搜索"字段中，您可以键入要在此网页上查找的任何内容，它将显示在此窗格中。让我们看看如何使用这个。在搜索字段中输入meta name，按Enter键，您将立即在该页的代码中看到每次出现"meta name"。现在，你可以看到这个页面的元数据，搜索引擎优化关键字的目标，以及它是否被配置为允许谷歌索引搜索。这是一个很简单的方法来查看你的竞争对手的目标，并确保你没有在你的网站上搞砸任何事情。让我们尝试另一个查询。删除meta-name，在搜索字段中键入h2，然后按"enter"。您将在顶部看到Zapier的JavaScript文件中出现的每一个"h2"，但是一旦您滚动到底部，就可以看到该页面上的每个"h2"标题。搜索对于设计师来说也是一个有效的工具，因为你也可以通过颜色进行搜索。在搜索字段中输入#ff4a00，然后按"回车"（确保选中"忽略大小写"旁边的框以查看所有结果）。现在您应该可以在这个站点的CSS和HTML文件中看到每一次的颜色#ff4a00，Zapier的橙色阴影。然后，只需单击"color:#ff4a00；"的行，跳转到站点的HTML中的那一行，然后自己调整它（我们将在下一节中讨论）。对于设计师来说，这是确保网站遵循其品牌风格指南的便捷方法。有了"搜索"工具，设计师可以很容易地检查网页的CSS，看看是否对错误的元素应用了颜色，网页上是否使用了不正确的字体系列，或者您是否还在站点的某个地方使用旧颜色。"搜索"工具也是与开发人员更好地沟通的最佳方式，因为您可以向他们显示您在哪里发现了错误，或者确切地说是什么需要更改。只要告诉他们问题所在的行号，你就能更快地得到解决。或者，你可以自己用Chrome开发工具的核心部分元素来改变网页。用元素更改任何内容前端开发人员每天都使用Inspect Element工具来修改web页面的外观并尝试新的想法，您也可以这样做。通过向网站的CSS和HTML文件添加临时编辑，Inspect元素允许您调整网页的外观和内容。一旦您关闭或重新加载页面，您的更改将消失；您只能在您的计算机上看到更改，而不是实际编辑真正的网站本身。这样，您就可以自由地尝试和更改任何内容，然后复制并保存最好的更改，以便以后再次使用。让我们看看我们能用它做些什么。单击开发人员工具窗格中的"元素"选项卡，如果需要更多的空间，请点击"Esc"键关闭您的搜索框