Google Chrome不仅适用于普通互联网用户，还适用于经常创建网站、设计博客等的 Web 开发人员。Google Chrome的^{(Google Chrome)}Inspect Element或Inspect选项可帮助用户查找有关隐藏在视图中的网站的一些信息. 以下是有关使用Windows PC版^{(Windows PC)}Google Chrome浏览器的Inspect Element的一些提示。

检查 Google Chrome 的元素

1] Find hidden JavaScript/Media files

如果访问者在网页上停留超过 15 或 20 秒，许多网站都会显示弹出窗口。或者，很多时候图像、广告或图标会在随机点击某处后打开。要在网页上查找这些隐藏文件，您可以使用Inspect Element的^{(Inspect Element)}Sources选项卡。它在左侧显示了一个可以浏览的树视图列表。

2] Get HEX/RGB color code in Chrome

有时我们可能喜欢一种颜色，并可能想找出它的颜色代码。使用Google Chrome^{(Google Chrome)}中的本机选项，您可以轻松找到特定网页上使用的HEX或RGB颜色代码。右键单击^{(Right-click)}颜色，然后单击Inspect。大多数情况下，您会在右侧与其他CSS一起获得颜色代码。如果您没有看到它，那么您可能必须使用一些免费的颜色选择器软件。

提示^(TIP)：也请查看这些颜色选择器在线工具^{(Color Picker online tools)}。

3]获取网页性能提升提示^{(3] Get web page performance improvement tips)}

每个人都喜欢登陆一个快速打开的网站。如果您正在设计您的网站，则应始终牢记这一点。有许多工具可以检查和优化页面加载速度。然而，谷歌浏览器^{(Google Chrome)}还带有一个内置工具，允许用户获得提高网站加载速度的提示。要访问这些工具，请转到Audits选项卡，并确保选择Network Utilization、Web Page Performance和Reload Page 和 Audit on Load^{(Reload Page and Audit on Load)}。然后点击运行^{(Run )}按钮。它将重新加载页面，并向您显示一些可用于使页面更快的信息。例如，您可以获得所有没有任何缓存过期的资源，JavaScript可以合并到一个文件中，依此类推。

4]检查响应性^{(4] Check responsiveness)}

如今，使网页具有响应性至关重要。有很多工具可以检查您的网站是否完全响应。然而，谷歌浏览器^{(Google Chrome)}的这个工具可以帮助用户了解网站是否响应，以及检查它在特定移动设备上的外观。打开任何网站，获取Inspect Element选项卡，单击移动^{(mobile )}按钮，设置分辨率，或选择所需的设备来测试网页。

5]编辑实时网站^{(5] Edit live website)}

假设您正在创建一个网页，但您对配色方案或导航菜单大小或内容或侧边栏比例感到困惑。您可以使用Google Chrome的^{(Google Chrome)}Inspect Element选项编辑您的实时网站。尽管您无法在实时网站上保存更改，但您可以进行所有编辑，以便进一步使用它。为此，请打开Inspect Element，从左侧选择HTML属性并在右侧进行样式更改。如果您对CSS进行任何更改，您可以单击文件链接，复制整个代码并将其粘贴到原始文件中。

^{(Inspect Element)}Google Chrome的^{(Google Chrome)}Inspect Element是每个 Web 开发人员的真正伴侣。无论您是开发单页网站还是动态网站，都可以使用这些技巧。

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not јust for regular internet users but also for web developers, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome现在是没有响应的，Relaunch吗？

• 如何解决在Google Chrome browser File Download错误

• 如何更改Google Chrome的Default Print Settings

• 如何在Google Chrome Browser Close上Destroy Profile

• Anna Assistant是Google Chrome的完美voice assistant

• 如何在Google Chrome启用或Disable可滚动Tabstrip

• 如何在Google Chrome Web浏览器中Create and Delete Profiles

• Google Chrome中的Fix ERR_QUIC_PROTOCOL_ERROR

• 该Great Suspender会自动暂停对Google Chrome标签

• 如何防止用户在Google Chrome中安装扩展

• 在Windows 10禁用Google Chrome中的禁用Profile Manager

• 如何在Google Chrome启用或禁用Tab Search icon

• Video Speed Controller为Mozilla Firefox and Google Chrome

• Fix Blurry File Open dialog Google Chrome and Microsoft Edge盒

• Google Chrome扩展不在Windows 10上工作

• 如何使用Google Chrome检查您的Internet Connection Speed

• 使用Volume Master单独调整Google Chrome tabs中的音量

• Google Chrome正在等待缓存 - 我该怎么办！？

• Google Chrome将推送通知订阅限制为90天

• Google Chrome中的Fix Downloading Proxy Script error