测试人员必备技能——如何利用F12快速定位前后端BUG

前言

在测试人员测试过程中经常需要通过抓包来区分一些前后端的Bug，特别是Web端的测试，利用浏览器中的F12开发者选项，就能进行网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。

F12开发者工具面板

用Google打开一个页面，点击键盘右上方的F12按钮，弹出F12开发者工具面板。如下：

1. 元素****（Elements）：****查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
2. ****控制台（Console）：****控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
3. ****源代码（Sources）：****该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
4. ****网络（Network）：****从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），测试人员重点要掌握该功能模块。

Network面板

1. 窗格功能

• ：点击后进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
• ：默认开启，会在面板进行网络连接的信息记录，关