--- title: スマホのwebページでコンソール出力できるerudaがいい感じ tags: JavaScript ログ eruda author: h-tko slide: false --- スマホの検証とかで、実機でしか起きないjsのバグとかあって、実機だからコンソール見れないイライラみたいなのに対応できそうなjsライブラリがあったのでご紹介です。 # 概要 URLの末尾にクエリストリングでeruda=trueってやると、こんな感じでデバッグ的な画面を表示してくれます。 スクショはPCのChromeですが、、、 ![スクリーンショット 2016-03-17 9.51.15.png](https://qiita-image-store.s3.amazonaws.com/0/105934/fdd63b8e-a421-b9cf-156d-1c36af5d5f46.png) # 公式github https://github.com/liriliri/eruda # 使い方 npmでインストールします。 ```bash $ npm install eruda --save ``` そしたら取り込んで、初期化処理を書きます。 ```js: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(''); })(); ``` あとは、コンソールを確認したいページのURLにeruda=trueをつけるだけ! ``` https://hoge.com/index?eruda=true ``` # 試してみる こんな感じのお試しを用意 ```index.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(''); })(); console.log("試しにログ出力してみるよ"); ``` これで実行すると、こんな感じになります ![スクリーンショット 2016-03-17 9.56.30.png](https://qiita-image-store.s3.amazonaws.com/0/105934/01e67974-1246-69c5-24aa-022cf48a22ad.png) 右下の方の謎のポチをタップすると、コンソールに切り替わります。 ![スクリーンショット 2016-03-17 9.57.20.png](https://qiita-image-store.s3.amazonaws.com/0/105934/0d686a10-6fbf-0374-baf6-28f8cf05970c.png) これは簡単だし役立ちそう!! **本番環境で表示されないように制御する必要はありますが、、、**