1. h-tko

    Posted

    h-tko
Changes in title
+スマホのwebページでコンソール出力できるerudaがいい感じ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,81 @@
+スマホの検証とかで、実機でしか起きない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('<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("試しにログ出力してみるよ");
+```
+
+これで実行すると、こんな感じになります
+
+![スクリーンショット 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)
+
+これは簡単だし役立ちそう!!
+
+**本番環境で表示されないように制御する必要はありますが、、、**