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

86封
82 阅读5分钟

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

本堂课重点内容

  • Chrome DevTools

详细知识点介绍

Bug 与 Debug

前端 Debug 的特点

  • 多平台

    • 浏览器、Hybrid、NodeJS、小程序、桌面应用等

  • 多环境

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

  • 多工具

    • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...

  • 多技巧

    • Console、Breakpoint、sourceMap、代理等

Chrome DevTools

Elements

动态修改元素和样式

  • 点击 .cls 开启动态修改元素的 class

  • 输入字符串可以动态的给元素添加类名

  • 勾选/取消类名可以动态的查看类名生效效果

  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览

  • Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则

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

    • 选中具有伪类的元素，点击 :hov

    • DOM 树右键菜单，选择 Force State

Console

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table

    具像化的展示 JSON 和 数组数据

  • console.dir

    通过类似文件树的右式展示对象的属性

  • 占位符

    给日志添加样式，可以突出重要的信息

    • %s：字符串占位符

    • %o：对象占位符

    • %c：样式占位符

    • %d：数字占位符

Sorce Tab

  • 页面资源文件目录树

  • 代码预览区域

  • Debug 工具栏

    • 暂停（继续）

    • 单步跳过

    • 进入函数

    • 跳出函数

    • 单步执行

    • 激活（关闭）所有断点

    • 代码执行异常处自动

  • 断点调试器

  • 展开 Scope 可以查看作用域列表〈包含闭包)

  • 展开 Call Stack 可以查看当前 javaScript 代码的调用栈

压缩后的代码如何调试

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

  • Source Map

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

    • 英文，表示源码及压缩代码的位置关联

    • 逗号，分隔一行代码中的内容

    • 分号，代表换行

Network

  • 控制面板

  • 过滤面板

  • 概览区域

  • Request Table 面板

  • 总结面板

  • 请求详情面板

Application

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

  • Local Storage

  • Session Storage

  • IndexedDB

  • Web SQL

  • Cookie

点击左侧 Application 下的 Stroage 面板中的 Clear Site Data 可以清楚网页的本地存储数据

Performance

  • 控制面板

  • 概述面板

    • FPS：每秒帧数

    • CPU：处理各个任务花费的时间

    • NET：各个请求花费时间

  • 线程面板

    • Frames：帧线程

    • Main：主线程，扶着执行 Javascript ，解析 HTML/CSS 完成绘制

    • Raster：Raster 线程，负责完成某个 layer 或者某些块（tile）的绘制

  • 统计面板

Lighthouse

核心 Web指标

  • Largest Contentful Paint (LCP)∶最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生

  • First Input Delay (FD)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短

  • Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少

移动端 H5 调试

真机调试

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,LocalStorage, SessionStorage

  • 手动执行 JS 命令行

  • 自定义插件

使用代理工具调试

原理：

  • 电脑作为代理服务器

  • 手机通过 HTTP 代理连接到电脑

  • 手机上的请求都经过代理服务器

常用代理工具：

Charles、Fiddler、spy-debugger、Whistle

常用开发调试技巧

线上及时修改 Overrides

  1. 打开 Sources 面板下的 Overrides

  2. 点击 Select folders for Overrides。选择一个本地的空文件夹目录

  3. 允许授权

  4. 在 page 中修改代码，修改完成后 command + s 保存

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

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

启用本地 source map

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

课后个人总结

这节课老师为我们讲解了作为一个前端工程师，在开发、网络、浏览器、手机、 PC等方面当我们遇到 bug，如何通过调试工具找到并处理这些 bug。同时还教会了我们使用Chrome Devtools，它是我们前端会经常使用的工具，学习更多的小窍门也很有意义。

引用参考

第四届字节跳动青训营「前端必须知道的开发调试知识」课程

avatar
文章
阅读
粉丝