解锁Chrome开发工具的隐藏功能

chrome浏览器的自带的开发者工具不仅可以调试web应用，也可以模拟终端设备。

开发和测试在工作中也常常会用到chrome开发者工具，它有很多隐藏的小功能，运用的好可以事半功倍，提高工作效率。今天来给大家介绍一下：

Chrome开发工具打开方式

1、按下键盘F12

2、按下键盘Ctrl+shift+I

3、浏览器导航栏 …–>更多工具–>开发者工具

模拟终端设备

点击红色部分，开启模拟各种机型设备，如果没有你想要的，可以点击Edit进行勾选添加。

另外还可以设置不同手机型号的尺寸、屏幕缩放比例，用于模拟手机端测试非常方便。

元素（Elements）

1. 查看元素代码

点击工具栏最左侧的箭头按钮（快捷键Ctrl+Shift+C）进入元素选择模式，鼠标在页面上滑过时，可以在元素（Elements）面板中自动定位到该元素源代码的具体位置。

2. 查看元素属性

点击右侧工具栏上的Properties，可以查看到该元素的所有属性