前端与调试 ｜ 青训营笔记

Artemis
106 阅读5分钟

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

前言

今天的内容是有关开发调试知识的，在我们日常项目中遇到bug是常有的事情，所以知道这些调试技巧对于我们来说还是非常重要的。

正文

1. Debug的特点

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

2. Chorme DevTools

2.1 动态修改元素样式

  • 点击.cls 开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则
  • 可以用以下2种方式强制激活伪类
  1. 选中具有伪类的元素．点击:hov
  2. DOM树右键菜单.选择Force State

2.2 Console

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

2.3 Source Tab

image.png

  1. 区域1:页面资源文件目录树

  2. 区域2∶代码预览区域

  3. 区域3:Debug工具栏

    从左到右依次为

  • 哲停（继续)
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活（关闭)所有断点
  • 代码执行异常处自动
  1. 区域4:断点调试器
2.3.1 Break Point & Watch
  • 使用关键字debugger 或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
2.3.2 Scope & Call Stack
2.3.3 压缩后代码的调试——Source Map

前端代码天生具有"开源"属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码整体变得不可阅读。那么压缩后的代码如何调试呢?
mappings宁段存储了源文件和Source Map 的映射

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容。
  • 分号，代表换行。

ps：source map标准可以在网上查阅

2.4 NetWork

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

2.5 Application

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

  • Local Storage
  • Session Storage
  • lndexedDB
  • web SQL
  • Cookie
    点击左侧Application下的 Stroage面板中的Clear Site Data可以清楚网页的本地存储数据

2.6 Performance

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

3. 移动端 H5 调试

3.1 真机调试

3.1.1 iOS
  1. 使用 Lightning 数据线将iPhone与 Mac相连
  2. iPhone开启Web检查器（设置-> Safari ->高级->开启 Web检查器)
  3. iphone使用Safari浏览器打开要调试的页面
  4. Mac打开Safari浏览器调试(菜单栏—>开 了->选择调试页面)
  5. 在弹出的Safari Developer Tools 中调试
    ps:没有iPhone 设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器
3.1.2 Android
  1. 使用USB数据线将手机与电脑相连
  2. 手机进入开发者模式，勾选USB调试，并允许调试
  3. 电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/#devices并勾选 Discover USB devices选项
  4. 手机允许远程调试,并访问调试页面
  5. 电脑点击inspect 按钮
  6. 进入调试界面
    ps: 直接使用手机扫码查看，体验更佳

3.2 VConsole

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

3.3 使用代理工具调试

原理:

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

3.4 常用代理工具

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

4. NodeJs调试

4.1 Inspector Protocol + Chrome

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

4.2 Inspector Protocol +Vs Code

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

5. 常用开发调试技巧

5.1 线上即时修改Overrides

  1. 打开Sources面板下的的
  2. 点击Select folders for Overrides.选择一个本地的空文件夹目录 3．允许授权
  3. 在page中修改代码，修改完成
  4. 打开devTools ，点击右上角的三个小点-> More tools ->Changes，就能看到所有修改了

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

5.3 启用本地source

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

5.4 使用代理工具Mock数据

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

写在结尾

这节课的知识还是非常多的，并且也非常有用，希望可以掌握住，在日常项目开发中也多多用到，加油！

avatar
文章
阅读
粉丝