前端必须知道的开发调试知识 | 青训营笔记

北冥_有鱼
114 阅读5分钟

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

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

1.Bug与Debug

Bug的产生

img

前端Debug的特点

  • 多平台

    • 浏览器、nodejs、小程序、桌面应用…

  • 多环境

    • 本地开发环境、线上环境…

  • 多工具

    • chrome、devTools、Charles、Spy-Debugger、vConsole…

  • 多技巧

    • Console、BreakPoint、sourceMap、代理…

2.Chrome DevTools

动态修改元素和样式

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

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

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

Console

  • console.log 日志打印 灰色是字符串 蓝色数字number
  • console.warn 输出警告信息（黄色）
  • console.error 输出错误信息（红色）
  • console.debug 调试（蓝色）
  • console.info info函数里放的是调试信息
  • console.table 具象化展示json和数组数据
  • console.dir 展示节点的属性
  • 占位符 %S 字符串占位符 %O 对象占位符 %C 样式占位符 在字符串之前添加样式，更加突出主题信息

Sorce Tab

在这里插入图片描述

Break Point 与Watch

  • 使用关键字debugger或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover 变量可以查看变量的值
  • 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

Scope 与Call Stac

Source Map

mappings字段存储了源文件和source Map的映射

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

NetWork

## Chrome DevTools--Performance面板

Application

img

Performance

014.png

运用实例：googlechrome.github.io/devtools-sa…

页面卡顿==>查看FPS指标==>寻找性能瓶颈==>优化代码

Lighthouse

核心Web指标

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

3.移动端H5调试

真机调试

iOS

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

Android

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

VConsole

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

使用代理工具调试

原理:

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

以Charles为例:

  1. 安装Charles
  2. 查看电脑IP和端口
  3. 将IP、端口号填入于机HTTP代延
  4. Charles允许授权
  5. 使用SwitchHosts!软件给Mac电脑配Hosts
  6. 手机访问开发环境页面

常用代理工具

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

4.Node JS调试

Inspector Protocol + Chrome Devtool

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

Inspector Protocol + VS Code

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

5.常用开发调试技巧

线上即时修改Overrides

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

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

在这里插入图片描述

启用本地source map

在这里插入图片描述

使用代理工具 Mock数据

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

小黄鸭调试大法

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。------《程序员修炼之道》

avatar
文章
阅读
粉丝