谷歌开发者工具介绍
自问世以来,谷歌出品的chrome就以其小清新的风格,优越的性能迅速占领了浏览器的很大一部分市场份额。而chrome自带的开发者工具也具有很多实用而强大的功能,非常有助于前端或web开发人员分析和调试网页。
如何打开chrome浏览器开发者工具?
方法一 使用快捷键
Ctrl+Shift+i (PC平台)
cmd+opt+i (mac平台)
开发者工具
方法二 在chrome打开的网页任意位置点击右键,随后点击检查(inspect)
方法三 在chrome浏览器的右上角点击菜单更多工具->开发者工具
基本功能介绍实用功能不完全列表
Javascript脚本控制台
控制台可以撰写javascript请将浏览器设置为接受cookie,进行实时交互,具有代码自动提示功能。
可撰写Javascript的实时交互的控制台
可扩展
例如安装了前端框架Vue的扩展后有如下效果
Vue扩展
显示当前页面大小
在打开开发者工具的情况下,调整页面大小,会在右上角显示当前页面的高和宽,方便网页设计者优化设计页面。
检查/修改页面元素
在页面的任意元素上右键点击检查,开发者工具会显示出当前元素的很多信息,包括HTML代码,跟该元素相关的样式,可以在开发者工具中修改,页面会实时反映修改后的效果
源代码标签实用功能
打开任意网页,切换到开发者工具的Sources标签,可以查看该网页实际使用的相关文件(包括CSS,JS,图片文件,JSON数据文件等),如果是压缩过的JS,CSS,还可以格式化显示,使得JS和CSS更具有可读性。源代码标签上的工具让页面开发者更容易研究学习网上的各种范例。
查看网页源文件
格式化显示压缩的CSS文件
脚本调试
在源代码有Javascript脚本的代码行首打断点,刷新页面,就可以单步执行脚本,调试代码,变量的值会实时显示。
查看网络传输信息
开发者工具的网络标签(network)可查看页面网络传输的各种信息,包括文件大小,传输时间,HTTP头,HTTP响应,文件预览功能。还可以模拟各种网速来测试网页加载速度。
移动设备模拟器
可以用开发者工具模拟各种移动设备,可模拟设备屏幕大小,设备当前方向。测试网页在不同大小的屏幕上的显示效果,对于自适应页面的开发调试有非常大的帮助。
当前已经内置了很多设备
模拟设备一览
还可以用responsive的方式任意调整页面大小,用来调试响应式H5的页面。
总结,这里只是列出了常用的一些chrome开发者工具的功能,该工具还包含很多功能,比如内存分析请将浏览器设置为接受cookie,Javascript CPU profile,安全,审计,cookie分析,本地存储等等高级功能,有待大家进一步去探索。