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

麦麦脆汁鸡
86 阅读8分钟

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

一. 前端的bug

1. bug的产生

1944年世界上第一台计算机马克1号诞生，在世界上第一位女程序员格蕾丝-霍普接手下，顺利改造成马克二号;

1946年的一天，霍普敲代码的时候发现计算机发生了故障，就在马克二号的继电器触点里，找到了一只被夹扁的小飞蛾，正是这只小虫子卡住了机器的运行。

霍普顺手将飞蛾夹在工作笔记里，而备注的意思是臭虫，正是这一奇怪的称呼，奠定了Bug这个词在计算机世界的地位，bug也变成无数苦逼工程师的噩梦。这就是第一个bug的诞生。

2. 前端bug的特点

  1. 多平台：浏览器、nodejs、桌面应用
  2. 多环境：本地开发环境、线上开发环境
  3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
  4. 多技巧：Console、BreakPoint、SourceMap、代理

二. Chrome devTools

1. elements

可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑。

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

\

2. console

一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互。

  • 组合快捷键按键：
    • Windows: Control + Shift + J
    • Mac: Command + Option + J
  • 日志技巧：
    • console.log：正常日志。
    • console.warn ：向 Web 控制台输出一条警告信息，并且只有在浏览器配置warning可见的时可以显示。
    • console.error ：向 Web 控制台输出一条错误消息，并且只有才浏览器配置了errors才可以显示。
    • console.debug：输出“调试”级别的消息，并且在浏览器中只有你配置了debug才可以显示。
    • console.info：向web控制台输出一个通知信息，并且只有在浏览器配置info可见的时可以显示。
    • console.table：具象化展示json和数组数据，把传递给它的输入格式化为表格，然后在表格表示之后记录输入对象。
    • console.dir：在控制台中显示指定JavaScript对象的属性，并通过类似文件树样式的交互列表显示。

3. sources

该面板中主要用来进行一些调试和查看源码。

  • 区域1：页面资源文件目录树。
  • 区域2：代码预览区域。
  • 区域3：Debug工具栏。
    • 暂停(继续)
    • 单步跳过
    • 进入函数
    • 跳出函数
    • 单步执行
    • 激活(关闭)所有断点
    • 代码执行异常处自动
  • 区域4：断点调试器。

  • watch：观察变量值的变化。
  • breakpoints：存放所有调试断点的列表。
  • scope：查看作用域列表（包含闭包）。
  • call stack：查看当前 javaScript 代码的调用栈。
  • sourcemap：能够让浏览器的调试面版将生成/压缩后的代码映射到源码文件当中。

4. network

在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。能够查看接口串行、并行；能够进行网络设置模拟弱网环境...

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

5. memory

Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。

6. application

记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。

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

7. performance

在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。有人会问，这个跟上面的 Network 有什么区别呢，上面也能显示耗时信息。在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

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

8. lighthouse

审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看 PageSpeed Insights 来获得更多的页面加载建议。

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

二. 移动端 H5 调试

1. 真机调试

1.1. iOS真机调试

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

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

1.2. Android真机调试

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

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

2. vconsole

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

3. 代理调试

原理：

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

以 Charles 为例：

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

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

4. 常用工具

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

四. NodeJs 应用调试

1. Inspector Protocol + Chrome Devtool

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

2. Inspector Protocol + VS Code

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

五. 常用开发调试技巧

1. 线上即时修改Overrides

我们平时在 Source 面板在线修改调试代码，会实时更新效果，但浏览器一刷新之前修改的全部恢复原样，这样子调试代码效率就很低，只能浏览器调试改点，代码跟着改点很麻烦。为了解决这个问题，我们可以使用 Overrides 保存线上修改后的文件，并能清晰看出改动了哪些地方，最后修改代码也方便。

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

2. 运用代理解决开发阶段的跨域问题

3. 启用本地Source Map

线上环境的代码是打包压缩的，且没有 source map 文件，排查定位问题不方便，这时可以使用 Charles，配置 Map Local，将线上环境代理到本地，运行本地文件，本地有 source map就能快速定位到问题。

4. 使用代理mock数据

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