从某种意义上说，网络开发人员和设计师的工作是说服用户网站是一个单一的实体，而不仅仅是一系列格式化的HTML元素，看起来不错。但是，使用正确的工具，即使是非开发人员也可以在任何网站上剥离窗帘，以查看幕后实际发生的事情。

您可能熟悉经典的“查看页面源”技巧，该技巧显示浏览器窗口中的页面的原始HTML。但是，有一种更好的方法来完成您的侦探工作：inspect element功能使我们可以查看甚至修改任何网站的前端，当building a websiteor了解网站的工作方式。

In this post, I’ll explain what it means to “inspect” page elements, and how to do so on three common web browsers.

Inspect是网络专业人员的秘密武器。开发人员，设计师和营销人员经常使用它在任何网站（包括其自己的）中窥视，以预览内容和样式更改，修复错误或了解如何构建特定网站。例如，如果您在竞争网站上找到一个有趣的界面，请检查元素使您可以看到HTMLandCSS弥补了这一点。

You can also think of your browser’s inspect feature as a “sandbox” of sorts: Play around with a web page as much as you want — change content, colors, fonts, layouts, etc. When finished, just refresh the page to revert everything back to normal. Inspect doesn’t change the website itself — only how it appears in your own browser — so feel free to experiment!

对于那些学习Web开发的人来说，Inspect也是一个非常有价值的工具。与其查看纯源代码，不如使用Inspect Element与页面交互，并查看每行代码映射如何到元素或样式。通过更好地了解典型网页的构成，您可以在错误的情况下与开发人员有效通信，或者是否要进行更改。

检查may be a “developer tool,” but you don’t need to write any code or install any additional software to use it. You can do everything I’ve described right inside your browser — let’s learn how.

How To Inspect Elements

Every modern web browser has a native tool for inspecting elements. Here, I’ll explain how to use the inspect tool on the in three desktop web browsers: Google Chrome, Apple’s Safari, and Mozilla Firefox.

如何检查Chrome中的元素

