實用瀏覽器調試技巧（動畫、節點刪除、節點增長）

今天分享一些平時不經常使用，但總有一天你會用到的瀏覽器調試技巧。先來看一個H5頁面，下面是地址
http://liticool.info/wsvist/i... （訂閱號裏沒法跳轉外部連接的話請複製此連接在微信中打開liticool.info/wsvist/index.html#/?sharekey=0a4384df4f65b6b47a74f76f8f3f3e1d&source=wxd56b51346bc8cbfc）我是在微信中看到這個H5場景的，看到了裏面酷炫的動畫。就想看看這個效果是怎麼實現的，而後我把地址複製到了瀏覽器中，個人踩坑之路也就此開始了。

坑1:當我把連接複製到瀏覽器以後，發如今瀏覽器中一直顯示一個loading。不能正常觀看。

思考：爲啥在微信中能夠，在瀏覽中就不行呢？而後立馬想到了用微信開發者工具打開，果真好使。能夠看到酷炫的動畫了。而後我F12打開調試工具，選取其中一個dom元素。準備看它的css代碼。可是問題又來了。

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

通過高人指點：點擊關閉按鈕旁邊的三個點->Moretools->Animation.你會發現出現一個新的面板，點擊那個暫停按鈕。你會發現css動畫中止了。如圖。
坑3:dom動一下子就被刪除了。出現了新的場景（渲染了新的dom元素）這該如何是好.

動畫雖然中止了，可是dom的刪除是js控制的。js的還在運行。過幾秒以後又頁面又從新渲染了其餘dom元素。怎麼讓js也中止執行呢，首先想到的是打個斷點，但問題是去哪裏打斷點呢。打的早了dom還沒渲染出來，打的地方不對代碼可能不走那裏。因而高人又出來指點了：能夠在dom節點上打斷點：選取一個dom元素，右鍵->Break On->node removal.這樣在此dom節點被刪除的時候，程序就會停下來。如圖。
如此這般，咱們就能夠輕鬆找到想要看的css代碼了。
補充：還有一種阻止js執行的辦法，就是禁用javascript。仍是點擊三個點->Settings->Debugger->Disable JavaScript打勾就能夠了。這樣js就不會執行了，dom元素也不會被刪掉了。如圖：
彩蛋：介紹一個在瀏覽器中全局搜索代碼的方法，點擊Sources面板，會看到左側有目錄結構，右鍵目錄結構->Search in all files。這樣就能夠在全部文件中搜索代碼了。這個在開發中仍是頗有做用的。如圖：
小擴展：還有一個場景：一個頁面會從後臺請求字體包，字體包會在某個時刻經過js加入到style標籤中。可是咱們不知道是哪段js代碼執行了這個操做。如今想找到這個代碼，應該怎麼辦呢？方法：給style標籤打斷點：右鍵style標籤->Break On->subtree modifications 這樣，在style中插入@font-face時，就會直接停在執行插入的那一段js代碼處。如圖