✨Chrome DevTools 使用指☞北 - 在 Device Mode 下模拟移动设备 🔔

Anita_Sun
433 阅读6分钟

Hello，大家好呀。在当今移动互联网蓬勃发展的时代，确保网页在移动设备上的完美呈现至关重要。Chrome DevTools 中的 Device Mode（设备模式）功能，为开发者提供了一个强大且便捷的工具来模拟移动设备，极大地简化了移动网页开发与调试的流程。

限制 🌈

  • 使用 Device Mode 时，实际上并不是在移动设备上运行您的代码，您可以模拟通过笔记本电脑或桌面设备改善移动用户体验。
  • 移动设备的某些方面是开发者工具无法模拟的。例如： 移动设备 CPU 的架构与笔记本电脑或桌面设备 CPU 的架构截然不同。 如果不确定，最好的办法是使用遥控器调试技术在移动设备上运行您的网页

打开设备工具栏 🌈

  • 打开开发者工具

  • 点击红框里的按钮切换设备工具栏（快捷键 Ctrl + Shift + M）

    image.png

模拟移动设备视口 🌈

调整视口大小 🐾

拖动手柄 🎈
  • 拖动手柄，可以将视口大小调整为所需的任意尺寸 image.png
输入具体的大小 🎈

  • 可以在宽度和高度的框中输入具体的大小来调整尺寸

    image.png

宽度预设栏

  • 使用宽度预设栏，点击一下便可将宽度设置为下列值之一

    image.png

移动设备 S中型移动设备大屏幕移动设备平板电脑笔记本电脑大屏笔记本电脑4K
320 像素375 像素425 像素768 像素1024 像素1440 像素2560 像素

显示媒体查询 🐾

  • 如需在视口上方显示媒体查询断点，请依次点击 : > show media queries。

    image.png

  • 蓝色条 显示的是 max-width

    绿色条 显示的是 max-width and min-width

    黄色条 显示的是 min-width

    image.png

  • 在断点之间点击可更改视口的宽度

    image.png

  • 如需找到相应的 @media 声明，请右键点击断点之间的位置，然后选择 Reveal in source code。开发者工具会在 Editor 中的相应行中打开 Sources 面板

    image.png

设置设备像素比 🐾

  • DPR（设置像素比）是硬件屏幕上的物理像素与逻辑 (CSS) 像素之间的比率。值越大，屏幕上显示的东西越清楚。

  • 设置 DPR。点击 : > Add device pixel ratio

    image.png

    image.png

设置设备类型 🐾

  • 点击 : -> Add device type image.png

  • 选项

    image.png

    选项呈现方式光标图标触发的事件数
    移动设备移动设备圆形触控输入
    移动设备（无接触）移动设备正常点击
    桌面设备桌面设备正常点击
    桌面设备（触摸）桌面设备圆形触控输入

设备专用模式 🐾

  • 要模拟特定移动设备的尺寸，请从尺寸列表中选择相应设备

    image.png

将视口旋转为横向 🐾

  • 点击 旋转 按钮，即可将视口旋转为横向。

    image.png

  • 请注意，如果 设备工具栏 较窄，旋转 按钮会消失

    image.png

切换双屏幕模式 🐾

  • 某些设备（例如 Surface Duo）有两个屏幕，如需在双屏幕和单屏幕之间切换，请点击工具栏中的 Toggle dual-screen mode

    image.png

显示设备边框 🐾

  • 在模拟特定移动设备（例如 Nest Hub）的尺寸时，选择 更多选项 > Show device frame 以便在视口周围显示实体设备框架

    image.png

    image.png

  • 如果您没有看到特定设备的框架，则可能意味着开发者工具根本就没有适合这个设备的框架

添加自定义移动设备 🐾

  • 点击设备列表，然后选择修改（Edit）

image.png

  • 可以添加你想要的设备，在你想要的设备前打勾就可以

    image.png

  • 也可以添加自定义设备。输入该设备的名称、宽度、高度，然后点击添加。设置像素比、用户代理字符串、设备类型字段为选填字段

    image.png

显示标尺 🐾

  • 点击 更多选项 > 显示标尺 可查看标尺。标尺的尺寸单位是像素。

    image.png

    image.png

缩放视口 🐾

  • 使用 缩放 列表可以放大或缩小视口

    image.png

截取屏幕截图 🐾

  • 若要截取您在视口中看到的内容的屏幕截图，请依次点击 更多选项 > 截取屏幕截图

    image.png

  • 若要截取整个网页（包括视口中未显示的内容）的屏幕截图，请依次点击 更多选项 > 截取完整尺寸的屏幕截图

    image.png

  • 如需在设备专用模式下截取屏幕截图时包含设备框架，请先显示设备框架，然后点击 截取屏幕截图

    image.png

限制网络流量和 CPU 占用率 🌈

  • 要同时限制网络流量和 CPU 使用率，请选择 中端移动设备 或 低端移动设备

    image.png

  • 中端移动设备 模拟快速 3G 网络，并限制 CPU 速度，使其比速度慢 4 倍 正常。低端移动设备 会模拟慢速 3G 网络，并会将 CPU 限制速度降低到正常水平的 6 倍。保留 请记住，限制是相对于笔记本电脑或台式机的正常性能而言的。

  • 请注意，如果 设备工具栏 较窄，节流 列表将隐藏

仅限制 CPU 占用率 🐾

  • 如果只想限制 CPU 占用率，而不限制网络流量，请转到性能面板，然后点击 捕获 -> 设置 和 然后从 CPU 列表中选择 4 倍变速、6 倍变速

    image.png

仅限制网络流量 🐾

  • 如果只限制网络流量而不限制 CPU 占用率，请前往 Network 面板，然后选择 Fast 3G 或 Slow 3G

    image.png

  • 或者按 Command + Shift + P (Mac) 或 Ctrl + Shift + P（Windows、Linux、ChromeOS）打开 Command 在菜单中，输入 3G，然后选择 启用快速 3G 节流 或 启用慢速 3G 节流

    image.png

  • 您还可以在 性能 面板中设置网络节流。点击 捕获设置，然后选择 网络 列表中的 Fast 3G 或 Slow 3G

    image.png

模拟传感器 🌈

  • 使用 Sensors 面板可以替换地理定位、模拟设备屏幕方向、强制轻触以及模拟空闲状态
  • 接下来的部分将简要介绍如何替换地理定位和设置设备的屏幕方向

替换地理定位 🐾

  • 如需打开地理定位替换界面，请点击 自定义和控制开发者工具，然后选择 更多工具 > 传感器。

    image.png

  • 或者按 Command + Shift + P (Mac) 或 Ctrl + Shift + P（Windows、Linux、ChromeOS）打开 Command 在菜单中输入 Sensors，然后选择 显示传感器（Show Sensors）。

    image.png

  • 可以选择你想要的城市，也可以选择 Other 来输入您想要的坐标，或者选择无法获取位置信息，以测试网页在加载时的行为 地理定位处于错误状态

    image.png

  • 例如：选择上海

    image.png

avatar
文章
阅读
粉丝