介紹

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

Github

https://github.com/liriliri/eruda

https://github.com/Tencent/vConsole

eruda簡介和使用

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

• 功能介紹

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

• 快速上手

通過CDN使用或者通過npm安裝：

npm install eruda --save

在頁面中加載腳本：

Js文件對于移動端來說略重（gzip后大概100kb）。建議通過url參數(shù)來控制是否加載調(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();');
})();

初始化時可以傳入配置：

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

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

插件

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

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

vConsole

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

特性:

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

安裝使用:

使用 npm 安裝：

npm install vconsole

引入 dist/vconsole.min.js 到項目中：

對于 TypeScript，可引入 d.ts 文件：

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

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

總結(jié)

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