如何使用浏览器开发者工具调试前端页面?

浏览器开发者工具使用调试
在前端开发中会经常使用浏览器的开发者工具进行对页面调试测试,对于伪类选择器:hover 、:active 、:focus 、:focus-within 、:visited等如何查找调试呢?在以上的问题中,对于如何查找并调试以上选择器的样式,这对前端开发者来说是必备的技能。开发人员如何调试页面(浏览器的开发者工具)?那么在不同的浏览器中又如何如何使用开发者工具呢?请详细阅读下文。
首先有两种方法:
一、快捷键(Ctrl+shift+I)以Google为例
浏览器开发者工具调试
一般笔记本电脑的快捷键是Ctrl+shift+I  可进入Elements进行前端代码调试,台式电脑通过键盘的F12即可进入浏览器开发者工具界面的控制台调试。那么如何找到要调试的部分呢?
进入以上界面后点击最左上角的鼠标指向的箭头标志,选中后箭头标志后呈蓝色状态,这是再选中左边部分的内容,如下我需选中pythorch入门与实践右边就会显示其对应的样式,还可以点击:hov查看伪类选择器的样式。
浏览器开发者工具
关于元素(Elements)
查看元素的代码:点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置
查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。
二、这第二种方法是通过浏览器中的工具查找进入控制台,如下图:
Google浏览器开发者工具
以上是以Google为例,接下来简单介绍Firefox火狐浏览器,火狐浏览器可以通过快捷键 Ctrl+shift+I和快捷键 Ctrl+shift+K 进入 浏览器开发者控制台,可以选择查看器、控制台、调试器、样式编辑器、网格、性能、内存以及无障碍环境(可打开也可关闭)。
火狐浏览器开发者控制台调试工具
火狐浏览器通过右上角的代开菜单图标进行打开控制台,如下图。
火狐浏览器开发者工具

接下来在讲一讲IE浏览器,为何要讲IE浏览器?在国内很多的老用户依然在使用IE浏览器,对于各大浏览器的好坏,不必详说。下图足以说明。
浏览器家族
以下是IE浏览器开发者工具调试介绍
IE浏览器开发人员工具调试web
各大主流浏览器的调试工具都大同小异,没有多大区别,根据以上Google的调试步骤方法即可很好的学会调试,还有很多功能可以自行尝试使用;浏览器的快捷键也可自行设置,有不懂的可在下方评论哦!

点赞
  1. AnWen AnWen说道:
    Google Chrome Google Chrome Windows 10 Windows 10

    战术摇摆 :huaji20: :music:

  2. AnWen AnWen说道:
    Firefox Firefox Windows 10 Windows 10

    :hehe:

  3. AnWen AnWen说道:
    Google Chrome Google Chrome Windows 10 Windows 10

    前端呀

发表评论

电子邮件地址不会被公开。必填项已用 * 标注!昵称可为公司名称哦!SEO优化、网站诊断分析方案请联系微信/QQ:2690502116。