国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

mingzhong / 2538人閱讀

摘要：引言日常工作中再牛逼的大佬都不敢說自己的代碼是完全沒有問題的，既然有問題，那就也就有調(diào)試，說到調(diào)試工具，大家可能對于還有遠(yuǎn)程調(diào)試等比較熟悉，甚至有些是我可能也沒有用過的這里噴一句吧，誰都別給我提啊，那個(gè)不叫調(diào)試工具，那叫坑爹神器，話說最近不

引言

?　　日常工作中再牛逼的大佬都不敢說自己的代碼是完全沒有問題的，既然有問題，那就也就有調(diào)試，說到調(diào)試工具，大家可能對于fiddler、Charles、chrome devtools、Firebug、還有Safari遠(yuǎn)程調(diào)試等比較熟悉，甚至有些是我可能也沒有用過的；

　　這里噴一句吧，誰都別給我提IE啊，IE那個(gè)不叫調(diào)試工具，那叫坑爹神器，話說最近不是又甩鍋了，把自己的革命老根據(jù)地都甩了。

　　俗話說預(yù)先善其事必先利其器，今天想給大家分享的是一個(gè)可能被人們忽略的小工具，為什么說被人們忽略呢？因?yàn)榘l(fā)現(xiàn)github上它才4.6k Star、457 Fork、Watch 173次，也就是說千萬開發(fā)者中知道它的人可能不超過5w，于是決定分享一波，此文重在引導(dǎo)，希望能幫大家開發(fā)中帶來一點(diǎn)點(diǎn)便利、效率的提升：

這里是IT平頭哥聯(lián)盟，我是首席填坑官—蘇南,用心分享 做有溫度的攻城獅。
公眾號(hào)：honeyBadger8，群：912594095。
Eruda是什么？

　　Eruda是什么？Eruda 是一個(gè)專為前端移動(dòng)端、移動(dòng)端設(shè)計(jì)的調(diào)試面板，類似Chrome DevTools 的迷你版（沒有chrome強(qiáng)大 這個(gè)是可以肯定的），其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕獲XHR請求、顯示本地存儲(chǔ)和 Cookie 信息、瀏覽器特性檢測等等。

　　雖說日常的移動(dòng)端開發(fā)時(shí)，一般都是在用Chrome DevTools瀏覽器的移動(dòng)端模式模擬各種手機(jī)型號(hào)來進(jìn)行開發(fā)和調(diào)試，確保功能/頁面展示等都沒有問題了，才會(huì)提交測試；

　　但是前面都講了，只是模擬、模擬，當(dāng)下手機(jī)品牌可算是千千萬，手機(jī)中各種類瀏覽器，甚至APP都有自己不一樣的特色 腰間盤突出，有的還特別突出，有病我們得給它治啊，不然測試、產(chǎn)品、需求、領(lǐng)導(dǎo)都不會(huì)放過我們，比如下圖場景。

如何使用？

它支持npm方式的，這個(gè)是不是很開心？？

外鏈，沒錯(cuò)，就是外鏈的形式引入，對于它，我覺得npm的方式?jīng)]有什么太大意義，直接以外鏈的引入更方便，也能減少項(xiàng)目資源包的大小，更便于控制是否要加載這個(gè)資源。

方式一，默認(rèn)引入：



方式二，動(dòng)態(tài)加載：

__DEBUG__ && loadJS("http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js", ()=>{
  eruda.init();
});//蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8

方式三 ，指定場景加載：
//比如線上 給自己留一個(gè)后門，
//我們一般的做法是喜歡給某個(gè)不起眼的元素，添加一個(gè)點(diǎn)擊事件，要點(diǎn)它十次、八次以后才開啟 debug 模式；
;(function () {
    var src = "http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js";
    if (!/eruda=true/.test(window.location) && localStorage.getItem("active-eruda") != "true") return;
    document.write("");
    document.write("eruda.init();");
})();

方式四 ，npm：
 npm install eruda --save

…… 加載的方式很多
小而美

這里小，不是指它的包小啊，知道它的同學(xué)都知道，其實(shí)它的包并不?。?b>約100kb gzip）；

100kb不小了，用形容妹子的話來說就是：豐滿，直接說它胖，你就死定了；

這里的小而美是指小巧功能也強(qiáng)大，界面也好看;

說了這么多 來看看它到底長啥樣吧：

功能清單 console

console 的作用就不用廢話了，大家都懂；

早期在console誕生之前，我們的調(diào)試功能都是alert過多，包括現(xiàn)在的移動(dòng)端，在手機(jī)上我們想看到參數(shù)值、數(shù)據(jù)、節(jié)點(diǎn)等都以alert打印為多數(shù)，但過于粗暴、而且一不小心有可能帶到線上去了；

eruda 能幫我們解決這個(gè)問題；所有的日志、錯(cuò)誤都能幫我們捕獲到

甚至我們還能像chrome,直接在控制臺(tái)執(zhí)行js代碼；

Elements

eruda 它沒有在PC端這么直觀，但也因?yàn)樵谝苿?dòng)端展示的方式局限性，

它能把每一個(gè)父節(jié)點(diǎn)下的每一個(gè)子節(jié)點(diǎn)全部列出來；你點(diǎn)擊某個(gè)子節(jié)點(diǎn)時(shí)，列出當(dāng)前節(jié)點(diǎn)全部的屬性、樣式、盒子模型等；

查看標(biāo)簽內(nèi)容及屬性；查看Dom上的樣式；支持頁面元素高亮；支持屏幕直接點(diǎn)擊選取；查看Dom上綁定的各類事件。

