设备模拟
设备宽度
快速切换到预设的设备宽度
媒体查询
显示定义的所有媒体查询
点击触发媒体查询
跳转到定义媒体查询的代码行
设备像素比
显示设备像素比切换选项
设备类型
可以控制触发 click 事件还是 touch 事件
设备方向
点击 
控制设备方向
截图
网络节流与 CPU
Sensor
地理定位
空间朝向
强制触屏
即使在 PC 端下也可以强制触发触屏事件
远程调试真机
安卓
步骤
- 启用开发者选项
- 启动 USB 调试
- PC 端打开 Chrome, 在地址栏输入 chrome://inspect#devices, 回车
- 启用 Discover USB devices
- 用 USB 线把移动端连接到 PC 端
- 移动端弹出是否允许 USB 调试的提示, 点击允许
- PC 端的 Chrome 上显示移动端的型号名称
- 移动端打开 Chrome, PC 端的 Chrome 上显示移动端 Chrome 的版本
- 移动端 Chrome 上打开要调试的页面, PC 端的 Chrome 上显示打开的页面
- PC 端的 Chrome 上点击 inspect 开始调试
https 和 localhost
如果开发环境下使用了 https 或 localhost 下才能使用的 API, 在移动端真机上只能通过 http + ip 的形式访问调试该怎么办?
localhost 端口转发
- PC 端 Chhrome 进入 chrome://inspect#devices
- 点击 Port forwarding
- 左边填写你要在移动端上访问的端口, 右边填写你要调试页面的 localhost 地址
- 点击 Done 确定
- 对应端口显示绿色点
- 移动端 Chrome 打开 localhost: + 设置的端口号开始调试
开启 https
vite 项目安装 vite-plugin-mkcert 插件
pnpm add vite-plugin-mkcert -Dimport { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'
export default defineConfig({
plugins: [mkcert()]
})重新运行项目
IOS
- 使用 USB 线连接 Iphone 到 MAC 上
- Iphone 打开 Chrome
- 进入设置 - 内容设置- 开启网页检查器
- 打开 Mac Safari 浏览器 - 顶部 - 开发 - 选择连接的 Iphone - 选择对应页面地址