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

dnxb123
95 阅读4分钟

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

课堂内容

一、Bug与Debug

1.Bug的产生

image.png

2.前端Debug的特点

  • 多平台：浏览器、Hybrid、Nodejs、小程序、桌面应用
  • 多环境：本地开发环境、线上环境
  • 多工具：Chrome devTools、Charles（抓包工具）、Whistle、vConsole
  • 多技巧：Console、BreakPoint、sourceMap、代理

二、Chrome devTools

1.Elements

动态修改元素和样式

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

image.png

可以使用以下两种方式强制激活伪类

  • 选中具有伪类的元素，点击:hov
  • DOM树右键菜单，选择Force State

2.Consloe

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

image.png

3.Source

image.png

  • 区域1:页面资源文件目录树
  • 区域2︰代码预览区域
  • 区域3: Debug 工具栏,从左到右依次为
    • 暂停(继续)
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活(关闭)所有断点
    • 代码执行异常处自动
  • 区域4:断点调试器

4.NetWork

image.png

  • 区域1：控制面板
  • 区域2：过滤面板
  • 区域3：概览区域
  • 区域4：Request Table面板
  • 区域5：总结面板
  • 区域6：请求详情面板

5.Application

image.png Application面板展示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

6.Performation

image.png

  • 区域1:控制面板
  • 区域2:概览面板
    • FPS:每秒帧数
    • CPU:处理各个任务花费的时间
    • NET:各个请求花费时间
  • 区域3∶线程面板
    • Frames:帧线程
    • Main:主线程，负责执行Javascript,解析HTML/CSS,完成绘制
    • Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
  • 区域4:统计面板

7.Lighthouse

image.png

  • Largest Contentful Paint (LCP)
    • 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
  • First Input Delay (FID)
    • 首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
  • Cumulative Layout Shift (CLS)
    • 累积布局偏移，测量视觉隐定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

三、移动端H5调试

1.真机调试

  • iOS

    • 使用Lightning 数据线将iPhone与 Mac相连
    • iPhone开启Web检查器(设置-->Safari-->高级-->开启Web检查器)
    • iPhone使用Safari浏览器打开要调试的页面
    • Mac打开Safari浏览器调试(菜单栏>开发> iPhone设备名>选择调试页面)
    • 在弹出的Safari Developer Tools中调试

  • Android

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

2.VConsole

image.png

  • 日志(Logs): console.log,info,error
  • 网络(Network): XMLHttpRequest,Fetch, sendBeacon
  • 节点(Element): HTMIL 节点树
  • 存储(Storage): Cookies,LocalStorage,SessionStorage
  • 手动执行JS命令行
  • 自定义插件

3.使用代理工具调试

原理： 用电脑作为代理服务器，手机通过HTTP代理连接到电脑，这时手机上的请求都会经过代理服务器。

常用的代理工具：

image.png

四、Nodejs调试

1.Inspector Protocol + Chrome Devtool

  • 执行命令 node —inspect=8888 index.js
  • chrome浏览器访问服务
  • 点击绿色node图标打开node 调试面板(在 chrome:/linspect/#devices 中配置network target)
  • 在node调试面板中使用断点调试

2.Inspector Protocol + VSCode

  • VS Code点击运行
  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈

五、常用开发调试技巧

1.线上即时修改Overrides

  • 在Sources里面的Overrides

  • 点击Select folders for Overrides，选择一个本地的空文件目录

  • 允许授权

  • 在page中修改代码，修改完成后保存

  • 打开devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改

image.png

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

image.png

3.启用本地source map

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

4.使用代理工具mock数据

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

image.png

以上就是我总结的第八节课的内容了，内容有疏漏还请见谅，有错误还请指正。今天的内容很实用啊，希望我们一起进步，顺利结营！

avatar
文章
阅读
粉丝