前端开发调试之 PC 端调试学习笔记

一、引言

在前端开发过程中,调试是至关重要的一个环节。它能帮助我们快速定位代码中的问题,无论是页面布局错乱、交互效果异常还是性能不佳等情况,通过有效的调试手段都可以找到根源并进行修复。而在 PC 端进行调试有着其特定的方法和技巧,以下就是关于前端开发中 PC 端调试的详细学习笔记。

二、常用的浏览器调试工具

(一)Chrome 浏览器调试工具(DevTools)

  1. 打开方式
    可以通过在 Chrome 浏览器中按下快捷键 F12(Windows/Linux)或者 Command + Option + I(Mac)来快速打开开发者工具。也可以在浏览器菜单中找到 “更多工具”->“开发者工具” 选项来打开。
  2. 主要面板介绍
    • Elements(元素)面板
      • 在这里可以查看和编辑页面的 HTML 结构以及对应的 CSS 样式。我们能够直接在面板中看到各个 HTML 元素的嵌套关系,鼠标悬停在元素上时,页面中对应的部分会高亮显示,方便确认元素位置。
      • 对于 CSS 样式,可以实时修改属性值,比如改变某个元素的颜色、尺寸等,修改后能立即在页面上看到效果,有助于快速调试样式问题,判断是样式代码书写错误还是选择器应用不当等情况。
    • Console(控制台)面板
      • 主要用于查看 JavaScript 代码运行时产生的信息,比如打印的日志(使用 console.log() 等语句输出的内容),可以在这里看到变量的值、函数执行的结果等,帮助我们追踪代码的执行流程和状态。
      • 同时,如果代码中有错误,也会在控制台中显示相应的错误提示信息,包括错误类型(如语法错误、引用错误等)、出错的位置(具体的代码行数和所在文件等),方便我们精准定位并修复 JavaScript 代码中的问题。
    • Sources(源代码)面板
      • 展示了页面加载的所有相关的脚本文件、样式文件以及 HTML 文件等资源。我们可以在这里对代码进行断点设置(在代码行号旁边点击即可添加断点),当代码执行到断点处时,会暂停执行,方便我们查看此刻各个变量的值、调用栈的情况等,从而深入分析代码逻辑,排查问题所在。
      • 还支持代码的搜索、格式化等功能,便于在复杂的代码中查找特定的代码片段以及更好地阅读代码。
    • Network(网络)面板
      • 能够记录页面加载过程中所有的网络请求情况,包括请求的 URL、请求方法(如 GET、POST 等)、响应状态码、请求和响应的时间、传输的数据大小等信息。
      • 通过分析网络请求,我们可以判断是否存在资源加载过慢、请求失败等问题,比如图片加载不出来,就可以查看对应的图片请求是否有 404 错误或者请求耗时过长等情况,进而采取相应的优化措施,像压缩资源、调整请求顺序等。
    • Performance(性能)面板
      • 可以对页面的性能进行分析,比如记录页面加载过程中的各个时间节点,如首次绘制时间、DOM 加载完成时间等,还能以可视化的方式展示 CPU、内存等资源的使用情况随时间的变化曲线。
      • 通过该面板找出性能瓶颈所在,例如某个 JavaScript 函数执行时间过长导致页面卡顿,就可以针对性地对代码进行优化,比如采用更高效的算法、减少不必要的循环等。

(二)Firefox 浏览器调试工具(Firefox Developer Tools)

  1. 打开方式
    在 Firefox 浏览器中,按下快捷键 F12(Windows/Linux)或者 Command + Option + I(Mac)同样可以打开开发者工具,也可以通过菜单中的 “Web 开发者”->“切换工具” 来开启。
  2. 与 Chrome 调试工具类似的功能及特点
    • Inspector(检查器)面板:类似 Chrome 的 Elements 面板,用于查看和编辑 HTML 结构及 CSS 样式,能够实时修改样式并查看页面效果,方便排查样式相关的问题。
    • Console(控制台)面板:功能和 Chrome 的控制台类似,输出 JavaScript 运行时的日志、错误信息等,辅助调试代码逻辑。
    • Debugger(调试器)面板:对应 Chrome 的 Sources 面板,可设置断点、查看变量等,对 JavaScript 代码进行细致的调试。
    • Network(网络)面板:记录网络请求信息,帮助分析资源加载方面的问题,和 Chrome 的网络面板作用一致。
    • Performance(性能)面板:用于分析页面性能情况,找出性能优化的关键点,与 Chrome 相应面板功能类似。

