谷歌开发者工具介绍
自问世以来，谷歌出品的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分析，本地存储等等高级功能，有待大家进一步去探索。
本文到此结束，希望对大家有所帮助！
