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

2024-03-23 10:10

本文主要是介绍小白玩转浏览器开发者工具—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

这篇关于小白玩转浏览器开发者工具—F12(超详细)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837983

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

MySql match against工具详细用法

《MySqlmatchagainst工具详细用法》在MySQL中,MATCH……AGAINST是全文索引(Full-Textindex)的查询语法,它允许你对文本进行高效的全文搜素,支持自然语言搜... 目录一、全文索引的基本概念二、创建全文索引三、自然语言搜索四、布尔搜索五、相关性排序六、全文索引的限制七

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件(txt,xls,csv,sql,二进制文件)的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1

Linux内核参数配置与验证详细指南

《Linux内核参数配置与验证详细指南》在Linux系统运维和性能优化中,内核参数(sysctl)的配置至关重要,本文主要来聊聊如何配置与验证这些Linux内核参数,希望对大家有一定的帮助... 目录1. 引言2. 内核参数的作用3. 如何设置内核参数3.1 临时设置(重启失效)3.2 永久设置(重启仍生效

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

如何在Mac上安装并配置JDK环境变量详细步骤

《如何在Mac上安装并配置JDK环境变量详细步骤》:本文主要介绍如何在Mac上安装并配置JDK环境变量详细步骤,包括下载JDK、安装JDK、配置环境变量、验证JDK配置以及可选地设置PowerSh... 目录步骤 1:下载JDK步骤 2:安装JDK步骤 3:配置环境变量1. 编辑~/.zshrc(对于zsh

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

基于Python打造一个全能文本处理工具

《基于Python打造一个全能文本处理工具》:本文主要介绍一个基于Python+Tkinter开发的全功能本地化文本处理工具,它不仅具备基础的格式转换功能,更集成了中文特色处理等实用功能,有需要的... 目录1. 概述:当文本处理遇上python图形界面2. 功能全景图:六大核心模块解析3.运行效果4. 相