不过,Firefox 开发者工具也有其自身的一些特色功能,比如在 CSS 调试方面,它的布局查看工具更加直观,可以清晰地看到元素的盒模型、布局流等情况,对于处理复杂的页面布局问题有一定优势。

(三)Edge 浏览器调试工具

  1. 打开方式
    快捷键 F12(Windows/Linux)或者 Command + Option + I(Mac)来打开开发者工具,也可通过浏览器菜单中的 “更多工具”->“开发者工具” 来开启。
  2. 功能特点
    其整体的功能布局和 Chrome 的 DevTools 比较相似,具备 Elements、Console、Sources、Network、Performance 等类似的面板,操作和使用方法也基本相通,对于熟悉 Chrome 调试工具的开发者来说很容易上手。同时,Edge 浏览器在结合 Windows 系统的一些特性上,可能在调试本地应用中的 WebView 等场景时有更好的适配性和便利性。

三、调试步骤及技巧

(一)页面样式问题调试

  1. 首先使用 Elements 面板(以 Chrome 为例)
    • 当发现页面布局或者元素样式不符合预期时,打开 Elements 面板,通过鼠标悬停快速定位到相关元素,查看其应用的 CSS 样式规则。有时候可能是样式被其他规则覆盖了,通过查看样式的优先级(根据 CSS 选择器的特殊性等因素来判断),可以确定是否需要调整选择器或者添加 !important(尽量少用,因为可能破坏样式的可维护性)来确保样式生效。
    • 如果样式规则看起来没问题,但效果不对,可以尝试在面板中直接修改属性值,看是否能达到预期效果,这样能快速判断是样式代码本身的问题还是其他因素(比如 JavaScript 动态修改了样式等)导致的。
  2. 利用浏览器的样式编辑功能查找样式冲突
    多数浏览器调试工具支持在样式面板中搜索特定的样式属性,比如搜索 color 属性,就能看到所有应用了该属性的元素及其对应的样式规则,方便找出样式冲突的地方,尤其是在大型项目中,有众多样式表和复杂的样式嵌套时,这个功能非常实用。

(二)JavaScript 代码调试

  1. 在 Sources 面板设置断点
    • 根据代码逻辑,预估可能出现问题的地方设置断点,比如在函数入口、条件判断语句处等。当页面执行到相关代码时会暂停,此时可以查看当前作用域内的变量值(在右侧的 “Scope” 或者 “Variables” 等相关区域查看),分析变量的值是否符合预期,判断代码执行的走向是否正确。
    • 还可以通过调试工具的单步执行功能(如 “Step Over” 跳过当前函数调用、“Step Into” 进入函数内部详细查看、“Step Out” 从函数内部跳出继续执行等按钮操作),逐行跟踪代码的执行过程,进一步排查逻辑错误。
  2. 结合 Console 面板输出关键信息
    在代码中适当位置添加 console.log() 语句,输出变量值、函数执行结果等关键内容到控制台,尤其是在一些复杂的循环、异步操作等场景下,通过控制台输出可以清晰地看到代码执行的中间状态,辅助断点调试,更快地发现问题所在。

(三)网络相关问题调试

  1. 使用 Network 面板分析请求情况
    • 查看请求的状态码,比如常见的 200 表示成功,404 表示资源未找到,500 可能是服务器端错误等,根据状态码来确定是前端请求配置问题还是后端服务问题。
    • 观察请求的时间,若某个资源加载时间过长,可以查看其详细信息,比如是否是因为服务器响应慢,还是网络带宽限制等原因导致的,进而考虑优化网络请求,如采用缓存策略、压缩资源大小、优化域名解析等措施。
    • 对于异步请求(如 AJAX 请求),查看请求和响应的数据是否正确,是否符合接口文档的要求,判断是前端发送的数据格式不对还是后端返回的数据不符合预期,从而进行相应的调整。
  2. 模拟不同网络环境(部分调试工具支持)
    有些浏览器调试工具具备网络 throttling(网络限速)功能,我们可以模拟不同的网络环境,比如模拟 2G、3G、WiFi 等网络速度,查看页面在这些情况下的表现,提前发现并解决可能在低网络带宽场景下出现的问题,优化用户体验。

