ChromDevTools

【ChromDevTools】

1、如何打开DevTools。

• 在Chrome菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用 快捷键  F12

2、切换 Device Mode 按钮可以打开或关闭 Device Mode。

　　

3、使用视口控件

　　

　　

利用视口控件，您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：

1. 自适应。使视口可以通过任意一侧的大手柄随意调整大小。
2. 特定设备。将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。

 4、设置网络环境