bug 定位方法

简介
- [1. Bug 定位的核心价值](#1. Bug 定位的核心价值)
- [2. bug 定位思维导图](#2. bug 定位思维导图)
[Bug 分类与展现层](#Bug 分类与展现层)
- [1. 常见 bug 分类](#1. 常见 bug 分类)
- [2. Bug 展现层要素](#2. Bug 展现层要素)
[技术架构层次与 MVC 分析法](#技术架构层次与 MVC 分析法)
- 各层常用分析方法
[bug 定位方法](#bug 定位方法)
- [1. Web Bug 分析方法(面板：FN + F12)](#1. Web Bug 分析方法(面板：FN + F12))
- [2. App Bug 分析方法](#2. App Bug 分析方法)
- [3. 性能 bug 分析方法](#3. 性能 bug 分析方法)

简介

Bug 定位是软件测试的关键环节，旨在识别和解决软件缺陷。掌握这一技能不仅能提升个人技术能力，还能对团队和项目产生积极影响。

常见 bug 分类

为什么需要掌握 bug 定位
- 提交 bug 时候追加更多有用信息，方便研发更快的解决问题。
- 分析 bug 形成原因，进行溯源并建立特征进行批量追踪。

视图层 (View) ：Web UI (HTML/CSS)、App Activity/View。
- 运行平台、根据条件测试，查看是否存在界面错位 、样式错误 、按钮点击无反应 、数据显示为 0 或空白等问题，存在则根据当前的链路进行分析那个环节存在问题
控制器层 (Controller) ：Web (Chrome DevTools)、App (Dalvik/ART/Objective-C Runtime)。
- 运行平台、根据条件测试，查看是否存在 JS 报错 、App 崩溃 (Crash) 、业务流程中断 、逻辑判断错误等，存在则根据当前的链路进行分析那个环节存在问题
模型层 (Model) ：数据传递方式 (HTTP/TCP/RPC/串口)，形式包括 JSON/XML/Binary。
- 运行平台、根据条件测试，查看是否存在 接口请求失败 、返回数据错误 、网络超时 、数据格式解析失败等，存在则根据当前的链路进行分析那个环节存在问题

View 层分析
- 核心依赖：HTML、CSS、JS。
- 工具使用：利用 Chrome 开发者工具的 Elements 面板查看元素位置和文字信息，使用 Styles 和 Computed 面板查看具体样式参数和布局。
Controller 层分析
- Console：查看 JS 输出与报错信息（如 CORS 跨域错误）。
- Source：对 JS 代码进行 Debug 断点调试。
Model 层分析
- 数据传递分析：使用 Chrome Network 面板查看请求。
- 代理工具：Fiddler、Charles、mitmproxy。
- 网络协议层：Tcpdump、Wireshark 抓包分析。

1. View 层分析
- 关注点：UI 界面交互、UX/UE 用户体验。
- 工具：使用 uiautomator dump 进行 UI Diff 分析，识别数据丢失或页面展示异常（如持仓页面市值显示为 0）。
1. Controller 层分析
- 日志分析：通过 logcat 分析 App Runtime 日志，定位 Crash 堆栈信息（如 NullPointerException）。
1. Model 层分析
- 链路分析：
  - 代理抓包：Charles、Fiddler、mitmproxy。
  - 嗅探抓包：Wireshark、tcpdump。
1. Android profiler 网络分析
- 性能监控：使用 Android Profiler 监控 CPU、内存、网络和电池，分析网络请求的时序和大小。

1. H5 性能分析
- 时间线分析：分析 Navigation Timing API 的各个阶段（DNS 查询、TCP 连接、Request、Response、Processing、onLoad 等）。
- 工具：利用 Chrome 控制台执行 JSON.stringify(window.performance.getEntries()) 获取详细性能数据。
1. 代码剖析与覆盖率
- 代码剖析：使用 Profiler 工具生成火焰图 (Flame Chart)，直观地看到哪些函数调用耗时最长，从而找到性能瓶颈。
- 代码覆盖率：使用 JaCoCo 等工具分析测试用例对代码的覆盖程度，找出未被测试到的逻辑分支。