(四)性能问题调试

  1. 借助 Performance 面板分析性能瓶颈
    • 运行页面的性能分析记录后,查看页面加载过程中的关键时间指标,比如首次内容绘制(FCP)时间、最大内容绘制(LCP)时间、可交互时间(TTI)等,若这些时间过长,不符合性能标准(如 Google 的 Core Web Vitals 指标要求),则需要深入分析是哪些资源加载慢、JavaScript 代码执行效率低等原因造成的。
    • 通过查看性能分析图表中 CPU、内存等资源的使用曲线,找到占用资源过多的代码片段,例如某个动画效果执行时 CPU 使用率过高,可能就需要优化动画实现的代码,采用更高效的动画库或者优化代码逻辑,减少不必要的计算等。
  2. 代码优化及资源优化技巧
    • 在 JavaScript 方面,可以采用代码压缩工具(如 UglifyJS 等)对代码进行压缩,去除多余的空格、注释等,减小文件大小,加快下载速度。同时,合理使用事件委托、避免频繁的 DOM 操作(因为 DOM 操作相对比较耗时)等方式优化代码执行效率。
    • 对于 CSS,可以合并相似的样式规则,减少样式文件的数量和大小,采用 CSS sprite(雪碧图)技术合并小图标资源等,提高资源加载效率。
    • 在 HTML 方面,精简代码结构,避免过多的嵌套,合理使用 HTML5 的语义化标签,有助于搜索引擎优化以及代码的可读性和维护性,同时也能在一定程度上提升页面渲染速度。

四、总结

PC 端的前端开发调试是一个综合性的过程,需要熟练掌握各个浏览器提供的调试工具及其功能,通过多实践、多分析不同类型的问题,才能在遇到页面样式、JavaScript 逻辑、网络以及性能等方面的问题时,快速准确地定位并解决,从而开发出高质量的前端项目。同学们在学习过程中要多动手操作,结合实际的项目案例不断积累调试经验,提升自己的前端开发水平哦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61472.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL常用时间函数与时间计算提取示例说明

