擅用工具！产品经理快速定位Bug的小技巧

Kevin改变世界的点滴

共 2937字，需浏览 6分钟

· 2021-09-16

这是Kevin的第 908 篇原创，

持续日更，做产品经理的创业斜杠青年。

观察产品经理这类互联网从业者，你会发现他们使用的浏览器一定会选择用Google。除了极简的交互设计外，Chrome浏览器本身性能高、启动快、扩展插件多，可以屏蔽广告、和满足丰富的个性化需求。

而chrome浏览器里自带的CDT（Chrome develop tools）实际上也是做互联网产品经理必用的能力。比如网站站点、H5的测试、验收和用户问题收集，都可以用CDT完成产品的测试和问题定位。

在前端项目开发中，chrome浏览器颇受青睐。打开网站，点击F12，即可看到chrome开发者工具。我们可以借助chrome开发者工具进行网页调试，来查看网页html代码、css样式、http请求、运行js等。

▲ 在Chrome浏览器开发者模式面板

如上图是PMTalk在官网无法访问下，通过CDT调用的看板。开发者工具面板上包含了Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits面板。

在日常测试中，产品经理和测试通过 Network 面板能帮忙定位到80%问题，很多产品经理都不知道熟悉使用。但对于日常产品研发中，定位好问题可以大大缩小问题解决时间，因此成了使用最频繁的。

先简单介绍Chrome浏览器里，各面板的功能及使用说明如下：

Elements:

查找网页源代码，实时编辑DOM节点和CSS样式，修改的效果会立即显示在浏览器中，极大地方便了前端的调试。

▲ 社区CSS元素

Console:

输出开发过程中的日志信息，允许通过js命令行【console.log()】、【console.error()】输出操作日志

▲ PMTalk的console面板

Network:

从发起网页页面请求Request后，分析HTTP请求得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

PMTalk的network面板

在network中，4个重要的参数

Header：列出资源的HTTP头信息，包括请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。

Preview：预览面板，据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

response：比如在查询2021年到2020年的更新原创文章，在query string parameters 上查看前端的请求参数，发现传过去的参数正常，那结果显示的数据异常就一定是response的数据问题。

若H5页面缺少字段或计算有误，或者明显是后端报错信息，可在Network中定位接口返回信息，如下图，Headers的入参，查看XHR接口的Preview或Response的信息

Timing ：

这是产品经理经常会和开发同学讨论的问题，直观的是页面访问太慢、加载费时间。主要包含Request sent 和 Waiting(TTFB)。

Request sent：发起请求的时间。

Waiting(TTFB)：发起HTTP请求后从服务器接收到第一个字节时间，包含了TCP连接时间。

除开网络服务器问题、还有在开发过程中前端打包方式、资源加载方式都会影响速度。

如果请求很慢往往是在Waiting(TTFB)占用很多时间。每个公司对响应速度要求不一样，但如果超过500ms，给用户体现是比较慢，这是可以向后台开发人员反馈问题。

▲ 请求参数访问时间

在console下，信息标识读写有分4类。

最基本也是最常用的用法了，分别表示输出普通信息、错误信息、警示信息和提示性信息，且每个标识信息都有特定的图标和颜色标识。

通过network定位问题问题类型

产品研发中，开发会分为前端、后台，在产品设计过程中会分为交互设计、和UI设计2类。所以能够定位清楚问题，至少增加了沟通效率，把前端的问题交给前端、把后台的问题交给后台。

下面三个方法在console network上去判别问题类型

1.请求接口url是否正确

如果请求的接口url错误，为前端的bug

2.传参是否正确

如果传参不正确，为前端的bug

3.请求接口url和传参都正确，查看响应是否正确

如果响应内容不正确，为后端bug

4.也可以在浏览器控制台输入js代码调试进行分析

如下图是在network上的XHR上，在preview上查看传输字段，验证是否接口报错。

▲ 参数传输错误

还有可以通过status代码来判断前端、后台、还是网络问题。这里常用的根据HTTP状态码有

▲ HTTP状态码

测试H5页面时，也可在调试器的Network中直接查看http返回的错误码，来判断问题发生的原因。如下图的Status报502，可断定是错误网关（服务器接收到来自上游服务器的无效响应）

下面我收集了常用的HTTP状态码，产品经理和测试通过状态码来做前后端问题定位是最快的。

200("OK")
一切正常。实体主体中的文档（若存在的话）是某资源的表示。
400("Bad Request")（前端问题）
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。
500("Internal Server Error")（后端问题）
服务器方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
301("Moved Permanently")（前端问题）
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码，也就是重定向
404("Not Found") 和410("Gone")（网络问题）
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。
409("Conflict")（前端问题）
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。