介紹

eruda和vConsole是兩個(gè)針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。讓移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試變得更加簡(jiǎn)便，前端開(kāi)發(fā)者都知道在PC端瀏覽器調(diào)試非常方便，可以隨時(shí)查看調(diào)試信息等，而移動(dòng)端就沒(méi)這么方便了。因此eruda和vConsole也就孕育而生！eruda和vConsole是兩個(gè)不同的產(chǎn)品，本文分別來(lái)介紹它們！

Github

https://github.com/liriliri/eruda

https://github.com/Tencent/vConsole

eruda簡(jiǎn)介和使用

Eruda 是一個(gè)專(zhuān)為手機(jī)網(wǎng)頁(yè)前端設(shè)計(jì)的調(diào)試面板，類(lèi)似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、捕獲XHR請(qǐng)求、顯示本地存儲(chǔ)和 Cookie 信息等等。

• 功能介紹

1. 按鈕拖拽，面板透明度大小設(shè)置。
2. Console面板：捕獲Console日志，支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c自定義樣式輸出；支持按日志類(lèi)型及正則表達(dá)式過(guò)濾；支持快捷命令加載underscore、jQuery庫(kù)；支持JavaScript腳本執(zhí)行。
3. Elements面板：查看標(biāo)簽內(nèi)容及屬性；查看應(yīng)用在Dom上的樣式；支持頁(yè)面元素高亮；支持屏幕直接點(diǎn)擊選?。徊榭碊om上綁定的各類(lèi)事件。
4. Network面板：捕獲請(qǐng)求，查看發(fā)送數(shù)據(jù)、返回頭、返回內(nèi)容等信息。
5. Resources面板：查看并清除localStorage、sessionStorage及cookie；查看頁(yè)面加載腳本及樣式文件；查看頁(yè)面加載圖片。
6. Sources面板：查看頁(yè)面源碼；格式化html，css，js代碼及json數(shù)據(jù)。
7. Info面板：輸出URL及User Agent；支持自定義輸出內(nèi)容。
8. Snippets面板：頁(yè)面元素添加邊框；加時(shí)間戳刷新頁(yè)面；支持自定義代碼片段。

• 快速上手

通過(guò)CDN使用或者通過(guò)npm安裝：

npm install eruda --save

在頁(yè)面中加載腳本：

Js文件對(duì)于移動(dòng)端來(lái)說(shuō)略重（gzip后大概100kb）。建議通過(guò)url參數(shù)來(lái)控制是否加載調(diào)試器，比如：

;(function () {
 var src = 'node_modules/eruda/eruda.min.js';
 if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
 document.write('');
 document.write('eruda.init();');
})();

初始化時(shí)可以傳入配置：

• container: 用于插件初始化的Dom元素，如果不設(shè)置，默認(rèn)創(chuàng)建div作為容器直接置于html根結(jié)點(diǎn)下面。
• tool：指定要初始化哪些面板，默認(rèn)加載所有。

let el = document.createElement('div');
document.body.appendChild(el);
eruda.init({
 container: el,
 tool: ['console', 'elements'],
 useShadowDom: true
});

插件

• eruda-fps：展示頁(yè)面的 fps 信息。
• eruda-features：瀏覽器特性檢測(cè)。
• eruda-timing：展示性能資源數(shù)據(jù)。
• eruda-memory：展示頁(yè)面內(nèi)存信息。
• eruda-code：運(yùn)行 JavaScript 代碼。
• eruda-benchmark：運(yùn)行 JavaScript 性能測(cè)試。
• eruda-geolocation：測(cè)試地理位置接口。
• eruda-dom：瀏覽 dom 樹(shù)。
• eruda-orientation：測(cè)試重力感應(yīng)接口。

如果你想要自己編寫(xiě)插件，可以查看Github提供的教程

vConsole

vConsole是由騰訊出品的一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。

特性:

• 查看 console 日志
• 查看網(wǎng)絡(luò)請(qǐng)求
• 查看頁(yè)面 element 結(jié)構(gòu)
• 查看 Cookies、localStorage 和 SessionStorage
• 手動(dòng)執(zhí)行 JS 命令行
• 自定義插件

安裝使用:

使用 npm 安裝：

npm install vconsole

引入 dist/vconsole.min.js 到項(xiàng)目中：

對(duì)于 TypeScript，可引入 d.ts 文件：

import 'path/to/vconsole.min.d.ts';

PS:你還可以編寫(xiě)自己的插件,具體的詳細(xì)文檔可查閱Github

總結(jié)

eruda和vConsole都是移動(dòng)瀏覽器端網(wǎng)頁(yè)調(diào)試的調(diào)試?yán)?更加方便準(zhǔn)確的調(diào)試移動(dòng)端,尤其是在APP內(nèi)置的webView上加載我們的頁(yè)面，想要查看手機(jī)瀏覽器信息是非常不容易的一件事情,有了它們,這些問(wèn)題都將不復(fù)存在,有需要的朋友不要錯(cuò)過(guò),Enjoy it!