前端开发调试知识|青训营笔记

InifniteZ1
81 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第6天

Bug与代码相伴而生，只要Coding就必然存在Bug

前端debug的特点

  • 多平台
  • 多环境
  • 多工具
  • 多技巧

动态修改元素和样式

.cls.png

点击.cls开启动态修改元素的class 通过鼠标点击&键盘输入和方向键改变值

关于伪类的调试: 使用force state来强制激活伪类（如 :hover）

通过Computed 下方搜索框 来搜索目标样式

前端日志的技巧

console0.png

console控制台选项里下方的输入框，可进行实时输入

console.table 可将数组等元素以表格方式呈现

console.dir 可以以文件树的方式展示各种属性

console.time()

Source作用： 展示网页源代码（文件树形式）

断点： 点击行号&使用debugger 来设置断点 源码右侧会显示所有的断点

watch界面可以观测变量的值

压缩后的代码如何调试？

压缩后的代码变得不可阅读

使用Source Map可以映射源码

Source tab.png

跨域问题.png Network

其包括网页请求的资源

执行分为

  • 串行执行
  • 并行执行

Performance

performance.png

其与网页性能相关

一个performance demo

googlechrome.github.io/devtools-sa…

**解决思路：**页面卡顿 -> 查看fps指标 -> 寻找性能瓶颈 -> 优化代码

勾选 Frame rendering stats来查看fps指标

Lighthouse

使用lighthouse来进行性能分析 单机右侧analyse

衡量性能的核心web指标

  • LCP 最大内容绘制 <=2.5s
  • FID 首次输入延迟 <=100ms
  • CLS 累计布局偏移 <=0.1

当性能不符合预期，其会提供优化手段

Node.js调试

Inspector Protocol + Chrome Devtool

  1. 执行命令 node --inspect=8888 index.js
  2. chrome浏览器访问服务
  3. 点击绿色node图标打开node调试面板
  4. 在node调试面板中使用断点调试

Inspector Protocol + VSCode

  1. VSCode 点击运行
  2. 添加配置
  3. 启动调试
  4. 添加断点
  5. 查看变量，堆栈

常用开发调试技巧

  • 线上即时修改Overrides
  1. 打开Sources面板下的Overrides
  2. 点击Select folders for Overrides.选择一个本地的空文件夹目录
  3. 允许授权
  4. 在page中修改代码，修改完成后ctrl + s 保存
  5. 打开devTools，点击右上角的三个小点 -> More tools -> Changes，即可看到所有修改

  • 利用代理解决开发阶段的跨域问题

  • 启用本地source map

    线上不存在Source Map 时可以使用Map Local 网络映射功能来访问本地的Source Map文件

  • 使用代理工具Mock数据

    1. 右键选出要mock数据的接口，选择save response，保存文件到本地
    2. 本地打开保存的文件，编辑想要mock的数据并保存
    3. 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。

  • 小黄鸭调试大法

在本节课程的学习中，我最印象深刻的是小黄鸭测试大法（笑） 这的确给我们项目开发的精确定位bug提供了极为详尽的信息，让我们大项目的开发进程进一步提速

avatar
文章
阅读
粉丝