文章目录 常用函数与常量to_timestamp(字符串转时间戳、数字转时间戳)date与to_date(字符串转日期、时间戳转日期)interval(时间计算)基本操作与格式混合运算 to_char(各种时间转字符串)extract(提取时间字段,年月日时分秒,周、季度,第几周、…

SlickGrid点击/双击事件

分析 SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击,捕获到点击事件之后,修改表格数据,然后使用grid.updateRow方法将修改后的数据更新到表格中。 展示 代码 创建grid(HTML)…

iOS UI 自动化 手势右滑退出当前页面

1、TouchAction from appium.webdriver.common.touch_action import TouchAction# 获取屏幕的宽度和高度 screen_width driver.get_window_size()["width"] screen_height driver.get_window_size()["height"]# 定义滑动的起点和终点坐标 start_x 0 en…

【Unity ShaderGraph实现流体效果之Node入门(二)】

Unity ShaderGraph实现流体效果之Node入门(二) 前言Shader Graph NodeStep NodeMultiply NodeRotate About AxisAddfresnel effectIs Front Face 前言 在(一)中讨论了一部分在制作流体效果时使用的Node,本章继续将剩余…

Redis 6.2 源码导读

Redis 是一个高性能的开源内存键值数据库,广泛用于缓存、会话管理和实时分析。Redis 6.2 版本引入了一些新特性和改进。 以下是 Redis 6.2 源码的一些关键部分和导读: 1. 源码结构 Redis 的源码主要分布在以下几个目录中: src/&#xff1…

集合卡尔曼滤波(Ensemble Kalman Filter),用于二维滤波(模拟平面上的目标跟踪),MATLAB代码

集合卡尔曼滤波(Ensemble Kalman Filter) 文章目录 引言理论基础卡尔曼滤波集合卡尔曼滤波初始化预测步骤更新步骤卡尔曼增益更新集合 MATLAB 实现运行结果3. 应用领域结论 引言 集合卡尔曼滤波(Ensemble Kalman Filter, EnKF)是…

解决Docker环境变量的配置的通用方法

我们部署的很多服务都是以Docker容器的形式存在的。 在运行Docker容器前,除了设置网络、数据卷之外,还需要设置各种各样的环境变量。 有时候,由于容器版本的问题,一些文档没有及时更新,可能同时存在多个新旧版本的环…

2446.学习周刊-2024年46周

封面 拍摄于11月17日,身心疲惫的时候,去山里走走看看风景,富氧的环境能缓解身心疲劳。 ✍优秀博文 # 深度解析数仓建模与指标体系构建的底层逻辑 | 金字塔原理在数仓建模分析中的应用基于“理采存管用”的数据中台建设方案业务逻辑不要放入…

自然语言处理:第六十三章 阿里Qwen2 2.5系列

本人项目地址大全:Victor94-king/NLP__ManVictor: CSDN of ManVictor 项目地址: QwenLM/Qwen2.5: Qwen2.5 is the large language model series developed by Qwen team, Alibaba Cloud. 官网地址: 你好,Qwen2 | Qwen & Qwen2.5: 基础模型大派对&a…

六、卷积神经网络(CNN)基础

卷积神经网络(CNN)基础 前言一、CNN概述二、卷积层2.1 卷积2.2 步幅(Stride)2.3 填充(Padding)2.4 多通道卷积2.5 多卷积计算2.6 特征图大小计算2.7 代码演示 三、池化层3.1 池化层计算3.1.1 最大池化层3.1.2 平均池化层 3.2 填充(Padding)3.3 步幅(Stri…

Spring Security SecurityContextHolder(安全上下文信息)

在本篇博客中,我们将讨论 Spring Security 的 SecurityContextHolder 组件,包括其实现方式、关键特性,并通过实际示例进行说明。 理解 SecurityContextHolder SecurityContextHolder 是 Spring Security 存储当前安全上下文详细信息的地方。…

通过vite+vue3+pinia从0到1搭建一个uniapp应用

最近项目上要做一个app,选择了用uniapp作为开发框架;我大概看了一下uniapp的文档,根据文档从0到1搭了一个uniapp应用供大家参考。 因为本人习惯使用了WebStorm编译器,但是uniapp官方推荐使用HBuilder搭建,如果和我一样…

【Pytorch】torch.nn.functional模块中的非线性激活函数

在使用torch.nn.functional模块时,需要导入包: from torch.nn import functional 以下是常见激活函数的介绍以及对应的代码示例: tanh (双曲正切) 输出范围:(-1, 1) 特点:中心对称,适合处理归一化后的数据…

java-贪心算法

1. 霍夫曼编码(Huffman Coding) 描述: 霍夫曼编码是一种使用变长编码表对数据进行编码的算法,由David A. Huffman在1952年发明。它是一种贪心算法,用于数据压缩。霍夫曼编码通过构建一个二叉树(霍夫曼树&a…

网络安全学习74天(记录)

11.21日,今天学习了 app抓包(需要的工具charles(激活),夜神模拟器,postern,) 思路:首先charles需要抓取的app的包,需要的是装证书,将charles的证…

【数据结构】【线性表】【练习】反转链表

申明 该题源自力扣题库19&#xff0c;文章内容&#xff08;代码&#xff0c;图表等&#xff09;均原创&#xff0c;侵删&#xff01; 题目 给你单链表的头指针head以及两个整数left和right&#xff0c;其中left<right&#xff0c;请你反转从位置left到right的链表节点&…

实时数仓:Lambda架构和Kappa架构有什么联系和区别

Kappa 和 Lambda 架构是处理大数据和实时数据流的两种不同设计模式。以下是对这两种架构的概述和比较&#xff1a; Lambda 架构 定义&#xff1a; Lambda 架构的全称是 Lambda Architecture。这个架构旨在处理大规模数据&#xff0c;结合了批处理和流处理的优点&#xff0c;以…

第7章 服务发现

本章将深入介绍服务发现,它为什么很重要,以及它是如何在Kubernetes中实现的。此外,还会涉及一些排查问题的技巧。 为了更好地理解本章的内容,读者应该首先了解Kubernetes的Service对象及其工作原理。这是第6章的内容。 本章分以下内容展开。 快速入门。服务注册。服务发现…

vllm源码解析(一):整体架构与推理代码

vlllm官方代码更新频发,每个版本都有极大变动, 很难说哪个版本好用. 第一次阅读vllm源码是0.4.0版本,对这版圈复杂度极高的调度代码印象深刻 0.4.1对调度逻辑进行重构,完全大变样, 读代码速度快赶不上迭代的速度了。 现在已经更新到0.5.4, 经过长时间观察&#xff0c;发现主要的…

数据库index(索引)使用注释事项

1、索引类型&#xff0c;通常选择NORMAL或者UNIQUE. NORMAL&#xff1a;正常的一种索引吧。 UNIQUE:索引列必须是不能重复的。 2、索引方法&#xff1a;通常选择BTREE 3、使用SQL查询的时候&#xff0c;不需要特别处理索引的字段。数据库会自动的处理&#xff0c;提升SQL的查…