スマホ実機でconsole出力を簡単に確認する方法

スマホのウェブ開発での困りごとの一つは、実機でしか起きないバグがあることですよね。

「バグの原因を調べるためにconsoleを使いたいけれど、いちいちPCにつないでデバッグするのは面倒くさい！Androidは繋ぎ方がよく分からない！」となる場合も多いと思います。

この記事では、そんな時に使えるスマホの実機でconsoleの中身を簡単に確認する方法をご紹介します。

console結果を擬似的にスマホの画面に表示する方法

その方法とは、consoleを表示するための要素を普通のDOMとして追加して、console.logイベントが発火した時にその要素内にもテキストを表示しておく方法です。

以下のコードをJSの最初などに追加してください。

consoleを画面内に表示するためのスクリプト

// jQueryを使えるように読みこむ（他で読み込んでいれば不要です）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
//console.logイベントが発火した時に処理を実行
window.console.log = text => {
  // 初回は表示用の要素を作成
  if (!$('#console').length) {
    // 画面下部に固定表示する
　　$('<div id="console"></div>') 
     .appendTo($('body'))
     .css({
      position: 'fixed',
      bottom: 0,
      left: 0,
      width: '100%',
      height: '100px',
      padding: '8px',
      background: 'rgba(0,0,0,0.7)',
      fontSize: '10px',
      color: '#fff',
      zIndex: 1000000
    });
  }

  //consoleに本来出力される内容を表示していく
  $('#console').prepend(`${text}<br>`);
};
</script>