Web 调试技术 | 青训营笔记

叽歪怒的快乐
75 阅读3分钟

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

前端必须知道的开发调试知识

Chrome DevTools

动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 编辑修改具体样式
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则

console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • cnosole.table 具象化的展示JSON和数组数据
  • console.dir 通过类似文件数的方式展示对象的属性
  • 占位符，给日志添加样式，可以突出重要信息

Debug工具栏介绍

image.png - 暂停 - 单步跳过 - 进入函数 - 跳出函数 - 刷新 - 连接

Network

区域一：控制面板

区域二：过滤面板

区域三：概览区域

区域四：Request Table模板

区域五：总结面板

区域六：请求详情面板

image.png

Application

展示与本地存储相关信息

image.png

Performance

从上到下介绍

控制面板

概览面板：

  • FPS：每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费的时间

线程面板：

  • Frames:帧线程
  • Main：主线程，负责执行Javascript，解析HTML/CSS，完成控制
  • Raster：Raster线程，负责完成某个layer或者某些块的绘制

统计面板 image.png

Lighthouse

image.png

移动端H5调式

真机调试

iOS

  1. 使用Lightning数据线将iPhone与Mac相连
  2. iPhone开启web检查器
  3. Iphone使用Safari浏览器打开要调试的页面
  4. Mac打开Safari浏览器调试
  5. 在弹出的Safari Developer tools中调试

Android

  1. 使用USB数据线将手机与电脑相连
  2. 手机进入开发者模式，勾选USB调式，并允许调式
  3. 电脑打开Chrome浏览器，在地址栏输入：chrome:/inspect/#devices 并勾选Discover USB devices选项
  4. 手机允许远程调式，并访问调式页面
  5. 电脑点击inspect按钮
  6. 进入调试界面

也可以使用代理工具

常见的代理工具有Charles（适合查看、控制网络请求、数据分析）、Fidder(与chares相似，适合window平台）、spy-debugger(远程调式手机页面、抓包）

Node.js调试

Inspector Protocol+Chrome Devtool

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

Inspector Protocol+VScode

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

常用开发调式技巧

线上即使修改Overrides

  1. 点击Sources面板下的Overrides
  2. 点击Select folders for Overrides。选择一个本地的空文件夹目录
  3. 允许授权
  4. 在page中修改代码，修改完成后保存
  5. 打开decTools,点击右上角的三个小点，就能看到修改了

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

image.png

使用代理工具Mock数据

  1. 右键选中要mock数据的接口，选择save response,保存文件到本地
  2. 本地打开保存的文件，编辑想mock的数据并保存
  3. 右键选中第一步的接口，选择Map Local,Local Path选择第二部的文件
avatar
文章
阅读
粉丝