浏览器F12调试器定位系统前后端bug

做测试的小伙伴可能用过httpwatch，firebug，fiddler，charles等抓包（数据包）工具，但实际上除了这些还有一个简单实用并的抓包工具，那就是浏览器的F12调试器。

httpwatch，firebug都是浏览器的插件，需要额外下载，fiddler，charles也需要额外下载安装包另行安装，但是浏览器F12调试器却是所有浏览器内置的调试器，不需要大家额外去安装的，打开它只是一个顺手的事情，而且它提供的功能也比较强大，因此如果在开发或者测试web系统的时候，我们可以先考虑使用这个调试器去抓包，来调试系统或者用它来协助定位系统中的bug。

下文中我准备了几个小案例来说明这个工具的用法以及使用它的便捷性。

废话不多说，我们首先来一睹它的阵容，以火狐为例，打开浏览器，再按F12就可以打开调试器，如下图:

注意：不同的浏览器，调试器在ui上可能会有少许差异，但基本功能都差不多，掌握了某种浏览器调试器的用法后，其他也很容易上手。

下面我们通过几个小案例来说明我们测试人员在系统测试中有哪些场景能够应用上调试器。

场景：在对web系统进行测试时，如何分析一个bug是来自于前端还是后端。

 首先说一下，

为什么找到网站中的bug后还要去分析它到底是属于前端bug还是后端bug，三个原因：

1.在一些公司，一个系统可能是由前端团队和后端团队共同开发出来的，因此在分配bug的时候，不同模块的bug一般都会指派给对应的负责团队乃至于个人