观察产品经理这类互联网从业者，你会发现他们使用的浏览器一定会选择用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")（前端问题）
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
网友评论