スマホの検証とかで、実機でしか起きないjsのバグとかあって、実機だからコンソール見れないイライラみたいなのに対応できそうなjsライブラリがあったのでご紹介です。

概要

URLの末尾にクエリストリングでeruda=trueってやると、こんな感じでデバッグ的な画面を表示してくれます。
スクショはPCのChromeですが、、、

公式github

使い方

npmでインストールします。

$ npm install eruda --save

そしたら取り込んで、初期化処理を書きます。

index.js

(function() {
  var src = 'node_modules/eruda/dist/eruda.min.js';
  if (!/eruda=true/.test(window.location) && localStorage.getItem('aactive-eruda') != 'true') return;
  document.write('<src' + 'ipt src="' + src + '"></src' + 'ipt>');
})();

あとは、コンソールを確認したいページのURLにeruda=trueをつけるだけ！

https://hoge.com/index?eruda=true

試してみる

こんな感じのお試しを用意

index.html

<html>
  <head>
    <meta http-equiv="Content-Type" charset="UTF-8">

  </head>
  <body>

    <h1 style="line-height: 1.45; font-size: 4em;">テストです</h1>

    <script src="./index.js"></script>
  </body>
</html>

index.js

'use strict';

(function() {
  var src = 'node_modules/eruda/dist/eruda.min.js';
  if (!/eruda=true/.test(window.location) && localStorage.getItem('aactive-eruda') != 'true') return;
  document.write('<src' + 'ipt src="' + src + '"></src' + 'ipt>');
})();

console.log("試しにログ出力してみるよ");

これで実行すると、こんな感じになります

右下の方の謎のポチをタップすると、コンソールに切り替わります。

これは簡単だし役立ちそう！！

本番環境で表示されないように制御する必要はありますが、、、

スマホのwebページでコンソール出力できるerudaがいい感じ

概要

公式github

使い方

試してみる