成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小技巧|移動(dòng)端網(wǎng)頁(yè)調(diào)試神器Eruda使用技巧

xzavier / 2283人閱讀

摘要：做移動(dòng)端開(kāi)發(fā)的一大痛點(diǎn)就是，在真機(jī)運(yùn)行下無(wú)法查看日志和其他信息如網(wǎng)絡(luò)請(qǐng)求顯示本地存儲(chǔ)等信息。是一個(gè)專為手機(jī)網(wǎng)頁(yè)前端設(shè)計(jì)的調(diào)試面板，類似的迷你版，其主要功能包括捕獲日志檢查元素狀態(tài)顯示性能指標(biāo)捕獲請(qǐng)求顯示本地存儲(chǔ)和信息瀏覽器特性檢測(cè)等等。

做移動(dòng)端Web開(kāi)發(fā)的一大痛點(diǎn)就是，在真機(jī)運(yùn)行下無(wú)法查看console.log日志和其他信息如網(wǎng)絡(luò)請(qǐng)求、顯示本地存儲(chǔ)等信息。如果網(wǎng)頁(yè)是運(yùn)行在手機(jī)瀏覽器中還算好，可以把網(wǎng)址在電腦上打開(kāi)查看console信息，但是如果是做APP的內(nèi)嵌H5頁(yè)面，那就只能靠開(kāi)發(fā)階段在瀏覽器模擬環(huán)境中盡量沒(méi)有Bug，但是，一旦H5上線后報(bào)錯(cuò)那就比較麻煩了，而且還依賴APP環(huán)境才能跑的網(wǎng)頁(yè)，更加難以查找問(wèn)題。如果讓移動(dòng)端也擁有類似Chrome DevTools工具那豈不是很愉快么？

vConsole便是這樣一款很棒的移動(dòng)端DevTools工具，由大廠企鵝出品。但本文把他定位為男二號(hào)，今天的主角男一號(hào)是：Eruda！vConsole的同類。如果你不知道怎么在移動(dòng)端調(diào)試網(wǎng)頁(yè)，那么本篇文章對(duì)你很有幫助，如果你是vConsole的用戶，那么你也可嘗試一下Eruda，如果你是移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)骨灰級(jí)玩家，那么可以選擇低調(diào)的忽略本文。

Eruda是誰(shuí)？

大家好，給大家介紹一下，這是我的.....。Eruda 是一個(gè)專為手機(jī)網(wǎng)頁(yè)前端設(shè)計(jì)的調(diào)試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕獲XHR請(qǐng)求、顯示本地存儲(chǔ)和 Cookie 信息、瀏覽器特性檢測(cè)等等。

GitHub地址為：https://github.com/liriliri/eruda，顏值和技能都很棒的Erdua：

詳細(xì)介紹可以戳這里產(chǎn)看，我就不贅述了

使用技巧

這才是本文重點(diǎn)。Eruda的基本使用方法推薦使用CDN和可配置參數(shù)的形式，在頁(yè)面引入如下代碼：

;(function () {
    var src = "http://cdn.bootcss.com/eruda/1.2.4/eruda.min.js";
    if (!/eruda=true/.test(window.location) && localStorage.getItem("active-eruda") !== "true") return;
    document.write("");
    document.write("eruda.init();");
})();

eruda.init();里面可以傳入要初始化哪些面板，默認(rèn)加載所有。

這樣使用方式?jīng)]有錯(cuò)，但是如果Eruda要跟著發(fā)布到線上的話，那我們要?jiǎng)h除這段代碼？因?yàn)檫@樣會(huì)不管你需不需要調(diào)試Eruda都會(huì)立即加載，在頁(yè)面出現(xiàn)Eruda的圖標(biāo)。我的目標(biāo)是，Eruda可以保留在頁(yè)面里，無(wú)論什么環(huán)境，只要我們想呼喚它出現(xiàn)的時(shí)候它才出現(xiàn)，不需要它的時(shí)候它只是一段不會(huì)生效的普通代碼。

我想到的辦法是：首先把上述引入代碼的src放到if里，同時(shí)把localStorage改為sessionStorage，active-eruda參數(shù)也可以改個(gè)更短的名字，改后的代碼如下：

;(function () {
    if (!/eruda=true/.test(window.location) || sessionStorage.getItem("eruda") !== "true") return;
    var src = "http://cdn.bootcss.com/eruda/1.2.4/eruda.min.js";
    document.write("");
    document.write("eruda.init();");
})();

這段代碼的意思是如果URL中有參數(shù)eruda=true或者sessionStorage中eruda的值為true才加載Eruda。這樣的好處是，我們需要調(diào)試的時(shí)候可以在網(wǎng)頁(yè)URL后面加個(gè)參數(shù)即可，不需要調(diào)試的它不會(huì)加載。

然而，這在開(kāi)發(fā)階段可以這樣做比較好，但是在線上環(huán)境可能要加URL參數(shù)比較麻煩。于是我想到了在頁(yè)面中點(diǎn)擊某個(gè)元素10次再加載Eruda，點(diǎn)擊10次或者更多次，然后在sessionStorage中寫(xiě)入eruda=true，然后刷新當(dāng)前頁(yè)。相反，再點(diǎn)擊10次關(guān)閉Eruda。用這樣比較隱藏的方式開(kāi)啟或關(guān)閉Eruda，這樣線上環(huán)境也可以自由開(kāi)啟或關(guān)閉Eruda了。

例子：假如有這樣的一個(gè)頁(yè)面，里有一個(gè)標(biāo)題文字

——規(guī)則詳情——



.....

那么我們可以在h2標(biāo)簽上綁定一個(gè)click事件，加入方法名叫showEruda

——規(guī)則詳情——



.....

這樣點(diǎn)擊規(guī)則詳情10次就可以喚起Eruda了，再點(diǎn)擊10次就關(guān)閉Eruda，反正我覺(jué)得這樣挺好的。

不知道大家都是怎么用的呢？

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89385.html

相關(guān)文章

  • Eruda 一個(gè)可能被人遺忘的調(diào)試神器

    摘要：引言日常工作中再牛逼的大佬都不敢說(shuō)自己的代碼是完全沒(méi)有問(wèn)題的，既然有問(wèn)題，那就也就有調(diào)試，說(shuō)到調(diào)試工具，大家可能對(duì)于還有遠(yuǎn)程調(diào)試等比較熟悉，甚至有些是我可能也沒(méi)有用過(guò)的這里噴一句吧，誰(shuí)都別給我提啊，那個(gè)不叫調(diào)試工具，那叫坑爹神器，話說(shuō)最近不 showImg(https://segmentfault.com/img/bVbk8zn?w=1008&h=298); 引言 ?　　日常工作中再牛...

    mingzhong 評(píng)論0 收藏0

  • android移動(dòng)端調(diào)試—前端開(kāi)發(fā)工具Eruda

    摘要：通過(guò)使用通過(guò)安裝文件對(duì)于移動(dòng)端來(lái)說(shuō)略重后大概。建議通過(guò)參數(shù)來(lái)控制是否加載調(diào)試器，比如初始化時(shí)可以傳入配置用于插件初始化的元素，如果不設(shè)置，默認(rèn)創(chuàng)建作為容器直接置于根結(jié)點(diǎn)下面指定要初始化哪些面板，默認(rèn)加載所有示例 Eruda 通過(guò)CDN使用： ?eruda.init(); 通過(guò)npm安裝： n...

    jeyhan 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    xiaokai 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    CHENGKANG 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<