前端调试PC端| 豆包MarsCode AI刷题

Fallengenius
151 阅读5分钟

青训营伴学笔记第五篇——工具篇

Bug和Debug

Bug的历史

最早的Bug是由于虫子产生的，故之后的故障都用Bug代称。

前端Debug的特点

  1. 多平台：包括浏览器、Hybrid、Node.js、小程序、桌面应用等。
  2. 多环境：包括本地开发环境、线上环境。
  3. 多工具：包括 Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole 等。
  4. 多技巧：包括 Console、BreakPoint、sourceMap、代理等。

Chorm DevYools

动态修改元素和样式

  1. 点击.cls 开启动态修改元素的 class。
  2. 输入字符串可以动态地给元素添加类名。
  3. 勾选 / 取消类名可以动态地查看类名生效效果。
  4. 点击具体的样式值（字号、颜色、宽度、高度等）可以进行编辑，浏览器内容区域实时预览。
  5. Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则

实操画面 修改margin前 image.png 修改argin后

image.png 很明显出现了布局混乱和元素位移等问题。

两种强制激活伪类的方式
  1. 选中具有伪类的元素，点击 :hov。
  2. DOM 树右键菜单，选择 Force State。

Console

在 JavaScript 编程中，控制台（console）是开发人员调试代码的重要工具。不同的 console 方法有不同的用途：

  • console.log 用于输出一般信息。
  • console.warn 用于输出警告信息。
  • console.error 用于输出错误信息。
  • console.debug 用于输出调试信息（在某些浏览器中需要开启调试模式才能看到）。
  • console.info用于输出提示信息。
  • console.table 可以将数据以表格形式展示，特别适合展示数组或对象。
  • console.dir 可以详细地列出对象的属性，类似于文件树的结构。

占位符的使用可以让输出的信息更加格式化和易读，例如：

console.log("My name is %s and I am %d years old.", "John", 30);

这行代码将输出："My name is John and I am 30 years old."

Sorce Tab

  1. 用途

    • 查看和调试代码：

      • 在浏览器的开发者工具中，Source Tab（源标签页）是用于查看和调试网页源代码的重要界面。开发者可以查看 HTML、CSS 和 JavaScript 文件的内容。
      • 例如，当你需要检查网页上某个元素的样式是如何定义的，或者某个 JavaScript 函数是如何工作的，你可以在 Source Tab 中找到对应的代码。

    • 设置断点：

      • 开发者可以在 Source Tab 中设置断点来调试 JavaScript 代码。断点是代码执行过程中的暂停点，当代码执行到断点时，执行会暂停，允许开发者检查变量的值、调用栈等信息。
      • 例如，如果你有一个 JavaScript 函数在页面加载时执行，但没有产生预期的结果，你可以在该函数内设置断点，逐步执行代码来查找问题。

  2. 常见功能

    • 文件导航：

      • Source Tab 通常会显示网页加载的所有资源文件，包括 HTML、CSS、JavaScript 文件等。开发者可以通过文件树结构轻松找到所需的文件。

    • 代码格式化和高亮：

      • 为了便于阅读和理解，Source Tab 中的代码通常会进行格式化和语法高亮。不同的语法元素（如关键字、变量、函数等）会用不同的颜色显示。

    • 调试工具：

      • 除了设置断点外，Source Tab 还提供了一系列调试工具，如单步执行（逐行执行代码）、进入函数（进入函数内部执行）、跳出函数（从当前函数中跳出并继续执行）等操作。
      • 例如，在调试一个复杂的 JavaScript 应用程序时，你可以使用单步执行来跟踪代码的执行流程，查看每一步的变量变化情况。

NetWork

通常用于分析网页或应用程序在网络请求和响应方面的表现。

Application

用于查看和管理网页在本地存储的数据。

Performance

在软件开发中，性能优化是一个重要的环节，特别是对于需要高性能的应用程序，如游戏、视频编辑软件等。性能优化通常包括以下几个步骤：

  • 页面卡顿分析：通过工具分析页面加载和操作过程中的卡顿情况，找出可能导致卡顿的原因。
  • 查看 FPS 指标：FPS（Frames Per Second）是衡量画面流畅度的重要指标，查看 FPS 可以帮助开发者了解应用程序的性能表现。
  • 寻找性能瓶颈：通过性能分析工具，找出应用程序中性能最差的部分，这些部分通常是优化的重点。
  • 优化代码：根据性能分析的结果，对代码进行优化，例如减少不必要的计算、优化算法、减少内存占用等。

这张图片可能是一个用于教学或演示如何使用性能分析工具进行性能优化的示例。

Lighthouse

Lighthouse 是由 Google 开发的一个开源工具，用于评估网页的质量，包括性能、可访问性、最佳实践和 SEO 等方面。

  1. LCP（Largest Contentful Paint） ：最大内容绘制时间，用于测量页面加载性能。图中显示 LCP 为 4.0 秒，理想情况下应在 2.5 秒内发生。
  2. FID（First Input Delay） ：首次输入延迟，用于测量交互性。图中显示 FID 为 130 毫秒，理想情况下应在 100 毫秒或更短。
  3. CLS（Cumulative Layout Shift） ：累积布局偏移，用于测量视觉稳定性。图中显示 CLS 为 0.007，理想情况下应保持在 0.1 或更少。

此外，图片中还显示了其他一些性能指标：

  • First Contentful Paint：首次内容绘制时间为 1.1 秒。
  • Time to Interactive：可交互时间为 3.6 秒。
  • Speed Index：速度指数为 2.5 秒。
  • Total Blocking Time：总阻塞时间为 130 毫秒。

这些指标对于优化网页性能至关重要，帮助开发者了解用户在访问网页时可能遇到的延迟和体验问题。

avatar
文章
阅读
粉丝