小白玩转浏览器开发者工具—F12(超详细)

目录

1、检查元素:🚀

2、修改样式:🛫

3、调试代码:👑

4、网络分析:🚂

5、控制台输出:🚁

6、移动设备模拟:🎨

7、缓存管理:🛸

8、性能分析:🔨

参考 📚


        浏览器开发者工具(如F12)是我们日常工作中必不可少的一项利器。有着强大的调试功能,可以帮助我们快速定位并解决问题。下面以Edge浏览器中的“百度”页面为例,从多个方面介绍浏览器—F12开发者工具的常用的使用方法。

1、检查元素:🚀

        在Elements选项卡下可以查看和编辑网页的HTML结构和CSS样式。通过鼠标悬停或选择特定元素,你可以实时看到其在页面中的位置。

2、修改样式:🛫

        在Elements选项卡中,你可以直接编辑和调试元素的CSS样式。你可以添加、修改或禁用特定的样式规则,以实时预览页面的变化。

 可以看到修改后,密码直接变成明文的了。

 DOM Examples (microsoftedge.github.io)

同理,css ,JS 都可以进行修改。 

3、调试代码:👑

        在Sources选项卡下,你可以查看和调试网页中的t代码。你可以设置断点,逐行执行代码,并查看变量的值和函数的调用堆栈,以帮助你找出问题所在。

4、网络分析:🚂

        在Network选项卡中,你可以监视浏览器与服务器之间的网络请求和响应。你可以查看请求的详细信息、响应的状态码和内容,并分析网络性能。

         这部分其实内容很多,涉及到HTTP协议的相关知识,具体的可以参考以下文章:

关于开发中对端口(port)的几点理解

Accept - HTTP | MDN (mozilla.org)

或者看 edge 官网对这部分的讲解:(文末有官网链接)

 

5、控制台输出:🚁

        在Console选项卡中,你可以查看和调试JavaScript代码的输出和错误信息。你可以输出日志、警告和错误消息,或者执行特定的命令来与页面进行交互。

例如,我们可以输入以下代码,来查看当前页面是否有id为"aging-total-page"的元素:

 还可以对JavaScript代码的输出信息:

6、移动设备模拟:🎨

        在开发者工具的顶部工具栏中,有一个切换设备模式的按钮,可以模拟不同的移动设备和屏幕尺寸,以便测试响应式设计和移动优化。

7、缓存管理:🛸

        在Application选项卡下,你可以查看和管理浏览器的缓存内容。你可以清除缓存、禁用缓存或手动添加缓存条目,以测试网页的离线访问能力。

8、性能分析:🔨

        在Performance选项卡中,你可以进行性能分析,识别潜在的性能瓶颈和优化机会。它提供了一些有用的工具和视图,如时间轴、内存分配和CPU占用等。

        当然,这些只是F12开发者工具的一部分功能,它们可以帮助你更好地理解和调试网页,并提升开发效率。不同的浏览器可能会有一些差异,但基本原理是相似的。你可以根据需要多加探索和实践,逐渐熟悉和运用这些技巧和方法。

参考 📚

Edge 官方文档PDF : learn.microsoft.com/pdf

Edge 官方文档网址:Microsoft Edge Development | Microsoft Learn

  • 21
    点赞
  • 114
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器开发者工具是一组内置于现代Web浏览器中的工具,用于帮助开发者调试、分析和优化Web应用程序。它们提供了许多有用的功能,可以帮助开发者更好地理解和优化他们的代码。下面是一些常见的浏览器开发者工具及其功能的详解: 1. 元素面板(Elements Panel):元素面板可以显示和编辑网页的HTML结构和CSS样式。开发人员可以查看和修改DOM元素、样式规则和属性,并实时查看更改后的效果。 2. 控制台(Console):控制台是开发者浏览器交互的地方。它可以显示网页上的JavaScript错误、警告和调试信息,并允许开发者执行JavaScript代码。 3. 网络面板(Network Panel):网络面板可以监视浏览器与服务器之间的网络请求。它提供了请求和响应的详细信息,包括请求头、响应头、请求时间和传输大小等。开发者可以使用该工具来分析和优化网络性能。 4. 性能面板(Performance Panel):性能面板可以帮助开发者分析和优化网页的性能。它提供了关于加载时间、资源使用、JavaScript执行时间等方面的详细信息,并提供了一些性能优化建议。 5. 应用程序面板(Application Panel):应用程序面板提供了关于网页的应用程序缓存、存储、索引数据库和Cookie等方面的信息。开发者可以在此处查看和编辑这些数据。 6. 安全面板(Security Panel):安全面板可以提供与网页安全相关的信息,包括证书、加密连接和混合内容等。开发者可以使用该工具来识别和修复潜在的安全风险。 除了上述功能外,浏览器开发者工具还提供了许多其他功能,例如调试JavaScript代码、模拟设备和网络条件、分析网页布局和性能等。这些工具可帮助开发者更高效地开发和调试Web应用程序,并提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值