建站
咨詢
售后
建站咨詢
新聞中心
本篇文章重點為大家講解一下瀏覽器調(diào)試時常用的一些小技巧，有需要的小伙伴可以參考一下。
會昌ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
選擇DOM元素
如果熟悉jQuery，就會知道 $('.class') 和 $('#id') 選擇器有多么重要。它們根據(jù)與之關(guān)聯(lián)的類或 ID 選擇 DOM 元素。但是當(dāng)你沒有引用 jQuery時，你仍然可以在谷歌開發(fā)控制臺中進行同樣的操作。
$('tagName') $('.class') $('#id') and $('.class #id') 等效于 document.querySelector(' ')，這將返回 DOM 中與選擇器匹配的第一個元素。
也可以使用 $$(tagName) 或 $$(.class), 注意雙元符號，根據(jù)特定的選擇器選擇DOM的所有元素。這也將它們放入數(shù)組中，你也可以通過指定數(shù)組中該元素的位置來從中選擇特定的元素。
例如，$$('.className') 獲取具有類 className 的所有元素，而$$('.className')[0]和 $$('.className')[1]獲取到分別是第一個和第二個元素。
將瀏覽器轉(zhuǎn)換為編輯器
你有多少次想知道你是否可以在瀏覽器中編輯一些文本？ 答案是肯定的，你可以將瀏覽器轉(zhuǎn)換為文本編輯器。 你可以在 DOM 中的任何位置添加文本和從中刪除文本。你不再需要檢查元素并編輯HTML。相反，進入開發(fā)人員控制臺并輸入以下內(nèi)容:
document.body.contentEditable=true
這將使內(nèi)容可編輯?，F(xiàn)在，你幾乎可以編輯DOM中的任何內(nèi)容，還在等什么，快去試試吧。
查找與DOM中的元素關(guān)聯(lián)的事件
調(diào)試時，需要查找 DOM 中某個元素的事件偵聽器感時，谷歌控制臺用了 getEventListeners使找到這些事件更加容易且直觀。
getEventListeners($(‘selector’)) 返回一個對象數(shù)組，其中包含綁定到該元素的所有事件。你可以展開對象來查看事件:
查找與DOM中的元素關(guān)聯(lián)的事件
要找到特定事件的偵聽器，可以這樣做:
getEventListeners($(‘selector’)).eventName[0].listener
這將顯示與特定事件關(guān)聯(lián)的偵聽器。這里 eventName[0] 是一個數(shù)組，它列出了特定事件的所有事件。例如:
getEventListeners($(‘firstName’)).click[0].listener
將顯示與 ID 為 'firstName' 的元素的單擊事件關(guān)聯(lián)的偵聽器。
監(jiān)控事件
如果希望在執(zhí)行綁定到 DOM 中特定元素的事件時監(jiān)視它們，也可以在控制臺中這樣做。你可以使用不同的命令來監(jiān)控其中的一些或所有事件:
-
monitorEvents($(‘selector’))將監(jiān)視與選擇器的元素關(guān)聯(lián)的所有事件，然后在它們被觸發(fā)時將它們打印到控制臺。例如，
monitore($(#firstName))將打印
ID 為
firstName元素的所有事件。
-
monitorEvents($(‘selector’),’eventName’)將打印與元素綁定的特定事件。 你可以將事件名稱作為參數(shù)傳遞給函數(shù)。 這將僅記錄綁定到特定元素的特定事件。 例如，monitorEvents($(‘#firstName’),’click’) 將打印綁定到ID為’firstName’的元素的所有
click事件。
-
monitore($(selector)，[eventName1, eventName3'， .])將根據(jù)您自己的需求記錄多個事件。與其傳遞單個事件名作為參數(shù)，不如傳遞包含所有事件的字符串?dāng)?shù)組。例如
monitore($(#firstName)，[click, focus])將記錄與ID firstName元素綁定的
click事件和
focus事件。
-
unmonitorevent ($(selector)):這將停止監(jiān)視和打印控制臺中的事件。
檢查 DOM 中的一個元素
你可以直接從控制臺檢查一個元素:
-
inspect($('selector'))將檢查與選擇器匹配的元素，并轉(zhuǎn)到 Chrome Developer Tools中的
Elements 選項卡。 例如，
inspect($('#firstName'))將檢查 ID為 ‘firstName’ 的元素，
spect($('a')[3])將檢查 DOM 中的第 4 個
a元素。
-
$0,
$1,
$2等可以幫助你獲取最近檢查過的元素。 例如，
$0表示最后檢查的 DOM 元素，而
$1倒數(shù)第二個檢查的 DOM 元素。
檢索最后一個結(jié)果的值
你可以將控制臺用作計算器。當(dāng)你這樣做的時候，你可能需要用第二個來跟蹤一個計算。以下是如何從內(nèi)存中檢索先前計算的結(jié)果:
$_
過程如下：
2+3+4
9 //- The Answer of the SUM is 9
$_
9 // Gives the last Result
$_ * $_
81 // As the last Result was 9
Math.sqrt($_)
9 // As the last Result was 81
$_
9 // As the Last Result is 9
清除控制臺和內(nèi)存
如果你想清除控制臺及其內(nèi)存，輸入如下：
clear()
推薦
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
分享文章：瀏覽器調(diào)試時常用的小技巧
網(wǎng)頁URL：http://m.5511xx.com/article/djoijhs.html
