【山竹记账前端-vue】3.手机页面调试

大纲链接 §

[toc]

移动端优先

90% 的用户来自手机

1. 手机页面调试技巧 ⇧

配置路由重定向 src/router/routes.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


import type { RouteRecordRaw } from "vue-router"
import { WelcomeView } from '@/views/WelcomeView'
import { WelCome1stPage } from "@/modules/welcome/WelCome1stPage"
import { Welcome2ndPage } from "@/modules/welcome/Welcome2ndPage"
import { Welcome3rdPage } from "@/modules/welcome/Welcome3rdPage"
import { Welcome4thPage } from "@/modules/welcome/Welcome4thPage"

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/welcome/1',
  },
  {
    path: '/welcome',
    name: 'welcome',
    component: WelcomeView,
    children: [
      { path: '', redirect: '/welcome/1' },
      { path: '1', component: WelCome1stPage, },
      { path: '2', component: Welcome2ndPage, },
      { path: '3', component: Welcome3rdPage, },
      { path: '4', component: Welcome4thPage, },
    ],
  },
] as const

重定向路径需要填完整 { path: '', redirect: '/welcome/1' },

用手机调试页面 ⇧

不要等到功能做完了再用手机测

安卓手机-有线调试 ⇧

步骤

确保手机和电脑在同一网络下
用 USB 连接手机和电脑（需要可以传文件的数据线，不可使用仅支持充电功能的线材）
手机开启 USB 调试（手机处于解锁状态、手机开启常亮状态）
手机使用 chrome 或者 edge 浏览器打开要调试的页面
- 在打开 chrome://inspect/#devices 页面，等待片刻，找到对应页面链接
- 在打开 edge://inspect/#devices 页面，等待片刻，找到对应页面链接
在 chrome://inspect 页面，勾选“Discover USB devices”

最新步骤搜索关键词

Chrome/Edge 远程调试手机页面（注意阮一峰的那篇已经过时）

兼容性

只支持 Webkit 内核浏览器

坑点：如果页面报错 Offline#XXXXXXX Pending authentication: please accept debugging session on the device.

遇到这个错误一般为多个手机添加权限后，无法识别授权秘钥引起

取消授权，重启 ⇧

在手机「开发者选项」中找到「撤销 USB 调试授权」，关闭 USB 调试
切换 USB 模式：将手机的 USB 连接方式从“仅充电”改为“文件传输 (MTP)”或“PTP”
重启 ADB 服务：在电脑终端运行 adb kill-server 关闭服务，再重新连接设备
删除 ~/.android 文件夹是所有密钥；重启电脑
开关调试开关：在手机开发者选项中，关闭「USB 调试」然后再重新打开

在终端运行，没有 adb 命令

下载 Android Platform Tools
解压到任意目录（如 C:\adb）
在该目录下 Shift + 右键，选择「在此处打开终端」
执行 adb devices，手机会弹出授权确认

参考

坑点：如果页面报错 HTTP 1.x NOT FOUND 404

vite 开启 http2 ⇧

安装插件 vite-plugin-mkcert

1

pnpm add vite-plugin-mkcert -D

配置 vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: {
    host: true, // 监听所有地址，包括局域网 IP
    // https: true, // 无需配置
    // port: 5173 // 默认无需配置
  },
  plugins: [mkcert()]
})

参考

调整页面代码 ⇧

问题1：需要上下滑动才能查看完整页面，某些浏览器中页面无法全屏

重写了css布局，不同浏览器效果和PC页面不一样

问题2：页面可以双指放大缩小

抄淘宝移动端页面 meta

修改 viewport 禁用缩小放大

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

IOS 手机

搜索教程
- 关键词：Safari远程调试手机页面
- 必须有 Mac 和 iPhone
- Mac Safari 远程调试 iOS Safari 上的网页
兼容性
- iPhone上面的浏览器都是 Webkit 内核，所以都支持

非 Webkit 浏览器

使用模拟控制台
- Tencent/vConsole github vConsole
- liriliri/eruda github eruda
优点：适合所有浏览器
缺点：可能有一点bug，无法追踪在工具初始化之前的请求

手机调试基本原则 ⇧

常见浏览器优先
- 常见：微信内嵌页面、系统浏览器、UC、腾讯浏览器等
- 不常见：Chrome、Edge、FireFox 等
真机优先
- 调试器无法体现所有bug
调试工具
- 熟练使用浏览器调试工具面板：Network、Elements、Console、Source 等

2. 微信页面调试技巧 ⇧

使用 WebView in com.tencent.mm 手机微信打开网址 https://debugxweb.qq.com/?inspector=true
电脑连接手机，开启调试页面 chrome://inspect/#devices 稍等看到相应的链接，再输入开发网址即可

3. 常见报错 ⇧

手机浏览器无法访问 localhost:5173

在 VSCode 的设置里将 Local Port Host 设置为 allInterfaces

找到电脑在当前局域网中的 IP

在 Windows 命令提示符输入 ipconfig，找到每个 IPv4 地址逐个尝试
- 如果你不想逐个尝试，可以打开手机的 WiFi 详情，然后从所有 IPv4 地址中找到跟手机所处的网段类似的 IPv4 地址。
在 macOS 终端输入 ifconfig，找到每个 inet 地址逐个尝试。
Linux 用户自己尝试。

使用第二步的 IP 代替 localhost 或代替 127.0.0.1 即可，比如我可以在手机浏览器输入 http://192.168.3.37:5173 访问我电脑上的网页。

·未完待续·

参考文章

代码

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

【山竹记账前端-vue】3.手机页面调试

文章目录

【山竹记账前端-vue】3.手机页面调试

1. 手机页面调试技巧 ⇧

用手机调试页面 ⇧

安卓手机-有线调试 ⇧

取消授权，重启 ⇧

vite 开启 http2 ⇧

调整页面代码 ⇧

手机调试基本原则 ⇧

2. 微信页面调试技巧 ⇧

3. 常见报错 ⇧

参考文章

相关文章