實(shí)用瀏覽器調(diào)試技巧（動(dòng)畫、節(jié)點(diǎn)刪除、節(jié)點(diǎn)增加）

honmaple 發(fā)布于2019-08-30 11:11 / 697人閱讀

摘要：今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。如圖彩蛋介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)。如圖小擴(kuò)展還有一個(gè)場(chǎng)景一個(gè)頁面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過加入到標(biāo)簽中。

今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。先來看一個(gè)H5頁面，下面是地址
http://liticool.info/wsvist/i... （訂閱號(hào)里無法跳轉(zhuǎn)外部鏈接的話請(qǐng)復(fù)制此鏈接在微信中打開liticool.info/wsvist/index.html#/?sharekey=0a4384df4f65b6b47a74f76f8f3f3e1d&source=wxd56b51346bc8cbfc）我是在微信中看到這個(gè)H5場(chǎng)景的，看到了里面酷炫的動(dòng)畫。就想看看這個(gè)效果是怎么實(shí)現(xiàn)的，然后我把地址復(fù)制到了瀏覽器中，我的踩坑之路也就此開始了。

坑1:當(dāng)我把鏈接復(fù)制到瀏覽器之后，發(fā)現(xiàn)在瀏覽器中一直顯示一個(gè)loading。不能正常觀看。

思考：為啥在微信中可以，在瀏覽中就不行呢？然后立馬想到了用微信開發(fā)者工具打開，果然好使。可以看到酷炫的動(dòng)畫了。然后我F12打開調(diào)試工具，選取其中一個(gè)dom元素。準(zhǔn)備看它的css代碼。但是問題又來了。

坑2:dom元素一直在動(dòng)，css代碼也一直在變。

經(jīng)過高人指點(diǎn)：點(diǎn)擊關(guān)閉按鈕旁邊的三個(gè)點(diǎn)->Moretools->Animation.你會(huì)發(fā)現(xiàn)出現(xiàn)一個(gè)新的面板，點(diǎn)擊那個(gè)暫停按鈕。你會(huì)發(fā)現(xiàn)css動(dòng)畫停止了。如圖。
坑3:dom動(dòng)一會(huì)兒就被刪除了。出現(xiàn)了新的場(chǎng)景（渲染了新的dom元素）這該如何是好.

動(dòng)畫雖然停止了，但是dom的刪除是js控制的。js的還在運(yùn)行。過幾秒之后又頁面又重新渲染了其他dom元素。怎么讓js也停止執(zhí)行呢，首先想到的是打個(gè)斷點(diǎn)，但問題是去哪里打斷點(diǎn)呢。打的早了dom還沒渲染出來，打的地方不對(duì)代碼可能不走那里。于是高人又出來指點(diǎn)了：可以在dom節(jié)點(diǎn)上打斷點(diǎn)：選取一個(gè)dom元素，右鍵->Break On->node removal.這樣在此dom節(jié)點(diǎn)被刪除的時(shí)候，程序就會(huì)停下來。如圖。
如此這般，我們就可以輕松找到想要看的css代碼了。
補(bǔ)充：還有一種阻止js執(zhí)行的辦法，就是禁用javascript。還是點(diǎn)擊三個(gè)點(diǎn)->Settings->Debugger->Disable JavaScript打勾就可以了。這樣js就不會(huì)執(zhí)行了，dom元素也不會(huì)被刪掉了。如圖：
彩蛋：介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊Sources面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)->Search in all files。這樣就可以在所有文件中搜索代碼了。這個(gè)在開發(fā)中還是很有作用的。如圖：
小擴(kuò)展：還有一個(gè)場(chǎng)景：一個(gè)頁面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過js加入到style標(biāo)簽中。但是我們不知道是哪段js代碼執(zhí)行了這個(gè)操作。現(xiàn)在想找到這個(gè)代碼，應(yīng)該怎么辦呢？方法：給style標(biāo)簽打斷點(diǎn)：右鍵style標(biāo)簽->Break On->subtree modifications 這樣，在style中插入@font-face時(shí)，就會(huì)直接停在執(zhí)行插入的那一段js代碼處。如圖