玩转Chrome开发者工具2022(2/5)

4.测试网页的响应式程度

通过快捷键 Ctrl + Shift + M，或者点击如下按钮：

注意，该功能不能代替真实的移动设备，更多是方便开发时候的布局，也可以用来调节PC页面。

"更多按钮"可以展开"更多面板"

设备工具栏很窄时，靠右边的按钮可能会看不到

选择特定的机型

打开"尺寸面板"，选择特定机型，列如经典的"iPhone SE"

点击"修改"唤起"设置"的设备选项卡

通过勾选决定哪些设备显示在"尺寸面板"，也可以添加自定义设备

"更多面板"=>显示设备边框，但不是所有的设备类型都有用，例如Nexus 6P是有效果的

调节显示比例

发现尺寸不符合真实机型，可以选择100%调整，因为当更改机型的时候，默认会使用"自动给调整缩放级别"，从而使得可视区域能够容得下整个设备

更改网络状态

离线功能可以配合js的相应事件。

低端手机(慢速3G，CPU慢6倍)、中端移动设备(快速3G，CPU慢4倍)用来调试页面加载、动画等。

仅限制CPU可以通过性能面板，仅限制网络可以同Network面板

切换横竖屏

添加设备像素比

添加之后就变成"移除设备像素比"

注意选择特定机型时，该功能只是显示设备的像素比，而不能更改

添加设备类型

添加之后就变成"移除设备类型"

注意选择特定机型时，该功能只是显示"Mobile"，而不能更改

调节PC页面

在"尺寸面板"选择"自适应"，这时候你可以通过鼠标来拖拽"设备"大小

数值会实时显示在"宽高输入框"里，反之亦然。

这时候，"设备像素比"可以用了

"设备类型"也可以修改了

mobile，Desktop(touch) 鼠标状态是圆圈不能选择内容，但是可以触发移动端独有的touchStart等事件

mobile(no touch)， Desktop 可以选择文本，但不能触发移动端事件

通过"更多面板"，选择"显示媒体查询"、"显示标尺"

点击"媒体查询条"不同的区块可以快速切换页面大小

覆盖地理位置

单击"自定义和控制DevTools"=>更多工具=>传感器,或按 Control+Shift+P 打开命令菜单，输入"传感器"。

下面有"屏幕方向"，可以模拟用手摇晃手机。

其它功能

在"更多面板"中还有

• 重置为默认值
• 截取屏幕截图
• 截取完整尺寸的屏幕截图
• 关闭 DevTools

5.在元素面板中编辑网页样式

Chrome DevTools 的元素面板可以视为一个实时的编辑工具，双击想要更改的区域，如果出现了编辑框说明是可以更改的，失去焦点后更改便会生效

编辑HTML

也可以右键"以HTML格式修改"，快捷键F2。注意"添加属性"在失去焦点后会排序

如果嫌一层层展开太麻烦，可以按住Alt，再用鼠标点击，或鼠标右键，选择"已递归方式展开"、"收起子级" ，当你深度浏览时，可以通过下面的方式进行跳转

也可以完全通过键盘，Up Arrow、Down Arrow进行上下选择，Enter进入编辑模式，Tab、Shift+Tab 切换同一个标签的可编辑区域

Right Arrow展开当前元素，如果节点已展开，将选择其下方的元素。Left Arrow折叠当前元素，如果节点已经折叠，将选择其上方的元素，同样可以结合Alt。

甚至可以通过鼠标拖动。撤消更改，Control+Z；重做更改，Control+Y。H隐藏，BackSpace、Delete删除。

按下Ctrl + C就可以复制当前选中的节点,也可以右键"复制"=>"复制元素"，和"复制outerHtml"，没发现明显区别

注意这里的"复制样式" 是"样式面板"中所有样式从上到下混合在一起。