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

24 阅读3分钟

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

maiami.jpg

PC web端

一、 前端Debug的特点

  • 多平台:浏览器、Hybrid、NodeJs、小程序、桌面应用等.
  • 多环境:本地开发环境、线上环境
  • 多工具:Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等
  • 多技巧:Console、BreakPoint、sourceMap、代理等

二、 前端Debug的方式

1. 浏览器动态修改元素和样式

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

伪类强制激活的两种方式:

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

image.png

2. Console

  • console.log:输出一条信息
  • console.warn:输出警告信息,信息最前面加一个黄色三角
  • console.error:输出错误信息到控制台
  • console.debug:输出“调试”级别的消息
  • console.info:输出一条信息
  • console.table:具像化的展示 JSON 和 数组数据
  • console.dir:通过类似文件树的方式展示对象的属性
  • 占位符给日志添加样式,可以突出重要的信息%s: 字符串占位符,%o: 对象占位符: %c: 样式占位符,%d: 数字占位符

3. Sorce Tab

  • 区域1: 页面资源文件目录树
  • 区域2: 代码预览区域
  • 区域3: Debug 工具栏

从左到右依次为

  • 暂停 (继续)
  • 单步跳过
  • 进入函数跳出函数
  • 单步执行
  • 激活 (关闭) 所有断点
  • 代码执行异常处自动
  • 区域4: 断点调试器

image.png

4. NetWork

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

image.png

image.png

5. Application

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

  • Local Storage 本地存储
  • Session Storage 会话存储
  • IndexedDB
  • Web SQL
  • Cookie

6. Performancee

可以通过这个工具去找到页面卡顿的原因

示例:googlechrome.github.io/devtools-sa…

image.png

  1. Lighthouse 怎么说呢。。优化神器

image.png

移动端调试

IOS

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

没有 iPhone 设备可以在 Mac Appstore 安装 Xcode 使用其内置的ios 模拟器

Android

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

直接使用手机扫码查看,体验更佳

通过代理工具调试

原理:

  • 电脑作为代理服务器
  • 手机通过 HTTP 代理连接到电脑
  • 手机上的请求都经过代理服务器

常用代理工具:

  • Charles:适合查看、控制网络请求,分析数据
  • Fiddler:与Charles类似,适合windows平台
  • spy-debugger:远程调试于机页面,抓包
  • Whistle:基于Node实现的跨平台Web 调试代理工具