F12谷歌开发者工具经常使用详解

关于许多前端开发者和网页设计师来说，阅读器的开发者工具是无法或缺的利器。经过这些工具，咱们可以深化了解网页的外部结构、调试代码、测试设计以及提升性能。

不同的阅读器（如Chrome、Firefox、Safari）都有自己的开发者工具，虽然界面和性能略有差异，但基本色能都迥然不同。本文将带你学习一些google开发者形式的妙用。

要关上阅读器开发者工具。你可以经过右键点击页面，选用“审核”或许F12快捷键关上，你将看到一个蕴含各种标签页的界面

几个小性能，让你知道开发者工具的弱小

小鼠标点击可以让你极速定位到元素位置

例如csdn，百度文库网络上的文本，复制的时刻普通都会让你放开会员或许关注能力经常使用，看看大神都怎样做

经过elements中找到文本间接复制

很多人在登录网站的时刻选用记住明码，然而起初又遗记了

教你怎样找回明码

修正为type的类型为text,而后明码就变成了明文展现

经常使用开发者工具定位疑问

作为运维人员的角度，可以经常使用开发者工具来协助启动疑问定位

检查网站恳求的基本信息

可以经过network定位页面加载失败的疑问，如图经过name可以看到详细记载失败的文件或许接口，status示意照应前往的形态码，200示意成功，假设是4xx或许5xx则示意恳求失败，就须要好好定位了

size字段示意静态文件的大小

意识恳求头和照应头

补充：

query string parameters：恳求参数，get恳求的恳求参数在url中，用&隔开；post恳求的恳求参数写在报文体中query string parametersrequest header中的Content-Type:post恳求的恳求格局，假设是get，没有恳求格局

判别静态文件能否紧缩

content-Encoding为gzip示意开启了紧缩

检查静态文件的大小和照应期间

疑问场景：网站照应慢，文件没有开启静态紧缩场景

场景:如图示意websocket协定不支持或许未性能的报错

post恳求参数是json字符串格局