如何使用Chrome DevTools解决网站问题
1320字
2020-10-18 09:23
10阅读
火星译客

Chrome开发工具是开发者的必备资产。虽然其他浏览器提供了相当方便的故障排除工具,Chrome DevTools值得你的关注,因为它的多功能界面和流行程度。

由于其强大的调试工具套件,Chrome是最受开发者欢迎的浏览器。使用Chrome DevTools很简单,但是你需要了解它是如何工作的,才能最大限度地利用它。

Chrome开发工具是如何工作的

Chrome DevTools可以让你通过错误控制台和其他调试和监控工具解决网站上的问题。使用DevTools可以暴露前端的漏洞,让你监控你的网站在移动和平板设备上的表现。

有了DevTools,你可以对网站的代码进行实时编辑,比如JavaScript、HTML和CSS,并得到你的修改的即时结果。

你通过开发工具所做的改变不会永久影响网站。它们只是临时显示预期的结果,就好像您已经将它们应用到实际的源代码中一样。这可以让你找到方法,让你的网站加载更快,更容易解决漏洞。

如何访问Chrome开发工具

你可以通过几种方式访问Chrome DevTools。在Mac操作系统中,按Cmd + Opt + i打开开发工具,如果你使用的是Windows操作系统,在键盘上按Ctrl + Shift + Ikeys。

另外,你也可以通过点击屏幕右上角的三个点来访问Chrome开发者工具。转向更多工具并选择开发人员工具。另一个选项是右键单击web页面并单击Inspect选项。

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

Chrome开发工具提供了几种方法来调整和排除网页故障。让我们看看DevTools可以帮助你的一些方式。

看看你的网站在智能手机上的样子

一旦你把你的Chrome浏览器切换到开发者模式,它会呈现你一半大小的网页。然而,这并不能让你真正了解它在智能手机或平板电脑上的样子。

幸运的是,除了设置网页的屏幕大小,Chrome DevTools还允许你在不同的移动屏幕类型和版本之间切换。

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

访问网页的源文件

你可以通过Chrome DevTools访问组成网页的文件。要访问这些文件,单击DevTools菜单上方的source选项。这就公开了网站的文件系统,并提供了编辑功能。

你也可以搜索源文件,当你处理一个有很多资源的网页时,这很有帮助。要通过DevTools搜索源文件,单击控制台上方的search选项。

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

对网页进行实时编辑

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

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

请注意,当您通过DevTools编辑一个页面时,在浏览器上重新加载该页面会将其还原为原来的表单,并且该编辑仅对您可见。通过DevTools进行编辑不会影响其他用户对该网站的顺畅运行和使用。

使用DevTools控制台调试JavaScript代码

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

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

默认情况下,控制台会报告网站上的任何JavaScript问题。你可以在DevTools的下方找到控制台,或者通过点击Chrome DevTools窗口顶部的控制台选项来访问它。

监控从数据库加载的资源

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

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

切换Chrome开发者工具的方向

要改变Chrome开发者工具的位置,点击DevTools中的三个菜单点(不是浏览器上的主菜单)。然后从码头边选择你喜欢的位置。

安装Chrome DevTools扩展

你也可以安装与Chrome DevTools一起工作的特定于语言或框架的扩展。安装这些扩展可以让你更有效地调试你的网页。

你可以在Chrome特色的DevTools扩展库中访问可用的Chrome DevTools扩展列表。

检查网站上的安全问题

Chrome DevTools可以让你根据网络安全证书的可用性和连接的安全性等参数来评估你的网站的安全性。要检查你的网站是否安全,点击DevTools顶部的Security选项。

安全选项卡提供了网站安全细节的概述,并告诉你任何潜在的威胁。

审核你的网站

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

要访问这个特性,在DevTools窗口的顶部选择Lighthouse选项。接下来,选择你想要检查的参数,然后勾选移动或桌面选项,看看你的网页在不同平台上的表现如何。

接下来,单击Generate report运行基于你之前选择的参数的网页分析。

你还可以通过单击performance选项来评估网站的运行时或加载性能。要运行测试,单击单击record按钮选项旁边的图标来执行运行时分析。或者,单击它下面的reload按钮来评估加载时性能。单击Stop,停止分析器并显示结果。

充分利用Chrome开发工具

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

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

0 条评论
评论不能为空