甚至也能使用Plugins 插件，做到跟PC端一樣，形成 dom tree；


Network

現(xiàn)在的項(xiàng)目大多都是前后端分享的形式了，前端處理的業(yè)務(wù)越來越多、各種請求資源等；

干的越多承擔(dān)責(zé)任也越多、鍋也越多，又大又平的那種哦～

所以 Network 的必要性不言而喻，它能捕獲請求，查看發(fā)送數(shù)據(jù)、返回頭、返回內(nèi)容等信息，它對于我們平時(shí)前后端聯(lián)調(diào)出現(xiàn)的問題定位是有很大幫助的，比如：后端說你請求參數(shù)少了，前端你看了代碼邏輯沒有問題，但在手機(jī)上就是調(diào)不通，Network 能很直接明了的看到你請求帶了什么。

Resources

它跟 Chrome Devtools 里的 Application + Source,兩者的結(jié)合體；

Resources 它能查看 Cookie、localStorage、sessionStorage等信息，并且還能執(zhí)行清除操作（Application）；

它還查看當(dāng)前頁面加載腳本及樣式文件；查看頁面加載過的圖片等資源（Source）；

好吧，感覺說的再多，也不如上圖直接：

Sources/Info

Sources：查看頁面源碼；格式化html，css，js代碼及json數(shù)據(jù)。

Info：主要輸出URL信息及User Agent；及其他的一些手機(jī)系統(tǒng)信息，同時(shí)也支持自定義輸出內(nèi)容哦。

高階用法

以上剛才介紹的是它的一些基本的功能，也是我自己在工作中用的較多的；

最近發(fā)現(xiàn)新版本功能要強(qiáng)大不少，之前一直用的1.0.5，好像是沒有插件這一項(xiàng)的；

大概看了一下，都蠻強(qiáng)大，包括上面的Dom tree,插件這部分并沒有都實(shí)際應(yīng)用過，所以也就不打腫臉充胖子了，有興趣的同學(xué)可以自己看看。

如果覺得已經(jīng)的插件都滿足不了你的需求，它還支持自定義插件自己編寫。

結(jié)尾：

　　以上就是今天給大家?guī)淼姆窒?，工作中用了蠻久，挺方便的，對于定位移動(dòng)端的疑難雜癥問題、甚至留下后門定位線上問題都有很大幫助，如文中有理解不到位之處，歡迎留言指出。

　　線上問題我們一般的做法是喜歡給某個(gè)不起眼的元素，添加一個(gè)點(diǎn)擊事件，要點(diǎn)它十次、八次以后才開啟 debug 模式；

　　上面二維碼確實(shí)是真實(shí)的官方Demo，不用擔(dān)心有套路,也有鏈接：https://eruda.liriliri.io/
Github 地址:https://github.com/liriliri/eruda

其他

vue/react/java/大廠面試題等資源免費(fèi)獲取

大家好 這就是2018年的我～

月入三萬 還能少了你一個(gè)雞蛋

如何給localStorage設(shè)置一個(gè)有效期？

作者：蘇南 - 首席填坑官
鏈接：http://susouth.com/
交流：912594095、公眾號(hào)：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明原鏈接及出處。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100356.html

相關(guān)文章

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

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

    xzavier 評論0 收藏0

  • 2019個(gè)稅，我們每年能省多少錢～

    摘要：注意每月元，扣除期限最長不超過個(gè)月，扣除人夫妻雙方約定，可由其中一方扣除，確定后，一個(gè)納稅年度內(nèi)不得更改。注意醫(yī)保目錄范圍內(nèi)的醫(yī)藥費(fèi)用支出，醫(yī)保報(bào)銷后的個(gè)人自付部分累計(jì)超過元的部分，且不超過元的部分。 showImg(https://segmentfault.com/img/bVblMkk?w=652&h=298); 　　看大家這些天都在群里討論，2019年1月1日起個(gè)稅免征額調(diào)整政策...

    jhhfft 評論0 收藏0

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

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

    jeyhan 評論0 收藏0

  • 互聯(lián)網(wǎng)"凜冬"，看大廠HR怎么說~

    摘要：寫在前面的話最近互聯(lián)網(wǎng)朋友圈充斥著一股恐慌的氣息。本人作為一名，萬不敢稱資深，只是呆過幾年大型央企和大型互聯(lián)網(wǎng)企業(yè)，聊有一點(diǎn)自己的看法罷了。如果不放心，以一周為期，對展示在面前的機(jī)會(huì)進(jìn)行初步分級(jí)。也可以略高于期望，以此探一探對方的反應(yīng)。 showImg(https://segmentfault.com/img/bVblxeY?w=1008&h=298); 寫在前面的話 　　最近互聯(lián)網(wǎng)朋...

    renweihub 評論0 收藏0

  • 扯一下似乎被遺忘的盒模型

    摘要：不過想想，現(xiàn)在都讓微軟給退下了，還有多少呢。接著就是要提到的一點(diǎn)，盒模型的計(jì)算方式，標(biāo)準(zhǔn)方式和模式是不同的，不知道又想知道的同學(xué)請問谷哥或者度娘吧，記得幾年前我那本破書上也又提到，還做了一些測試。扯遠(yuǎn)了，盒模型大概的情況就是這樣。 前段時(shí)間為了組里在擴(kuò)充人員，在面試的過程中有過幾次扯到盒模型這個(gè)東西。對于盒模型以前是經(jīng)常提到，現(xiàn)在被CSS3的風(fēng)頭給蓋下去了，已經(jīng)沒多少人去講盒模型，也導(dǎo)...

    Barry_Ng 評論0 收藏0

發(fā)表評論

0條評論

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