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

余念难安
90 阅读6分钟

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

Chrome DevTools

动态修改元素和样式

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

image.png

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

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

image.png

console

  • console.log
  • console.warn：输出黄色警告信息
  • console.error：输出红色错误信息
  • console.debug：输出蓝色验证信息
  • console.info：与console.log相似

image.png

  • console.table：具像化的展示JSON和数组数据

image.png

  • console.dir：通过类似文件树的方式展示对象的属性
  • 占位符：给日志添加样式，可以突出重要的信息。%s字符串占位符；%o对象占位符；%c样式占位符；%d数字占位符

image.png

  • console.time/console.timeEnd：让WEB开发人员测量一个JavaScript脚本程序执行消耗的时间。

Sources

  • 区域一:页面资源文件目录树
  • 区域二：代码预览区域
  • 区域三：Debug工具栏，从左到右依次为：
    • 暂停（继续）
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活（关闭）所有断点
    • 代码执行异常处自动
  • 区域四：断点调试器

image.png

Break Point与Watch

如何进入断点调试界面？

最简单的方法，就是在我们的代码中想调试的位置，加上debugger，之后我们的网页就会变灰，就代表进入了调试状态或者说暂停状态。

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

image.png

Scope与Call Stack

  • 展开Scope可以查看作用域列表（包含闭包）
  • 展开Call Stack可以查看当前JavaScript代码的调用栈

image.png

XHR/fetch Breakpoints与DOM Breakpoints

  • XHR/fetch Breakpoints界面中可以勾选上所有的请求或者想要断点的请求，勾选之后，一旦程序发起请求，那么就会记录断点
  • DOM Breakpoints表示HTML中某一个元素发生变化时，我们会记录一个断点

image.png

压缩后的代码如何调试

前端代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’，‘b’等替换，整体变得不可阅读，那么压缩后的代码如何调试呢？

image.png

我们在压缩代码时，可以在配置文件中加入devtool:'source-map'字段，这样我们在调试时会自动映射到源代码上。

image.png

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

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

image.png

NetWork

  • 区域一：控制面板
  • 区域二：过滤面板
  • 区域三：概览区域
  • 区域四：Request Table面板
  • 区域五：总结面板
  • 区域六：请求详情面板

image.png

Application

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

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

image.png

Performance

  • 区域一：控制面板
  • 区域二：概览面板
    • FPS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费时间
  • 区域三：线程面板
    • Frames：帧线程
    • Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制
    • Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制
  • 区域四：统计面板

image.png

Lighthouse

核心Web指标：

image.png

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

image.png

移动端H5调试

真机调试

IOS：没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器

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

Android：直接使用手机扫码查看，体验更佳

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

VConsole

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

image.png

image.png

使用代理工具调试

原理:

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

以harles为例:

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

默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书

常用代理工具

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

NodeJS调试`

Inspector Protocol+Chrome Devtool

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

常用开发技巧

线上即时修改

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

image.png

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

image.png

启用本地Source Map

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

image.png

使用代理工具Mock数据

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

image.png

avatar
文章
阅读
粉丝