如何定位bug前后端（怎么定位bug前后端）

功能测试必备:抓包工具的作用及常用抓包工具有哪些?

1、浏览器自带开发者工具，例如，谷歌浏览器的开发者工具。Fiddler：Windows系统中非常流行的抓包工具。Charles：也是流行的抓包工具，尤其是在Mac电脑上用的是最多的。

2、常用抓包工具主要包括以下几种：浏览器自带开发者工具：谷歌浏览器的开发者工具：这是最常用的抓包工具之一，内置于谷歌浏览器中，无需额外安装。它提供了丰富的网络请求和响应分析功能，可以帮助开发人员和测试人员快速定位问题。

3、抓包常用工具使用简介如下： Fiddler 适用平台：Windows。 主要特点：免费、易用，适合移动端开发调试和测试。 使用方法： 确保移动端与Fiddler主机处于同一网络下。 开启远程连接并设置代理。 对于HTTP协议，直接进行抓包。 对于HTTPS协议，需在移动端卸载配置证书，以确保能抓取https数据。

开发调试秘籍--前端Debugger实战

基础篇 首先，你需要具备扎实的CSS和javascript基础，以及vue/React等现代框架的经验。课程内容将详尽解析如何熟练使用调试工具，定位并修复那些令人头疼的bug。学会快速定位问题，提取关键信息，甚至在面对无提示错误时，也能运用二分注释法找到症结所在。

首先，您将掌握Chrome DevTools的强大调试工具。课程内容包括：学会使用Chrome DevTool打开和调整调试工具面板，如元素、控制台、源代码和网络面板。理解断点功能，以及如何利用控制按钮进行代码执行控制。通过HTTP协议理解浏览器与服务器交互过程，观察geek.itheima.net/的请求和响应信息。

前后端通信问题可通过 HTTP 状态码（4XX、5XX）识别。状态码4XX表示前端调用API出现问题，状态码5XX则为后台问题，需要提供关键信息给后端协助解决。通过网络面板，可以分析报错原因并快速定位问题所在。二分注释法是一种有效定位 Bug 的方法，通过删除代码或错误代码来缩小问题范围。

在“控制台”面板中，开发者可以查看和控制程序的运行状态，打印变量或执行代码。在“源代码”面板中，开发者可以设置断点，让代码在断点处暂停执行，以便深入分析代码。最后，在“网络”面板中，开发者可以查看HTTP请求和响应信息，以判断前后端通信是否正常。

如何利用charles来判断bug的前后端

1、在测试工作中，需要抓包工具帮助定位前后端问题，当看到前端页面出现bug后，需要进一步判断是前端问题还是后端问题。同时可以利用抓包工具进行小规模的安全测试，或者使用抓包工具构造一些难以测试的测试场景，例如：弱网测试等。本篇说下抓包工具作用以及常用抓包工具有哪些。

2、双方各自打开自己的Charles，B机打开Charles设置项proxy Proxy Settings， 然后勾选Enable transparent HTTP proxying ，此时B机的Charles监听的是默认的8888端口。

3、在配置charles时，有两种运行方式：直接代理系统中的全部请求或通过指定端口代理。直接代理系统请求可能导致一些麻烦与干扰，因此推荐通过指定端口代理，并关闭系统级别的代理（如在MacOS上）。设置完成后，通过switchyOmega等工具将浏览器请求代理至charles端口即可。

4、通过抓包我们可以判断Bug是归前端还是归后台，特别是开发在前后端分离后，测试对于Bug的前后端指派需要更精准，这就要求我们能够通过抓包分析Bug的前后端归属，那么可以通过抓包工具，确实是数据传递问题还是前端显示的问题。

5、那么这样情况该怎么办？一句话，没有接口文档很难搞，抓包看参数，先保证接口通过性验证，然后从开发和产品获取信息，决定对那些进行验证。再说下怎么判断bug是前后端谁的问题？接口请求参数有问题找前端，返回参数有问题先分析下具体问题，一般是找后端（常见的40X/50X），路径或者是服务器的问题。

测试人员如何判断是前端的bug还是后端的bug

当我们发现一个bug，并不确定这个bug属于前端还是后端，可以查看后端服务的日志，复现bug时，查看日志中有没有相关信息。基本可以认为，如果日志没有输出，很可能这个功能并没有与后端交互，也就不存在后端的问题。反之，如果日志有输出，可以进一步查看有无错误日志信息，进一步分析。

可以分析是在哪个节点引发的Bug，从而判断是前端还是后端问题。比如，前端发送请求是，数据组装有问题，导致后端返回报错，这个是属于前端问题。而如果前端发送请求数据没问题，后端返回数据不对或者报错，可以判断为后端问题。

样式是前端问题，数据错误大多数是后端问题。