#移动端调试

#VConsole

#使用 npm

1. 安装依赖

npm install vconsole

yarn add vconsole

pnpm add vconsole

bun add vconsole

deno add npm:vconsole

2. 引入

在需要调试的页面引入 VConsole

import VConsole from 'vconsole';

new VConsole();

#使用 CDN

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  new window.VConsole();
</script>

#Chrome Inspect

在安卓设备上使用 Chrome Inspect 调试网页，步骤如下:

#1. 启用开发者模式并启用 USB 调试

1. 进入 "设置" -> "关于手机", 连续点击 "版本号" 七次，直到提示“您已处于开发者模式”
2. 返回 "设置" 主菜单，进入 "系统" -> 开发者选项, 开启 USB 调试 开关

#2. 连接手机和电脑

• 使用 USB 数据线连接手机和电脑，并在手机上选择“文件传输”模式
• 如果设备弹出“允许 USB 调试吗？”的提示，点击 允许（建议勾选“始终允许来自此计算机的调试”）

#3. 打开 Chrome 浏览器

在电脑上打开 Chrome, 输入chrome://inspect/#devices并回车

#4. 查看已连接设备

如果手机成功连接并且 USB 调试已启用，你应该能在 Remote target discovery 部分看到设备

#5. 选择要调试的页面

点击页面旁边的 inspect 按钮，这将打开一个新的 DevTools 窗口，允许你查看和调试该页面的代码、网络请求等信息