身在宝山不识宝，同样你认识到Chrome的F12开发者工具（亦测试工具）的强大，并利用好了吗？今天笔者就细细谈谈，怎么把Chrome的F12开发者工具应用到WEB应用的测试中。
1、首先，我们测试web应用时，建议F12把开发者工具打开，然后切换到Console（控制台），在页面操作或访问出现错误，都能在这里看到。如图：
出现错误后，如上图中的JS错误，我们可以点击带下划线的链接，定位到具体的JS代码错误处，如图：
这样我们根据错误提示，是不是对错误原因一目了然了？只要我们在测试中，把对应的截图附加到bug描述中，开发人员也能非常快的定位到问题原因并进行修改。这样既能说明我们专业，相信开发也很高兴配合你进行bug的修复，何乐不为。
2、如果一个web页面打开很慢，我们应该怎么查看哪里出了问题呢，这是我们可以切换到Network，然后打开（刷新）所要测试的网页URL来查看页面的加载情况。如图：
- Name：请求文件名称
- Method：方法（常见的是get post）
- Status：请求完成的状态
- Type：请求的类型
- Initiator：请求源也就是说该链接通过什么发送
- Size：下载文件或者请求占的资源大小
- Time：请求或下载的时间
- Timeline：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时等信息）
上面为加载的总体情况，下面为所选区间内的页面元素加载情况，底栏为总体加载情况说明。
上面图中：
可以选择时间区间对页面元素的加载情况进行查看，并可以按CSS、JS等元素分类筛选；
在页面具体页面加载情况，可以根据status（状态）、type（类型）、Size（大小）或Time（加载时间）进行排序；
所选区间共涉及68个页面元素请求，总页面共78个页面元素，加载数据共611KB，加载时间共计1.8min。
3、如果我们的一个页面执行效率不高，我们必须要搞清楚导致页面性能低下的原因，可以使用Timeline，它会详细检测出在Web应用加载的过程中时间花费情况的概览，包括下载资源、处理DOM事件、页面布局渲染、向屏幕绘制元素等。你可以通过分析Timeline得到的事件、框架和实时的内存用量，找出应用的性能问题。
其中summary中各色扇形图代表的意思：
- 蓝色(Loading)：网络通信和HTML解析
- 黄色(Scripting)：JavaScript执行
- 紫色(Rendering)：样式计算和布局，即重排
- 绿色(Painting)：重绘
- 灰色(other)：其它事件花费的时间
- 白色(Idle)：空闲时间
在显示的记录中，浏览器也会为在检测过程中发现的一些可能导致性能问题的过程进行标注，，可能会出现一些红色的区块段，这些红色的区块段表明，在对应的时间上执行的事件可能存在性能问题，，事件区块的右上角会出现红色的小三角，点击当前区块，在下面的Summary概要区域内会给出详细的警告内容以及脚本可能出现问题的行数，如下图，浏览器提示“强制回流可能会导致性能瓶颈”：
4、Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化，简单来说它就是Timeline的数字化版本。
- Collect JavaScript CPU Profile 监控函数执行期花费的时间
- Take Heap Snapshot 为当前界面拍一个内存快照
- Record Heap Allocations 实时监控记录内存变化(对象分配跟踪)
在确定使用什么性能分析工具(profile)之前，你要知道是什么导致程序的瓶颈，这一点很重要。如：如果你看到在Timeline上有很多黄色的部分，那可能是脚本产生的问题，可以选择JavaScript CPU 分析工具；而Take Heap Snapshot的选项可以让我们在怀疑点之前和之后获取内存的快照，得到当时程序中活动的Javascript对象（以及DOM节点）在内存中的分布。
5、Audits面板会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另一类是界面性能。
这里面还有其它的一些面板没有介绍，作为测试人员主要用到介绍的前两个面板功能，如果你需要了解更多，就需要自己去探索了。