浏览器调试工具-Chrome Dev Tools
浏览器调试模式下的各个调试工具是常用的工具集,能够帮助开发者理解、调试和优化网页。
1.打开方式
- 直接在浏览器中按下F12键
- 右键点击页面上的任一元素,选择“检查”(Inspect)
- 在浏览器右上角点击菜单按钮,选择“更多工具”→“开发者工具”
在调试工具中,打开命令菜单,可以进行一些快捷操作
快捷键:
CTRL+SHIFT+P (windows)
Command+SHIFT+ P(MAC)

相关命令
dark theme -->DevTool切换成黑色主题

light theme -->切换成白色主题

Capture area screenshot -->选择范围截图
Capture full size screenshot -->选择整个页面截图
Capture node screenshot -->捕捉一个node节点截图
通过Dock命令可以改变窗口位置

Undock命令可以将其变成一个独立的窗口
2.工具概述
Elements(元素)
用于查看和编辑网页的HTML和CSS。
Console(控制台)
用于输出日志信息、调试代码和执行JavaScript代码
Sources(源代码)
用于查看和调试网页的JavaScript、CSS和图片等文件
Network(网络)
用于查看网页的请求和响应信息,包括请求头、响应头和响应时间等
Performance(性能)
用于分析网页的性能瓶颈,包括加载时间、渲染时间等
Memory(内存)
用于监控网页的内存使用情况,帮助开发者发现内存泄漏等问题
3.工具使用
Elements(元素)
- 使用左上角的箭头图标选择页面上的元素,右侧的面板将显示该元素的HTML和CSS
- 可以直接编辑HTML和CSS来测试更改效果,但注意这些更改是临时的,不会保存到服务器
Console(控制台)
- 在控制台中输入JavaScript代码并执行
- 查看网页运行时的错误信息和日志
Sources(源代码)
- 查看和调试网页的JavaScript文件
- 设置断点、单步执行和观察变量值
Network(网络)
- 查看网页加载时发送的请求和接收的响应
- 分析请求的耗时、大小和资源类型
Performance(性能)
- 录制网页的性能数据,包括加载时间、渲染时间和脚本执行时间
- 分析性能瓶颈,优化网页性能
Memory(内存)
- 监控网页的内存使用情况
- 发现内存泄漏等问题
4.调试技巧
利用控制台输出调试信息
在JavaScript代码中使用console.log()来输出变量值或调试信息。
设置断点
在Sources面板中,找到需要调试的JavaScript文件,并在相应的行号上点击来设置断点。当代码执行到断点时,将暂停执行,此时可以检查变量值、单步执行代码等。
观察DOM变化
在Elements面板中,可以实时观察DOM结构的变化。这对于理解网页的渲染过程和调试动态内容非常有帮助。
分析网络请求
使用Network面板来分析网页加载时发送的请求和接收的响应。这有助于发现请求失败、响应时间过长或响应数据不正确等问题。
总结
浏览器调试模式下的各个调试工具是开发者进行网页开发和调试的重要工具。通过熟练掌握这些工具的使用方法,可以大大提高开发效率和调试效果。
#上述是对工具操作的描述,具体操作后期逐步完善
相关文章:
浏览器调试工具-Chrome Dev Tools
浏览器调试模式下的各个调试工具是常用的工具集,能够帮助开发者理解、调试和优化网页。 1.打开方式 直接在浏览器中按下F12键右键点击页面上的任一元素,选择“检查”(Inspect)在浏览器右上角点击菜单按钮,选择“更多…...
基于车联网大数据平台的用户驾驶习惯行为画像分析
近年来,新能源汽车行业的迅速发展推动了汽车智能化的趋势。新能源汽车上配备了成千上万的传感器,这些传感器采集了大量的行车数据被用于车辆运行状况的监控与分析。另一方面,采集到的大量行车数据,也能很好地体现用户的驾驶习惯。…...
Ubuntu24.04搭建maxkb开发环境
接上文:windows10搭建maxkb开发环境(劝退指南) 上文在windows10环境搭建maxkb开发环境遇到各种坑,后面就转战ubuntu平台,果然比较顺利的完成开发环境搭建。当然遇到相关的问题还是可以参考上文《windows10搭建maxkb开发…...
C++ 指针和引用的区别
1.引用在定义时必须初始化,而指针没有要求 2.引用一旦引用了一个实体就不能在引用其它实体,指针可以在任何时候指向同一类型的指针 3.没有空引用,但是有空指针 4.在sizeof中含义不同:引用结果为引用类型的大小,但指…...
python绘制蕨菜叶分形
一花一叶一世界,一草一木一浮生. 使用了四个不同的线性变换,根据概率选择其中一个变换并更新 x 和 y 坐标。然后将生成的绿色点绘制出来,形成一片蕨菜叶。 import numpy as np import matplotlib.pyplot as pltdef fern_fractal(num_points):# 初始化坐…...
1分钟了解pandas
Pandas 是一个强大的 Python 库,用于数据分析和数据处理。它为 Python 提供了高效的数据结构和数据分析工具,使得数据操作变得简单而直观。Pandas 由 Wes McKinney 在 2008 年创建,并迅速成为数据科学领域中最受欢迎的库之一。 安装 Pandas …...
django-celery应用-定时执行测试cases
1、celery周期性任务 简介-----celery beat 是一个调度程序,它定期启动任务,然后由集群中的可用工作节点执行这些任务。 django-celery-beat celery默认的调度程序是 celery.beat.PersistentScheduler ,它简单地跟踪本地 shelve 数据库文件中…...
【C++深度探索】unordered_set、unordered_map封装
🔥 个人主页:大耳朵土土垚 🔥 所属专栏:C从入门至进阶 这里将会不定期更新有关C/C的内容,欢迎大家点赞,收藏,评论🥳🥳🎉🎉🎉 文章目录…...
CSS——字体背景(Font Background)
一、字体族 1、字体的相关样式: ① color 用来设置字体颜色(前景颜色) ② font-size 字体的大小 和font-size相关的单位: em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size ③ font-family 字体族&#x…...
秋招突击——8/15——知识补充——Socket通信
文章目录 引言正文基于TCP协议的Socket通信基于UDP协议的Socket通信服务端如何接收更多项目多进程多线程IO多路复用select轮询IO多路复用epoll事件通知 使用Socket实现同一个机器上的多线程通信服务端创建对应socket监听端口客户端发起对应的连接请求 总结 引言 上次面试腾讯的…...
Qt第十四章 模型视图
Model/View(模型/视图)结构 文章目录 Model/View(模型/视图)结构简介视图组件Model/View结构的一些概念项目控件组(item Widgets)模型/视图 如何使用项目视图组设置行的颜色交替变换拖拽设置编辑操作其他操作 选择模型自定义选择多…...
硬件工程师必须掌握的MOS管详细知识
MOS管,全称为金属-氧化物半导体场效应晶体管(Metal-Oxide-Semiconductor Field-Effect Transistor,MOSFET),是一种重要的半导体器件,广泛应用于电子工业中各种电路的开关、放大、调制、数字电路和模拟电路等…...
希尔排序,详细解析(附图解)
1.希尔排序思路 希尔排序是一种基于插入排序的算法,通过将原始数据分成若干个子序列,然后对子序列进行插入排序,逐渐减小子序列的间隔,最后对整个序列进行一次插入排序。 1.分组直接插入排序,目标接近有序--------…...
【C语言篇】编译和链接以及预处理介绍(下篇)
文章目录 前言#和###运算符##运算符 命名约定#undef命令⾏定义条件编译#if和#endif多个分支的条件编译判断是否被定义嵌套指令 头文件被包含头文件被包含的方式本地文件包含库文件的包含 嵌套文件包含 其他预处理指令 写在最后 前言 本篇接前一篇【C语言篇】编译和链接以及预处…...
利用Llama2 7b自己实现一套离线AI
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家, 可以当故事来看,轻松学习。 离了 ChatGPT 本人简直寸步难行,今天 ChatGPT 大面积宕机,服务直到文章写作&am…...
Ciallo~(∠・ω・ )⌒☆第十七篇 Ubuntu基础使用 其一
Ubuntu是一种基于Linux的操作系统,它是开源的、免费的,并且具有广泛的用户群体。 基本文件操作:Ubuntu使用命令行工具来进行文件操作。以下是一些常用的命令: 切换到用户主目录: cd ~ 切换到上级目录: cd .…...
Linux-零拷贝技术
什么是零拷贝? 在传统的数据传输过程中,数据需要从磁盘读取到内核空间的缓冲区,然后再从内核空间拷贝到用户空间的应用程序缓冲区。如果需要将数据发送到网络,数据还需要再次从用户空间拷贝到内核空间的网络缓冲区。这个过程涉及…...
小区团购管理
TOC springboot254小区团购管理 第1章 绪论 1.1选题动因 当前的网络技术,软件技术等都具备成熟的理论基础,市场上也出现各种技术开发的软件,这些软件都被用于各个领域,包括生活和工作的领域。随着电脑和笔记本的广泛运用&…...
图像文本擦除无痕迹!复旦提出EAFormer:最新场景文本分割新SOTA!(ECCV`24)
文章链接:https://arxiv.org/pdf/2407.17020 git链接:https://hyangyu.github.io/EAFormer/ 亮点直击 为了在文本边缘区域实现更好的分割性能,本文提出了边缘感知Transformer(EAFormer),该方法明确预测文…...
Codeforces Round 966 (Div. 3)(A,B,C,D,E,F)
A. Primary Task 签到 void solve() {string s;cin>>s;bool bltrue;if(s.size()<2)blfalse;else{if(s.substr(0,2)"10"){if(s[2]0)blfalse;else if(s[2]1&&s.size()<3)blfalse; }else blfalse;}if(bl)cout<<"YES\n";else cout…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
【Linux系统】Linux环境变量:系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量:setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
