移動端網頁調試 之 Eruda

前言

我打算將移動端網頁調試做爲一個專題介紹幾個經常使用的調試工具，主要是樣式調試和接口數據調試，目的是在提測和修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

2. Elements面板

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

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雖然功能比較全面，但因爲不能直接改動元素樣式並且在手機上操做也有不便，所以能夠適當選用，下一篇將介紹更好用的 weinre 和以weinre爲基礎的spy-debugger。移動端網頁調試 之 weinre&spy-debugger