没有网站是完美的。与人类制造的所有产品一样，代码错误也是流程的一部分。这就是为什么彻底测试您构建的任何新网站以确保它尽可能没有错误以便为您的用户提供最佳体验的重要性。
不先尝试 Google Chrome(Chrome)的DevTools工具包，您不应该测试网站。Chrome开发者模式允许您尝试并彻底测试新站点（或现有站点）以查找和修复错误。它还可以让您深入了解其他网站的运行方式，包括查看源代码。
以下是您需要了解的有关Google Chrome浏览器开发人员模式、它具有哪些工具以及如何有效使用它的所有信息。
什么是 Chrome 开发者模式？(What Is Chrome Developer Mode?)
当我们提到Chrome开发者模式时，我们指的并不是您在Chromebook上看到的(Chromebooks)开发者模式(same developer mode)。我们指的是浏览器本身内置的广泛的Chrome开发工具（称为Google DevTools ）。
这些工具旨在测试、分析和故意破坏（如果需要）您在Google Chrome浏览器中加载的网页以进行测试。在基本层面上，您可以使用DevTools查看网站的源代码，让您深入了解网站的构建方式和运行情况。
然而， Google DevTools(Google DevTools)提供的远不止这些。您可以使用Chrome开发者模式在页面加载后更改页面，运行Google Chrome控制台命令来控制和操作页面，以及运行速度和网络测试来监控网络流量。
您还可以在Chrome DevTools(Chrome DevTools)模式下模拟其他设备，包括不同的操作系统和屏幕分辨率。这使您可以查看站点是否具有响应式 Web 设计，以及站点内容和布局将根据设备分辨率或类型而变化的位置。
虽然这些工具面向专业的 Web 开发人员或测试人员，但标准Chrome用户也可以方便地了解DevTools套件的使用方式。如果您发现某个网站存在无法解决的问题，切换到Chrome开发者模式可以帮助您了解问题出在该网站还是您的浏览器。
如何访问 Google Chrome DevTools 菜单(How To Access Google Chrome DevTools Menu)
您可以通过多种方式访问 Google Chrome DevTools菜单，具体取决于您希望使用的工具。
最简单的方法是使用Google Chrome菜单。为此，请单击右上角的三点菜单图标(three-dots menu icon)。从出现的菜单中，单击More Tools > Developer Tools。
这将在您打开的Chrome选项卡或窗口右侧的新菜单中打开DevTools工具包。(DevTools)
您也可以使用键盘快捷键来执行此操作。在Windows或Linux PC上，打开Chrome浏览器并按F12键。您还可以在打开的Chrome选项卡或窗口中按Ctrl + Alt + J或Ctrl + Alt + I
在 macOS 上，按F12或按Option + Command + J或Option + Command + I键来打开Chrome DevTools菜单。这将打开Chrome控制台，并在(Chrome)DevTools菜单顶部提供移动到其他Chrome工具的选项。(Chrome)
如果需要，您可以通过右键单击并单击检查选项在任何打开的网页上查看网站的源代码（在此过程中打开(Inspect )DevTools菜单的(DevTools)元素(Elements)选项卡） 。
使用 Chrome 开发者工具(Using Chrome DevTools)
正如我们简要提到的，您可以使用Chrome DevTools工具包在(Chrome DevTools)Elements选项卡下查看网站的源代码。它可以让您分析已加载页面背后的代码，以及在控制台(Console)选项卡下的Chrome控制台中查看错误消息（指示网站加载方式的问题）。
您还可以在“来源(Sources)”选项卡下查看网站内容的不同来源。例如，如果一个站点正在使用内容交付网络 (CDN)(using a content delivery network (CDN))，则来自站点的媒体将在此处列为不同的来源。
Chrome开发者模式允许您直接下载该内容，或对内容执行更复杂的分析。
如果您想测试站点的运行情况，您可以在“网络(Network)”选项卡下监控和记录您的网络使用情况。这将显示您的浏览器和站点之间发出的网络请求的速度、大小和类型。
例如，当页面第一次加载时，网站会自行加载页面内容，但它也可能会从第三方数据库请求数据。例如，当您登录时，这可能会查询一个在此处显示为网络请求的数据库。
您可以在“性能”(Performance )选项卡下进一步分析这一点，您可以在其中更深入地记录您的Chrome浏览器使用情况，包括在不同点记录屏幕截图。(Chrome)这将记录加载站点以进行进一步分析所需的时间。
谷歌浏览器以对您的 PC 内存使用困难而闻名，因此您可以在(being hard on your PC memory)内存(Memory)选项卡下测试您网站的JavaScript内存使用情况。可以在此处使用不同的 Chrome测试配置文件，有关此测试的更多信息，请(Different Chrome)参见 Chrome DevTools 文档页面(Chrome DevTools documentation page)。
要更深入地分析您的站点内容，以及它可能使用的任何浏览器存储（例如，记录数据），您可以通过“应用程序(Application)”选项卡进行搜索。您可以在Cookie(Cookies)部分下查看站点 cookie 信息，或通过单击清除存储(Clear storage)选项清除正在使用的存储。
如果您担心您的站点安全，您可以在“安全(Security )”选项卡下查看它的性能。这将让您快速了解 Chrome 对页面的安全分析，包括该页面是否具有正确且受信任的SSL证书。
如果您想生成有关网站性能的报告，包括它是否符合典型的用户标准以及网站性能是否会影响搜索引擎优化，您可以单击Lighthouse选项卡。这提供了您可以检查或取消选中报告的设置 - 单击生成报告(Generate report)以创建要查看的报告。
这几乎没有触及Chrome开发者模式可以为开发者带来的潜力的表面。如果您想了解更多信息，Chrome DevTools 文档(Chrome DevTools documentation)应该可以帮助您使用所提供的工具和功能，包括如何使用它构建您自己的用户测试。
高级谷歌浏览器技巧(Advanced Google Chrome Tricks)
大多数 Chrome 用户永远不会知道他们的浏览器中存在Google Chrome DevTools工具包，但对于高级用户来说，它仍然是测试和分析网站的一种非常有用的方法。还可以为 Web 开发人员提供第三方Chrome 扩展程序，(Chrome extensions for web developers)以帮助进一步测试您的网站。
如果您正在构建一个基本网站(building a basic website)，切换到Chrome开发者模式可以帮助您发现网站中无法立即显示的错误。只有在Chrome(Chrome)正常运行时才能执行此操作，因此如果您遇到 Chrome 崩溃(struggling with Chrome crashes)问题，您可能需要先重置或重新安装浏览器。
What Is Chrome Developer Mode & What Are Its Uses?
No website iѕ built perfectly. Like all products made by humans, code errors are part of the process. That’s why it’s imрortant to thoroughly test any new website you build to make sure that it’s aѕ free of errors as possible to give yоur users the best рossiblе experience.
You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code.
Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.
What Is Chrome Developer Mode?
When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.
These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.
Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.
You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.
While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.
How To Access Google Chrome DevTools Menu
There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.
The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.
This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.
You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.
On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.
If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.
Using Chrome DevTools
As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.
You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.
Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.
If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.
For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.
You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.
Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.
For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.
If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.
If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.
This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it.
Advanced Google Chrome Tricks
Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.
If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.
