注：本文有一小部分截圖為桌面端，但所有內容都親測在移動端上可用。
你曾否在洛谷上用<F12>把錯的數據點改成AC？是否有過自己嘗試搭建網站，在移動端上js代碼運行出錯？如果你的回答是肯定的，那么\(eruda\)就正好適合你！
1. \(eruda\)簡介
github開源項目網址：eruda
\(\text{Eruda}\) 是一個專為手機網頁前端設計的調試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態、捕獲XHR請求、顯示本地存儲和 Cookie 信息等等。
其有以下功能：
-
Console面板：捕獲Console日志，支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c自定義樣式輸出；支持按日志類型及正則表達式過濾；支持快捷命令加載underscore、jQuery庫；支持JavaScript腳本執行。
-
Elements面板：查看標簽內容及屬性；查看應用在Dom上的樣式；支持頁面元素高亮；支持屏幕直接點擊選取；查看Dom上綁定的各類事件。
-
Network面板：捕獲請求，查看發送數據、返回頭、返回內容等信息。
-
Resources面板：查看並清除localStorage、sessionStorage及cookie；查看頁面加載腳本及樣式文件；查看頁面加載圖片。
-
Sources面板：查看頁面源碼；格式化html，css，js代碼及json數據。
-
Info面板：輸出URL及User Agent；支持自定義輸出內容。
-
Snippets面板：頁面元素添加邊框；加時間戳刷新頁面；支持自定義代碼片段。
說白了，就是等同於大家電腦瀏覽器上的 <F12>，甚至功能更加強大！
2. 簡單的實現
說起來這么高級，那么怎么用呢？
首先，復制以下的代碼：
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
然后隨便打開一個網頁，把以上代碼粘貼到手機瀏覽器的地址欄里面去，接着，奇跡發生了！
你會發現網頁右下角出現一個齒輪的圖標！
點開它，就是瀏覽器的控制台，你可以在這里寫js或者jQuery代碼。
而\(eruda\)更高級的功能則是在\(snippets\)這一欄，包括網站編輯，顯示元素邊界等等有趣的插件。
3. 與小書簽搭配實現（部分系統瀏覽器不支持）
注意！！！via瀏覽器用戶請移步下一小節，via上的小書簽將無法刪除！
為了更方便使用\(eruda\)，而不是每次使用都要重新復制一遍代碼，我們可以用小書簽的形式將代碼存下來。
首先，將隨便一個網站添加為收藏，然后選擇“編輯”，把它的網址替換成上述的代碼，然后把名字改一下即可。
打開網站以后，在瀏覽器地址欄上面搜一下你之前給這個書簽命的名，找到以后點一下即可（這不是廢話嗎）。
4. 與\(via\)瀏覽器搭配食用
首先，點擊\(via\)瀏覽器首頁右下角的菜單：
進入設置：
選擇腳本那一欄，然后點擊右上角的加號，新建腳本
域名填寫 * ，代碼欄填寫以下代碼：
(function(){var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script);script.onload=function(){eruda.init()}})();
大功告成！
5. 與tampermonkey和yandex瀏覽器搭配食用
首先，在你的安卓機上下載yandex瀏覽器，然后再chorme擴展商店或者“其他途徑”安裝tamper monkey插件。因為某種原因，在此不再贅述。
安裝完畢之后，點開插件欄中tamper monkey的圖標。
再點擊彈出菜單中的“添加新腳本”
在編輯器中輸入以下代碼：
// ==UserScript==
// @name 網頁調試
// @namespace http://tampermonkey.net/
// @version 0.1
// @include *
// @description 在安卓上進行前端調試
// @author You
// @grant none
// ==/UserScript==
var script=document.createElement('script');
script.src="//cdn.jsdelivr.net/npm/eruda";
document.body.appendChild(script);
script.onload=function(){
eruda.init()
}
點擊左上角的文件->保存
大功告成！
6. 致謝
- 感謝\(eruda\)原作者，開發出如此優秀的調試工具
- 感謝via，yandex，tampermonkey等作者
- 感謝\(sm.ms\)圖床，提供這篇文章的圖床
- 感謝我媽對我表示支持
- 感謝信息老師對我表示支持
- 感謝我們班里一直“在精神上支持我”的同學
- 感謝機房的電腦&我的手機