移动端怎么有效输出调试日志？

星星提问于 2026-03-20 13:09:22 阅读 54

移动

我在开发一个移动端网页，想在手机上查看 console.log 输出的日志，但连上电脑调试太麻烦。有没有轻量级的办法能把日志显示在页面上？

试过用一个 fixed 的 div 来 append 日志，但样式老是和其他组件冲突，比如下面这段 CSS：

.debug-log {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  overflow-y: auto;
  z-index: 9999;
}

结果在某些机型上被 header 盖住，或者滚动时闪动严重，有没有更靠谱的做法？

日志输出移动调试

我来解答赞 17 收藏

反馈

1 条解答

轩辕恒鑫 Lv1

我一般直接用一个弹出层，通过点击按钮控制显示隐藏，避免样式冲突。这样不会影响页面布局。代码如下：

var logContainer = document.createElement('div');

logContainer.style.cssText = 'position:fixed;bottom:0;left:0;width:100%;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;overflow-y:auto;z-index:9999;max-height:30vh;display:none;';

document.body.appendChild(logContainer);

function log(msg) {

    logContainer.innerHTML += msg + '
';

    logContainer.scrollTop = logContainer.scrollHeight;

}

document.addEventListener('keydown', function(e) { if (e.key === 'F12') logContainer.style.display = logContainer.style.display === 'none' ? 'block' : 'none'; });

2026-03-20 15:02