本文章转载于搜狗测试
chrome浏览器有很多N×闪闪的插件，比如Proxy SwitchySharp、Awesome Screenshot、AdBlock等，还有一些插件还会给我们的测试工作带来便利，比如jsonview、EyeDroper、MeasureIt等，除此之外chrome内核还自带了一款功能强大的开发者工具，今天来说说chrome开发这工具的一些常用的而且能帮到我们测试工作的功能。
Elements：
这应该是最常用的功能了吧，通过开发者工具左上角的放大镜标志，查找页面元素的html代码位置：
应用场景：页面某处显示异常（链接错误、图片错误等）时，可以定位是否是代码写法错误。
network：
chrome开发者工具集成的http抓包工具，可以用来获取当前页面的所有http请求，功能与fiddler类似；
优势：
1、轻量级
2、只抓当前页面的请求
3、支持任何代理下抓包
4、支持过滤器
5、支持精简模式；
使用场景：
1、分析页面内异步请求的正确性
2、分析http接口的正确性；
Sources：
Sources，顾名思义，是当前页面的文件，这里文件指js、css等页面引入的脚本；
优势：
1、展示当前页面内的js脚本；
2、可断点调试；
使用场景：
1、页面动态功能异常时，可以通过找到实现动态功能的代码，断点调试，来定位问题；
2、页面显示异常时，查找页面是否有被注入恶意js代码；
Resources：
常用的几项如下，
使用场景：
1、页面内容展示异常时，可以定位页面是否正确加载了此资源；
2、查看当前域下的LocalStorage的值
3、查看当前域下SessionStorage的值
4、查看当前域下cookie的值
Console：
开发者工具控制台，支持页面当前已定义的方法的调用、元素查找、页面本身属性的查找
使用场景：
1、验证页面方法的正确性，通过直接在控制台调用页面定义的方法，来确认方法定义是否存在问题；
2、查看页面报错：如果页面里有错误，控制台会打印出错误并且定义到错误行；
3、获取页面内想要的任意元素；
4、查看页面代码内打印的log；