To use the inspector in Google Chrome, first navigate to any web page (in these examples I’ll be usinghubspot.com）。到达那里后，您有几种打开该工具的方法：

• Right-click any part of the page and choose检查。右键单击特定的页面元素将在检查器视图中打开该元素。
• In the top menu bar, selectView > Developer > Developer Tools。
• 打开Customize and control Google Chromeby clicking the three-dot icon in the top right corner of the browser window. From there, choose更多工具>开发人员工具。
• Use the shortcut控制割线-C在Windows或命令选项-Con macOS.

The Chrome Developer Tools panel will open at the bottom of the browser window. If you want to change the location of the panel, click the three-dots icon in the top right corner of the panel (next to theX图标），然后选择您的首选码头位置。我会选择码头向右— this makes it easier to view the rendered page and its source:

Along the top of the inspect panel, you’ll see tabs for元素，，，，Console，，，，Sources，，，，etc. These are all tools we can use to assess a page’s contents and performance. However, everything we need for inspecting is under the元素tab.

下一个区域的源HTML曲线nt page. Take some time to explore this region, and notice how hovering the cursor over the piece of code highlights the corresponding element on the page. Blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins.

We can also do the opposite — locate a piece of code from the page element. To do this, click theElement selecticon in the top left corner of the panel:

接下来，单击页面元素。您会在检查面板中看到源代码。

Besides viewing, we can use inspect to alter the page contents. Let’s start by swapping out some text. First, find some text content in the source code. Then, right-click the element and choose编辑Text- 这打开了一个内联文本输入，您可以在其中编写任何想要的内容。当您取消选择文本输入时，您会发现更改会生效：

或者，根本没有文字呢？只需在源代码中选择元素并删除它。H1将从页面上消失。

Don’t worry though — it will reappear when you refresh the page. You can also hide any element without deleting it by right-clicking the element in the source code and choosing隐藏元素。

You can even add new page elements — right-click on an element in the source code and choose编辑为HTML。您会看到一个text field where you can paste HTML. For example:

Moving down the Chrome inspect panel, we see theStylestab. This shows us what CSS styling has been applied to the selected element. Click on lines of code to rewrite them, or activate/deactivate certain declarations by checking/unchecking the boxes next to them. Let’s do this for our

element’s字体重量property:

Finally, let’s cover one more feature of Chrome’s inspect feature, mobile view. When building a site, designers need to consider how its pages appear on desktop, mobile, and tablet screens alike. Fortunately, Chrome lets you preview the same web page in multiple screen resolutions. Start by clicking theToggle deviceicon in the top left corner of the panel:

From here, set the screen resolution manually or choose a device preset from the menu, then see how the page layout responds. You can also rotate the screen and even preview performance at “mid-tier mobile” and “low-tier mobile” speeds.

How To Inspect Elements in Safari

To use Safari’s inspect tool, Web Inspector, we first need to enable Safari developer tools. SelectSafari>首选项。In the preferences window underAdvanced，，，，check the box next to在菜单栏中显示开发菜单。您会看到一个开发option added to the menu above.

Next, go to your desired web page. There are three ways to open Web Inspector:

• Right-click any part of the page and choose检查Element。右键单击特定的页面元素将在检查器视图中打开该元素。
• 选择开发>显示网络检查员from the top menu bar.
• Use the shortcut命令选择。

Safari’s inspector opens at the bottom of the window by default. To change this configuration, click the icon to dock the display on the right side or pop out in a separate window — both are located next to theX显示屏左上角的图标。

Safari的检查员面板包括两列。第一个显示源HTML，第二个显示页面CSS。使用您的光标探索源HTML，并查看哪些行代码对应于每个页面区域（蓝色突出显示内容，绿色突出显示填充物和橙色突出显示）：

We can also inspect the page directly. Click theelement selectionicon at the top of the panel:

Now, when you click a page element, Web Inspector reveals the corresponding source code.

像Chrome的检查员,旅行让我们修改,广告d, and remove page elements. To edit the page, right-click an HTML element in the inspect panel, then choose an option from the编辑菜单。Web Inspector will prompt you for new text input, then display your changes in real-time:

Or, add a new element to the page by right-clicking a line of code and choosing an option from the添加菜单。在此示例中，我添加了一个新的

child element to an existing

：

If you want to delete a page element, simply select some code and delete it. Or, right-click and chooseToggle Visibility隐藏元素而不删除它。

在右边，我们有Styles列，我们可以在其中更改或激活/停用任何元素的CSS声明，例如：

When testing content and style changes, you’ll want to see the effect on mobile screens as well as desktops. Safari’s Responsive Design Mode allows you to preview a website across common devices.

To use it, choose开发> Enter Responsive Design Mode。In this mode, you can use the same inspector tools on pages formatted for Apple devices, or set the dimensions yourself:

How To Inspect Elements in Firefox

要打开Firefox检查员，您可以：

• Right-click any part of the page and choose检查Element。右键单击特定的页面元素将在检查器视图中打开该元素。
• 选择工具> Web开发人员>检查员from the top menu bar.
• Use the shortcut控制割线-C在Windows或命令选项-Cin macOS.

Firefox检查员的底部出现the window by default. To change its position, select the three-dots icon in the top right corner of the inspector, then choose an alternative display option.

Firefox’s inspector panel is comparable in features to Chrome’s and Safari’s. The HTML source code indicates the corresponding page element with color codes — content is blue, padding is purple, and margins are yellow:

Plus, you can find code by selecting elements on the page — to enter selection mode, click the cursor icon in the top left corner:

单击任何页面元素以在检查面板中显示其源。

To modify or delete a page element, select its code in the inspector. Then, either double-click to change the text, or right-click and choose编辑为HTMLorCreate New Nodeto add code. Or simply delete the code and see the resulting changes on the page.

To toggle the styling of an element, use theFilter Stylesregion at the bottom of the inspect panel. Uncheck the box next to a CSS declaration to deactivate it (or write in new code yourself):

Finally, Firefox’s tools also come with a mobile preview option. To use it, click theResponsive Design Modeicon in the top right corner of the panel:

响应设计模式使您可以从几个预设屏幕分辨率中进行选择或设置自己的设置，并且还可以切换连接速度和设备像素比：

Get a Closer Look With Inspect

一旦了解了浏览器的“检查工具”的基础知识，您可能会意识到有关您喜欢的网站的多少信息。单击几下，您可以探索如何确切地构建网页，使用什么样式，如何优化搜索引擎，如何在移动屏幕上格式化等等。

For some, inspect is just a fun curiosity. For others, it’s a key asset for learning how other competing sites work. Whoever you are, it’s a great skill to have, and can provide insights beyond viewing the web page itself.

最初发布于12月14日，2020年12月7:00 am，更新于2021年11月2日

话题：

网站开发ment

Don't forget to share this post!