靈活使用console讓js調(diào)試更簡單的方法步驟

1、靈活使用consol讓js調(diào)試更簡單的方法步驟e開發(fā)最常用的高度就是consolelo雖然consolelIIIlikeISkitlesIbutIIIdoInotIlikeIpus.常見的占位符o這是字母o,不是，它接受對象，s接受字符串,console.lag(ThestateobjectfarisSusan,user)ThestateobjectforSusanisfdetaiIs;.details:name:Susan_proto_:Object一proto.:Object另一個有趣的是c，這可能與你所想不太相同，它實際上是值的占位符。使用(占位符時，對應(yīng)的后面的參數(shù)必須是語句，用來對輸

2、出內(nèi)容進行渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。console.log(IIamIaI%cbutton,Icolor:Iwhite;Ibackground-color:Iorange;IpaddinCcnsdle.logt!Iacbutton19Solei：white;backgraundl-rolcr:orangie;paedirgibordsr-radiusZp-x)它并不優(yōu)雅，也不是特別有用。當(dāng)然，這并不是一個真正的按鈕。coft531eilog(J%cThere:(3rdwasupdatedsuccessfullypcoLar:green;backgrsund-olor:Li

3、ghtsreen;peddinkg:SixSps;);Therecordwaiupdated它有田嗎恩恩恩它有H嗎恩恩恩。console.dir()在大多數(shù)情況下，console的函數(shù)非常類似于lo,盡管它看起來略有不同。console.log(iten)id:35,itemjder7color:red,size:medium1,price:2dundefinedconsole.dir(iten)Objectundefined下拉小箭頭將顯示與上面相同的對象詳細信息，這也可以從consoleld版本中看到。當(dāng)你查看元素的結(jié)構(gòu)時候，你會發(fā)現(xiàn)它們之間的差異更大，也更有趣。letIelemenocu

4、ment.getElemencontaine使用consolelc查看:console.log(element)dividx-container:after打開了一些元素，這清楚地顯示了DOM,我們可以在其中導(dǎo)航。但是console.dir(element)給出了更加方便查看DOM結(jié)構(gòu)的輸出：這是一種更客觀地看待元素的方式。有時候，這可能是您真正想要的，更像是檢查元素。vdiviTjx-cofltalrterdccessKey:aUQn:*asslgnedSUtinullattributeStyleMtptStylePffipertywap(slae:1/attribute;:Nanedkto

5、deMap茁：ldrId:length:1dumcapitaIlze:*baseURX：httfVi/Atww.rwddlt.cwvchildElementCounts1*村1制晦血笄NodeList【，蝕用叩鮒Ef百PKgbchi制nn;KTHLCoILeet?n(div.肌口鼬b-E-Pxgw:kclassLiit:DflMTokenListvalue:IctassMarie:clientHeiqtit;498jcUentUft:4cllcntrop:0cllenttfiitth:1440mnterrtEditable:inlieritddtaset:DCMStringMapdirtdra

6、mabe:falsekflretOiildtdiv.eupS&6-*GfKgfVCOnsole.warn()bfir：ELEm丘ntthlld:div.G可能是最明顯的直接替換|og(),你可以以完全相同的方式使用consolewarn()o唯一真正的區(qū)別是輸出字的顏色是黃色的。具體來說，輸出處于警告級別而不是信息級別，因此瀏覽器將稍微區(qū)別對待它。這具有使其在雜亂輸出中更明顯的效果。、C3n531e.warn(j是一個雲(yún)告：A卜返是一個饕告不過，還有一個更大的優(yōu)勢，因為輸出是警告而不是信息，所以你可以過濾掉所有consolelog并僅保留consolewarno這對于偶爾會在瀏覽器中輸出大量無

7、用廢話的應(yīng)用程序尤其有用。清除一些無用的信息可以讓你更輕松地看到你想要的輸出。console.table()令人驚訝的是，這并不是更為人所知，但是consoletable()函數(shù)旨在以一種比僅僅轉(zhuǎn)出原始對象數(shù)組更整潔的方式顯示表格數(shù)據(jù)。例如，這里有一個數(shù)據(jù)列表。constdata=id:7cb1-e041b126-f3b8,seller:WAL0412,buyer:WAL3023,price:203450,time:1539688433,id:1d4c-31f8f14b-1571,seller:WAL0452,buyer:WAL3023,price:348299,time:1539688433

8、,id:b12c-b3adf58f-809f,seller:WAL0012,buyer:WAL2025,price:59240,time:1539688433;如果我們使用console.log來輸出上面的內(nèi)容，我們會得到一些非常無用的輸出:(3),點擊這個小箭頭可以展開看到對象的內(nèi)容，但是，它并不是我們想要的一目了然”。但是console.table(data)的輸出要有用得多。idsellerbuyerPfitelinee7cbl-e041tl26-k.VfAL|412HWAL3a23B20345015395884331WA13S2334B29915396884332ML2easfl592

9、015395B8433Array(3)第二個可選參數(shù)是所需列的列表。顯然，所有列都是默認值，但我們也可以這樣做console.table(data,id,price);這里要注意的是這是亂序的-最右邊的列標題上的箭頭顯示了原因。我點擊該列進行排序。找到列的最大或最小，或者只是對數(shù)據(jù)進行不同的查看非常方便。順便說一句，該功能與僅顯示一些列無關(guān)，它總是可用的。console.table()只能處理最多1000行，因此它可能不適合所有數(shù)據(jù)集。console.assert()assert()與log()是相同的函數(shù)，assert()是對輸入的表達式進行斷言，只有表達式為alse時，才輸出相應(yīng)的信息到控

10、制臺，示例如下：vararr=1,2,3;console.assert(arr.length=4);va=-j2jHtensely.5352(ar-.length=&Assertiorfailed:console.asssrTundefired有時我們需要更復(fù)雜的條件句。例如，我們已經(jīng)看到了用戶WAL0412的數(shù)據(jù)問題，并希望僅顯示來自這些數(shù)據(jù)的事務(wù)，這是直觀的解決方案。console.assert(tx.buyer=WAL0412,tx);這看起來不錯，但行不通。記住，條件必須為false，斷言才會執(zhí)行，更改如下:console.assert(tx.buyer!=WAL0412,tx);與其

11、中一些類似，console.assert()并不總是特別有用。但在特定的情況下，它可能是一個優(yōu)雅的解決方案console.count()另一個具有特殊用途的計數(shù)器，count只是作為一個計數(shù)器，或者作為一個命名計數(shù)器，可以統(tǒng)計代碼被執(zhí)行的次數(shù)。for(leti=0;i10000;i+)if(i%2)console.count(odds);if(!(i%5)console.count(multiplesOfFive);if(isPrime(i)console.count(prime);這不是有用的代碼，而且有點抽象。這邊也不打算演示isPrime函數(shù)，假設(shè)它是成立的。執(zhí)行后我們會得到一個列表：o

12、dds:1odds:2prime:1odds:3multiplesOfFive:1prime:2odds:4prime:3odds:5multiplesOfFive:2還有一個相關(guān)的console.countReset()，可以使用它重置計數(shù)器。console.trace()trace()在簡單的數(shù)據(jù)中很難演示。當(dāng)您試圖在類或庫中找出是哪個實際調(diào)用者導(dǎo)致了這個問題時，它的優(yōu)勢就顯現(xiàn)出來了。例如，可能有12個不同的組件調(diào)用一個服務(wù)，但是其中一個組件沒有正確地設(shè)置依賴項。exportdefaultclassCupcakeServiceconstructor(dataLib)this.dataLib

13、=dataLib;if(typeofdataLib!=object)console.log(dataLib);console.trace();這里使用consolelog()僅告訴我們傳遞數(shù)據(jù)dataLib是什么，而沒有具體的傳遞的路徑。不過，consoletrace()會非常清楚地告訴我們問題出在Dashboard.js，我們可以看到是newCupcakeService(false)導(dǎo)致錯誤。console.time()console.timeO是用于跟蹤操作時間的專用函數(shù)，它是跟蹤JavaScript執(zhí)行時間的好方法。functionslowFunction(number)varfunct

14、ionTimerStart=newDate().getTime();/somethingsloworcomplexwiththenumbers./Factorials,orwhatever.varfunctionTime=newDate().getTime()-functionTimerStart;console.log(Functiontime:$functionTime);varstart=newDate().getTime();for(i=0;iconsole.time(slowFunction);/somethingsloworcomplexwiththenumbers./Factor

15、ials,orwhatever.console.timeEnd(slowFunction);console.time();for(i=0;i100000;+i)slowFunction(i);console.timeEnd();我們現(xiàn)在不再需要做任何計算或設(shè)置臨時變量。console.group()/thisistheglobalscopeletnumber=1;console.group(OutsideLoop);console.log(number);console.group(Loop);for(leti=0;i5;i+)number=i+number;console.log(numbe

16、r);console.groupEnd();console.log(number);console.groupEnd();console.log(Alldonenow);輸出如下：OutsideLoopLoopElLE11并不是很有用，但是您可以看到其中一些是如何組合的。classMyClassconstructor(dataAccess)console.group(Constructor);console.log(Constructorexecuted);console.assert(typeofdataAccess=object,PotentiallyincorrectdataAccess

17、object);this.initializeEvents();console.groupEnd();initializeEvents()console.group(events);console.log(Initialisingevents);console.groupEnd();letmyClass=newMyClass(false);tConstrlittorConstructorexecutedOAssertionfailed:PotentiallyincorrectdataAccessobjectteventsInitialisingevell.iWv-Eimnt1H3將瀏覽器轉(zhuǎn)換為

18、編輯器你有多少次想知道你是否可以在瀏覽器中編輯一些文本？答案是肯定的，你可以將瀏覽器轉(zhuǎn)換為文本編輯器。你可以在DOM中的任何位置添加文本和從中刪除文本。你不再需要檢查元素并編輯HTML。相反，進入開發(fā)人員控制臺并輸入以下內(nèi)容：document.body.contentEditable=true這將使內(nèi)容可編輯。現(xiàn)在，你幾乎可以編輯DOM中的任何內(nèi)容。查找與DOM中的元素關(guān)聯(lián)的事件調(diào)試時，需要查找DOM中某個元素的事件偵聽器感時，谷歌控制臺了getEventListeners使找到這些事件更加容易且直觀。getEventListeners($(selector)返回一個對象數(shù)組，其中包含綁定到該

19、元素的所有事件。你可以展開對象來查看事件05?ctopframePreservelog、EventListen#rs(?(SJ-firstNanw)Objectclick:Arraylffocu:Array1keyup:Array1click:Array1focus:Array1LintaIJtLi蛇“怯bindedttfrstNaiiiikeyup:Array1g*tEventListen#rs(SCfirstNaFne).click3.listenerfunctioncLichEveni：()qLert(CLiciFvert);DisplavrheI.：sreiierbinrledtoth

20、eclickeventoffirsrNam?要找到特定事件的偵聽器，可以這樣估攵：getEventListeners($(selector).eventName0.listener這將顯示與特定事件關(guān)聯(lián)的偵聽器。這里eventName0是一個數(shù)組，它列出了特定事件的所有事件。例如：getEventListeners($(firstName).click0.listener將顯示與ID為firstName的元素的單擊事件關(guān)聯(lián)的偵聽器。監(jiān)控事件如果希望在執(zhí)行綁定到DOM中特定元素的事件時監(jiān)視它們，也可以在控制臺中這樣做。你可以使用不同的命令來監(jiān)控其中的些或所有事件：monitorEvents($(

21、selector)將監(jiān)視與選擇器的元素關(guān)聯(lián)的所有事件，然后在它們被觸發(fā)時將它們打印到控制臺。例如,monitore($(#irstName)將打印ID為firstName兀素的所有事件?！眒onitorEvents($(selector),eventName)將打印與元素綁定的特定事件。你可以將事件名稱作為參數(shù)傳遞給函數(shù)。這將僅記錄綁定到特定元素的特定事件。例如，monitorEvents($(#firstName),click)將打印綁定到ID為firstName的元素的所有click事件。monitore($(selector),eventName1,eventName3,.)將根據(jù)您自己的需求記錄多個事件。與其傳遞單個事件名作為參數(shù)，不如傳遞包