實用瀏覽器調(diào)試技巧（動畫、節(jié)點刪除、節(jié)點增加）

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

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

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

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

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

坑2:dom元素一直在動，css代碼也一直在變。

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

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