如何使用 Chrome DevTools 解决网站问题?

Chrome DevTools 是开发人员必不可少的资产。虽然其他浏览器提供了非常方便的故障排除工具，但 Chrome DevTools 因其多功能界面和受欢迎程度而值得您关注。

由于其强大的调试工具套件，Chrome 是开发人员最受欢迎的浏览器。使用 Chrome DevTools 很简单，但您需要了解它的工作原理才能充分利用它。

Chrome 开发者工具的工作原理

Chrome DevTools 可让您通过其错误控制台和其他调试和监控工具解决网站上的问题。使用 DevTools 会暴露前端漏洞，并让您监控您的网站在移动设备和平板设备上的显示方式。

使用 DevTools，您可以对网站的代码（如 JavaScript、HTML 和 CSS）进行实时编辑，并获得更改的即时结果。

您通过 DevTools 所做的更改不会永久影响网站。它们只是暂时显示预期结果，就好像您已将它们应用于实际源代码一样。这使您可以找到使网站加载速度更快的方法，并更容易消除错误。

如何访问 Chrome DevTools

您可以通过多种方式访问Chrome DevTools。要在 Mac OS 上使用快捷方式打开开发者工具，请按Cmd + Opt + I。如果您使用的是 Windows 操作系统，请按键盘上的Ctrl + Shift + I键。

或者，您可以通过单击屏幕右上角的三个点来访问 Chrome 开发人员工具。前往更多工具并选择开发者工具。另一种选择是右键单击网页并单击“检查”选项。

使用 Chrome 开发者工具进行网站诊断

Chrome DevTools 提供了多种方法来调整和排除网页故障。让我们看一下 DevTools 可以帮助您的一些方式。

查看您的网站在智能手机上的外观

将 Chrome 浏览器切换到开发者模式后，它会呈现您网页的一半大小。但是，这不会让您真正了解它在智能手机或平板电脑上的样子。

值得庆幸的是，除了设置网页的屏幕大小外，Chrome DevTools 还允许您在不同的移动屏幕类型和版本之间切换。

要访问该选项，请打开检查模式。接下来，单击DevTools 左上角的响应式下拉菜单，然后选择您喜欢的移动设备。然后网页会呈现并调整以适合您选择的移动设备的大小。

访问网页的源文件

您可以通过 Chrome DevTools 访问构成网页的文件。要访问这些文件，请单击DevTools 菜单上部的Sources选项。这会暴露网站的文件系统，并为您提供编辑功能。

您还可以搜索源文件，这在您处理具有许多资源的网页时会很有帮助。要通过 DevTools 搜索源文件，请单击控制台上方的Search选项。

但是，如果您找不到“搜索”选项，更好的选择是使用键盘快捷键。在 Mac OS 上，按Cmd + Opt + F键搜索源文件。如果您使用的是 Windows 操作系统，请按Ctrl + Shift + F键访问源文件搜索栏。

对网页执行实时编辑

使用 DevTools 的主要目的之一是对网页上的元素进行即时虚假编辑。切换到开发人员工具后，您可以通过单击“元素”选项来编辑网站的 HTML 内容。然后，右键单击要在代码编辑器中应用更改的任何点，然后选择Edit as HTML。

要编辑非内联 CSS 属性，请选择Sources。接下来，选择要编辑的 CSS 文件。将光标放在代码控制台中您选择的行上以执行实时编辑。这样做可以让您即时反馈应用到网页的任何样式更改。

请注意，当您通过 DevTools 编辑页面时，在浏览器上重新加载页面会将其恢复为原始形式，并且编辑只对您可见。通过 DevTools 进行编辑既不会影响该网站的流畅运行，也不会影响其他用户对该网站的使用。

使用 DevTools 控制台调试 JavaScript 代码

调试 JavaScript 的最佳方法之一是使用 Chrome 的开发人员工具。它为您提供无效脚本的直接报告以及错误的确切位置。

在使用 JavaScript 设计网站时，始终保持 DevTools 处于打开状态是一种很好的做法。例如，如果程序成功运行，则在一组指令上运行 JavaScript 的console.log()命令会在 DevTools 控制台中显示该日志的结果。

默认情况下，控制台会报告您网站上的所有 JavaScript 问题。您可以在 DevTools 的下部找到控制台，或者通过单击Chrome DevTools 窗口顶部的控制台选项来访问它。

监控数据库中的资源加载

除了调试 JavaScript，控制台还可以为您提供未从网站数据库正确加载的资源的详细信息。

虽然这并不总是调试后端问题的最佳方式，但它仍然会告诉您在对这些元素运行数据库查询后哪些资源返回了404错误。

切换 Chrome 开发者工具的方向

要更改 Chrome 开发人员工具的位置，请单击 DevTools 中的三个菜单点（不是浏览器上的主要菜单点）。然后从Dock 侧选项中选择您喜欢的位置。

安装 Chrome DevTools 扩展

您还可以安装与 Chrome DevTools 一起使用的语言或框架特定的扩展。安装这些扩展可以让您更有效地调试您的网页。

您可以在 Chrome 的Featured DevTools Extensions库中访问 Chrome DevTools 的可用扩展列表。

检查网站上的安全问题

Chrome DevTools 可让您根据网络安全证书的可用性和连接的安全性等参数评估您网站的安全性。要检查您的网站是否安全，请单击DevTools 顶部的安全选项。

安全选项卡为您提供网站安全详细信息的概览，并告诉您任何潜在威胁。

审核您的网站

Chrome DevTools 具有一项功能，可让您根据特定参数检查网站的整体性能。

要访问该功能，请选择DevTools 窗口顶部的Lighthouse选项。接下来，选择您要检查的参数，然后勾选移动或桌面选项以查看您的网页在不同平台上的表现。

接下来，单击生成报告以根据您之前选择的参数对您的网页进行分析。

您还可以通过单击“性能”选项来评估网站的运行时或加载性能。要运行测试，请单击单击记录按钮选项旁边的图标以执行运行时分析。或者，单击其下方的重新加载按钮以评估加载时性能。单击停止以停止分析仪并显示结果。

充分利用 Chrome DevTools

根据您的需要，Chrome DevTools 让您可以做的不仅仅是简单的网站调试。值得庆幸的是，所有技能水平的程序员都可以轻松使用 DevTools。您甚至可以通过查找您访问的网站的源代码来学习一些网站前端开发的基础知识。

您可能还会发现本文未讨论的其他一些选项。因此，请随意使用可用的功能。此外，调整这些功能不会对网站造成一点损害。

以上就是关于如何使用 Chrome DevTools 解决网站问题?的全部内容了，希望能够帮助到需要的朋友。更多精彩内容，请期待chrome官网站下一期分享！

上一篇: 如何制Chrome扩展-浏览器插件开发教程 下一篇: 如何使用 Eversign 的 Chrome 扩展进行签名?