Chrome 开发者工具调试方法 - 设备模式调试谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制

谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制作和调试工具,了解设备模式调试使用有助于提高调试效率！

设备模式调试

命令	渲染类型
Show/Hide device frame	开启/关闭设备框架
Show/Hide media queries	开启/关闭媒体查询工具
Show/Hide rulers	开启/关闭标尺工具
Add device pixel ratio	开启/关闭设备像素比工具
Add device type	开启/关闭设备类型工具
Capture screenshot	截屏可视区
Capture full size screenshot	截完整长图

单击左上角 Toggle Device Toolbar 切换设备工具栏，或者使用快捷键 Ctrl + Shift + M（或者在 Mac 上使用 Cmd + Shift + M）
可通过下拉预设的设备栏来快速选择一个特定的设备
设定 Responsive 视口模式，可拖动手柄以将视口调整为您需要的任何尺寸、或在宽度和高度框中输入特定值

单击设备列表，然后选择编辑进入设备设置面板，可勾选预设设备；预设设备不允许修改、删除

单击设备列表，然后选择编辑进入设备设置面板,点击增加新的自定义设备;自定义设备可自行修改、删除

注意：设备工具栏如果很窄，旋转按钮会消失

注意：只要内置了对应设备框架才能看见具体效果

右上角更多选项》 Add device type,开启/关闭设备像素比工具,选择对应像素比

右上角更多选项》 Show rulers ,开启标尺工具

右上角更多选项》 Show media queries ,开启当前页面的媒体查询,DevTools 会检测到你的样式表中的 media query 并将他们用不同颜色的长条在顶部显示
右键点击某个长条》 Reveal in source code,选择对应源码，可跳转到源码中的相应位置。