移動端網頁除錯 之 Eruda

WinMin發表於2019-02-19
網頁除錯

前言

我打算將移動端網頁除錯作為一個專題介紹幾個常用的除錯工具，主要是樣式除錯和介面資料除錯，目的是在提測和修bugs的階段能快速定位問題，提高工作效率，這篇文章介紹的是Eruda。

相信大家都能熟練使用DevTools除錯網頁，它可以幫助我們檢視網頁結構、樣式、網路請求、資源載入情況和本地快取等，而且還可以切換手機模式除錯h5頁面。但是由於移動端平臺、瀏覽器豐富多樣，所以開發h5網頁時還需要相容各主流手機的瀏覽器，有很多問題都需要在真機中才能發現。Eruda是一款開源的移動端除錯外掛，可以在移動端網頁上新增一個類似於chrome devtools的除錯皮膚，方便開發和測試快速定位移動端的問題，特別是樣式相容問題、獲取瀏覽器資訊和操作瀏覽器快取等。

引入方式

<script>
;(function () {
var src = 'https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js';
if (!/debug=1/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>
複製程式碼

只需在要除錯的頁面加入以上程式碼，通過加入url引數debug=1開啟除錯模式後頁面會從CDN載入eruda外掛，頁面的右下角會出現工具小圖示，點選圖示即可開啟除錯皮膚。在非除錯模式下不會載入此外掛，不會影響生產環境下的網頁載入速度。

除錯皮膚介紹

1. Console皮膚

列印錯誤資訊和程式碼中的console資訊；
輸入js指令碼並執行；
載入jQuery或underscore庫方便除錯，輸入 :$ 或 :_ 並執行即可載入Jquery 和 underscore

移動端網頁除錯 之 Eruda

2. Elements皮膚

選取頁面元素檢視該元素的屬性、樣式、盒子模型；
不支援直接修改樣式和元素（和chrome的區別）

移動端網頁除錯 之 Eruda

3.Network & Source皮膚

檢視ajax請求列表，請求的狀態碼、時間等；
單擊每項請求可檢視詳細的頭部資訊和返回值；

4.Resources皮膚

檢視和刪除localStorage，sessionStorage, cookie等；
顯示頁面載入的指令碼檔案，樣式檔案，圖片等資源；

5.Info皮膚

檢視當前網頁地址、瀏覽器核心資訊（user-agent）、手機系統資訊 、手機螢幕資訊。

6.Snippets皮膚

擴充套件一些常用功能和外掛，如： 搜尋視窗、Timimg皮膚、指令碼輸入視窗等（有些工具的確很方便，可以多嘗試使用）

7.Setting皮膚

Eruda的配置項，可以個性化定製符合自己除錯習慣的面版。 推薦配置： 開啟 alaways activited ； Transparency 0.8 ；display size 50 ;

移動端網頁除錯 之 Eruda

總結

Eruda雖然功能比較全面，但由於不能直接改動元素樣式而且在手機上操作也有不便，因此可以適當選用，下一篇將介紹更好用的 weinre 和以weinre為基礎的spy-debugger。移動端網頁除錯 之 weinre&spy-debugger

相關文章