chromef12使用教程[chrome谷歌浏览器按F12的开发者工具详解]

以chrome为内核的浏览器基本上可以通过快捷方式F12进入开发者工具。这是谷歌官方针对页面前端开发人员设计的一个功能扩展，你可以通过按F12查看你喜欢的站点效果、页面布局或者酷炫的特效，通过F12带来的便利，让你成功偷师！chromef12堪称前端开发人员的一大利器，完全省去了设计、调试等冗长的步骤，大大提升了这些程序员们的工作效率！小编认为这是chrome谷歌浏览器为世界编程界做出的一大贡献！

chromef12使用教程

1、元素Elements主要是用来模拟移动设备浏览你的站点页面，它可以无缝适配多种机型，苹果Android设置pad等，访问效果真实的手机访问是一个样子的，很便利又可以节省很多测试成本。

 2、网络Network的作用主要是用来看当前页面有多少网络请求，比如CSS,JS,image，ajax，Document等。

 详解如下：

 （1）URL，请求方法，响应状态码，响应数据类型，响应数据大小，响应时间和每个阶段所花费的时间。 Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等 Preview：预览面板，用于资源的预览。 Response：响应信息面板包含资源还未进行格式处理的内容 Timing：资源请求的详细信息花费时间  

（2）点击具体的请求，可以看到当前请求的信息和服务器响应的信息。 

（3）我们可以知道站点的实时消息实现用WebSocket实现的。  

（4）如果Chrome的Network能像Firefox Dev版一样，可以直接编辑信息重发。

 3、源代码Source是chromef12功能里面设计最好的一个环节，它可以将压缩过的JS文件通过格式化，让你了解到当前的程序执行点，虽然无法改善JS的可读性，但是已经大大节省了调试成本了。 在source界面的时候，还有一些快捷键可以使用。 F10，跳过当前方法（如果执行到一个自定义方法，不进入方法内部） F11，进入当前方法（如果当前方法是一个自定义方法，进入方法内部） SHIFT+F11 跳出当前方法 F8，跳到下一个断点  

4、资源Resource板块主要是用于查看当前网页的本地信息，例如Cookie，LocalStorage，SessionStorage，DB等。 

5、控制台Console的功能主要体现在用于显示JS文件里面的日志信息，它还有一个牛逼的功能是具备可编辑功能，程序员直接在上面修改就能直接响应当前效果，也是很有利于程序员的调试，这感觉倍爽。

 6、Performance 性能分析：指分析有js动画的页面为啥卡顿。右边齿轮，可对cpu4倍或6倍降低（以人为降低js性能）。 点击黑“圆圈”，进行录制。过一段时间后点击停止。红色时段表示卡顿，点选可了解帧情况。

 7、Application （1）Application的cookie，列出某个站点所有的cookie。可在此编辑某个cookie值。可清空某个站点所有cookie。 （2）Application的Cache：离线化类应用主要用到本功能，如GMail的离线功能。把资源缓存下来。 （3）Application的Frames，可快速保存站点资源。展开后右键保存。  

8、Security，站点安全方面信息，可看站点证书。另外，在网站输入域名查看更全面安全性。  

总结，以上就是chromef12使用教程，希望对于chrome浏览器的用户们有所帮助，感谢查阅本文。