H5页面在手机上白屏，怎么远程调试？

先在安卓上试试，确保手机和电脑在同一WiFi下，手机浏览器打开chrome://inspect，然后访问你的H5页面，应该能看到待调试的页面。iOS的话，连上电脑后，在Xcode里找到你的设备，用Safari开发菜单就能看到。实在不行就用 console.error 加个全局捕获看看报错：window.onerror = function(msg, url, lineNo, columnNo, error) { console.log(msg, url, lineNo, columnNo, error); }。我之前也遇到过这种诡异问题，基本都能靠这些方法找到原因。

这个问题挺常见的，我先帮你把思路理清楚。

先说为什么你连调试都进不去

vConsole的mounted都没打印，说明代码在入口之前就报错了。这基本是兼容性或者打包问题，不是调试工具的问题。

第一步：先把白屏问题解决了

最常见的原因是ES6+语法在微信webview里不兼容。微信内置的X5浏览器对ES6支持有限，特别是如果用了比较新的语法。

检查你的babel配置，确保有polyfill：

在main.js最开头加上：

import 'core-js/stable';

import 'regenerator-runtime/runtime';

如果用的是Vue CLI 3+，在vue.config.js里配置：

module.exports = {

  transpileDependencies: ['@babel/runtime-corejs2'], // 或者core-js3

  chainWebpack: config => {

    // 确保生产环境也生成sourcemap，方便调试

    config.plugin('html').tap(args => {

      args[0].productionSourceMap = true;

      return args;

    });

  }

};

另外，如果用了Vue Router，把mode从history改成hash：

// router/index.js

export default new Router({

  mode: 'hash',  // 微信里history模式容易出问题

  routes: [...]

})

第二步：手机连接电脑用Chrome调试

这个方法最通用：

1. 手机用USB连电脑，确保手机打开开发者模式里的USB调试2. 电脑Chrome打开 chrome://inspect/#devices
3. 确保手机和电脑在同一个WiFi下（有些教程说要在同一网络，其实USB连的话主要保证ADB能识别）
4. 用手机浏览器打开你的页面，不要用微信
5. Chrome里应该能看到设备列表，点inspect就能调出DevTools

如果看不到设备，检查一下：
- 手机是否弹出了USB调试授权
- 驱动有没有装好（Windows可能需要单独装驱动）
- Chrome版本是否够新

第三步：微信白屏专用方案

微信白屏的话，用微信开发者工具最靠谱：

1. 微信开发者工具 -> 调试器
2. 左边有个移动调试图标，点开
3. 选安卓调试，扫码
4. 然后在微信里打开你的页面，开发者工具里就能看到网络请求和错误

第四步：iOS的调试

iOS必须在Mac上用Safari：

1. iPhone打开设置 -> Safari -> 高级 -> Web检查器
2. Mac Safari打开开发菜单
3. iPhone连USB，Safari开发菜单里应该能看到设备名
4. 点设备名下的页面就能调试

最后说个快速定位问题的土办法

如果上面都搞不定，在手机浏览器（不是微信）里打开页面，然后看有没有404或者资源加载失败的报错。先确定是所有资源都加载成功了，再排查代码问题。

你现在先试一下加上core-js polyfill和改成hash模式，看看能不能进页面。进不去的话把具体报错贴出来，我再帮你看。