什么是Chrome开发人员模式及其用途？

没有完美的网站建设。像人类生产的所有产品一样，代码错误也是过程的一部分。因此，对您构建的任何新网站进行全面测试以确保其没有任何错误，以便为您的用户带来最佳体验，这一点很重要。

您不应该先尝试使用Google Chrome浏览器的DevTools工具包来测试网站。 Chrome开发人员模式可让您试用并彻底测试新网站（或现有网站）以查找并修复错误。它还可以让您深入了解其他网站的运行方式，包括查看源代码。

这是您需要了解的有关Google Chrome浏览器开发人员模式，具有哪些工具以及如何有效使用它的所有信息。

什么是Chrome开发人员模式？

当我们指的是Chrome开发人员模式时，我们并不是在谈论您在Chromebook上看到的相同的开发人员模式。我们指的是浏览器本身内置的广泛的Chrome开发工具（称为Google DevTools）。

这些工具旨在测试，分析和有针对性的设计中断（如果需要）出于测试目的已加载到Google Chrome浏览器中的网页。在基本级别上，您可以使用DevTools来查看网站的源代码，让您窥视一下网站的建设方式和运行情况。

Google但是，DevTools提供了更多功能。加载页面后，您可以使用Chrome开发人员模式来更改页面，运行Google Chrome控制台命令来控制和操纵该页面，以及运行速度和网络测试以监视Web流量。

In_content_1全部：[300x250] / dfp：[640x360]->

您还可以在Chrome DevTools模式下模拟其他设备，包括不同的操作系统和屏幕分辨率。这样一来，您就可以查看网站是否具有响应能力强的Web设计，以及网站内容和布局将根据设备分辨率或类型而变化的地方。

尽管这些工具面向专业的Web开发人员或测试人员，但也非常方便让标准的Chrome用户了解如何使用DevTools套件。如果您发现无法解决的网站问题，则切换到Chrome开发者模式可以帮助您查看问题出在该网站还是您的浏览器。

有几种方法可以访问Google Chrome DevTools菜单，具体取决于您希望使用的工具。

最简单的方法来自Google Chrome浏览器菜单。为此，请点击右上方的三点菜单图标。在显示的菜单中，点击更多工具>开发者工具。

这将在打开的Chrome标签或窗口右侧的新菜单中打开DevTools套件。

您也可以使用键盘快捷键来执行此操作。在Windows或Linux PC上，打开Chrome浏览器，然后按F12键。您还可以在打开的Chrome标签或窗口中按Ctrl + Alt + J或Ctrl + Alt + I键。

在macOS上，按F12或按Option + Command + J或Option + Command + I键打开Chrome DevTools菜单。这将打开Chrome控制台，并在DevTools菜单顶部提供选项，可移至其他Chrome工具。

如果需要，您可以查看网站的源代码（打开Elements右键单击，然后单击检查选项。

我们已经简要介绍过，您可以使用Chrome DevTools工具包在元素标签下查看网站的源代码。它可以让您分析已加载页面背后的代码，以及在控制台标签下的Chrome控制台中查看错误消息（表明网站加载方式存在问题）。

图>

您还可以在来源标签下查看来自网站的内容的不同来源。例如，如果某个站点是使用内容交付网络（CDN），则该站点中的媒体将在此处列为其他来源。

Chrome开发者模式可让您直接下载该内容或执行更多操作内容的复杂分析。

如果要测试网站的运行情况，可以在Network标签下监控和记录网络使用情况。这将显示浏览器和站点之间发出的网络请求的速度，大小和类型。

例如，当页面首次加载时，站点将自身加载页面内容，但也可能向第三方数据库请求数据。例如，当您登录时，这可能会查询将在此处显示为网络请求的数据库。

您可以在Performance（性能）标签下进一步进行分析，您可以在其中更深入地记录Chrome浏览器的使用情况，包括在不同位置记录屏幕截图。这将记录加载您的网站进行进一步分析所需的时间。

Google Chrome浏览器具有很难占用您的PC内存的声誉，因此您可以在内存标签下测试网站的JavaScript内存使用情况。此处可以使用不同的Chrome测试配置文件，有关此测试的更多信息，请参见Chrome DevTools文档页面。

还可以对您的网站内容进行更深入的分析就像它可能正在使用的任何浏览器存储（例如记录数据）一样，您可以在Application标签中进行搜索。您可以在Cookies部分下查看此处的网站cookie信息，或通过单击清除存储空间选项清除正在使用的存储空间。

如果您担心网站的安全性，可以在安全性标签下检查其性能。这将使您快速概览页面的Chrome安全性分析，包括页面是否具有正确且受信任的SSL证书。

如果要在您网站的报告中生成报告性能，包括它是否符合典型的用户标准以及网站性能是否会影响搜索引擎的优化，您可以点击灯塔标签。这提供了您可以检查或取消检查报告的设置-单击生成报告以创建要查看的报告。

这几乎看不到Chrome的潜力开发人员模式可以带给开发人员。如果您想了解更多，Chrome DevTools文档应该可以帮助您使用所提供的工具和功能，包括如何使用它来构建自己的用户测试。

高级Google Chrome浏览器技巧

大多数Chrome用户永远不会知道他们的浏览器中存在Google Chrome DevTools套件，但对于高级用户而言，它会仍然是测试和分析网站的非常有用的方法。还有第三方适用于网络开发人员的Chrome扩展程序可用来进一步测试您的网站。

如果您是建立一个基本的网站，则切换到Chrome开发者模式可以为您提供帮助发现您的网站中不会立即看到的错误。只有在Chrome可以正常工作的情况下，您才能执行此操作，因此，如果您的努力应对Chrome浏览器崩溃，则可能需要先重置或重新安装浏览器。