分類
數字趨勢

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

Chrome DevTools是开发人员必不可少的资产。虽然其他浏览器提供了非常方便的故障排除工具,但是Chrome DevTools凭借其多功能的界面和广泛的使用而值得您关注。

由于其强大的调试工具套件,Chrome是最受开发人员欢迎的浏览器。使用Chrome DevTools很容易,但是您需要了解如何充分利用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左上角的Responsive下拉菜单,然后选择您喜欢的移动设备。然后,该网页将呈现并进行调整以适合您选择的移动设备的大小。

访问网页的源文件

您可以通过Chrome DevTools访问组成网页的文件。要访问这些文件,请单击DevTools菜单上部的Sources选项。这将公开网站的文件系统,并提供编辑功能。

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

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

对网页执行实时编辑

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

要编辑非内联的CSS属性,请选择Sources 。接下来,选择要编辑的CSS文件。将光标置于代码控制台内的所选行上以执行实时编辑。这样做可以为您提供即时反馈,帮助您对应用于网页的任何样式进行更改。

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

使用DevTools控制台调试JavaScript代码

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

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

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

监视从数据库加载资源

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

尽管这并非总是调试后端问题的最佳方法,但它仍可以告诉您哪些资源在运行那些元素的数据库查询后正在返回404错误。

相关:常见的网站错误及其含义

切换Chrome开发者工具的方向

要更改Chrome开发者工具的位置,请在DevTools中单击三个菜单点(不是浏览器中的主要菜单点)。然后从Dock侧选项中选择您的首选位置。

安装Chrome DevTools扩展程序

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

您可以在Chrome的“精选DevTools扩展程序”库中访问Chrome DevTools可用扩展程序的列表。

检查网站上的安全问题

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

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

审核您的网站

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

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

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

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

利用Chrome DevTools

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

您可能还会发现本文中未讨论的其他选项。因此,随时可以使用可用功能。此外,调整这些功能不会对网站造成任何损害。