H5在手机上怎么调试console.log看不到？

公孙玉轩提问于 2026-03-13 12:52:22 阅读 78

移动

我在做移动端H5页面，用console.log('test')打日志，在电脑浏览器里能看到，但用微信或Safari打开就完全没反应，根本不知道代码执行到哪了。

试过用vConsole，但引入后页面样式乱了，而且有时候还报错。有没有更轻量或者靠谱的真机调试方法？

H5开发移动调试

我来解答赞 8 收藏

反馈

2 条解答

爱琴~ Lv1

手机浏览器调试确实是个麻烦事，尤其是微信内置浏览器。vConsole虽然好用但有时会影响页面样式，确实让人头疼。

其实有个简单办法，用电脑版Chrome浏览器自带的远程调试功能，配合手机USB调试模式来解决问题。具体步骤是：

首先在手机上打开开发者选项里的USB调试，然后用数据线连接电脑。接着在电脑Chrome浏览器地址栏输入 chrome://inspect，这里能看到已连接的设备和正在运行的网页，点击“inspect”就能像在PC上一样看到console输出了。

要是嫌这个方法麻烦，还可以试试把日志输出到页面上，写个简单的函数代替console.log：

function debugLog(msg) {

  let logDiv = document.getElementById('debug-log');

  if (!logDiv) {

    logDiv = document.createElement('div');

    logDiv.id = 'debug-log';

    document.body.appendChild(logDiv);

  }

  logDiv.innerHTML += '<pre>' + msg + '</pre>';

}

这样可以把日志直接显示在页面上，方便查看。当然这只是临时方案，最终还是建议用Chrome远程调试。这东西一开始设置有点麻烦，但习惯就好，平时开发必备啊。

2026-03-31 19:02

程序员巧丽 Lv1

手机上看console.log就两个办法：

一是用 vConsole，CDN引入就行，别用npm包，样式乱是因为可能和项目样式冲突，加个z-index:99999 试试。

二是用 Safari 连接 Mac 调试iPhone，或者 Chrome DevTools 调试安卓，比vConsole靠谱多了。

2026-03-13 13:01