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

栏目:谷歌浏览器教程   来源:chrome之家   发布时间:2022-02-23   更新时间:2022-09-22

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


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


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浏览器的用户们有所帮助,感谢查阅本文。

原文链接:https://www.chromezj.com/chromef12.html  转载请标明

chrome之家下载站,原版谷歌浏览器

轻松下载,快速安装,安全无毒,兼容所有

立即体验
谷歌chrome浏览器80版
谷歌chrome浏览器80版 分类:80系列 大小:53.44MB 版本:V80.0

  谷歌浏览器80版是一款经典的chrome历史版本,作为开源的谷歌浏览器,这个版本更加稳定。

返回顶部