久久久精品久久久久久96,91国高清在线,欧美日韩高清国产aⅴ一区,在线观看亚洲欧美一区二区三区

<sub id="e1sa3"></sub>

    <pre id="e1sa3"><del id="e1sa3"></del></pre>
    <noscript id="e1sa3"></noscript>

      新疆信息港歡迎您!

      新疆信息港
      新疆信息港 > 資訊 >兩款開源免費的手機(jī)網(wǎng)頁前端開發(fā)者調(diào)試面板——eruda+vConsole

      兩款開源免費的手機(jī)網(wǎng)頁前端開發(fā)者調(diào)試面板——eruda+vConsole

      2020-05-30 08:41:21
      來源:互聯(lián)網(wǎng)
      閱讀:-

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

      介紹

      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)品,本文分別來介紹它們!


      兩款開源免費的手機(jī)網(wǎng)頁前端開發(fā)者調(diào)試面板——eruda+vConsole


      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 信息等等。

      • 功能介紹

      兩款開源免費的手機(jī)網(wǎng)頁前端開發(fā)者調(diào)試面板——eruda+vConsole


      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)試面板。


      兩款開源免費的手機(jī)網(wǎng)頁前端開發(fā)者調(diào)試面板——eruda+vConsole


      特性:

      • 查看 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!

      推薦閱讀:蘋果7p是什么時候上市的

      免責(zé)聲明:本文僅代表企業(yè)觀點,與新疆信息港無關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實,對本文以及其中全部或者部分內(nèi)容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,并請自行核實相關(guān)內(nèi)容。
      熱門圖片
      熱門搜索