資訊專欄INFORMATION COLUMN
摘要：今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。如圖彩蛋介紹一個在瀏覽器中全局搜索代碼的方法，點擊面板，會看到左側有目錄結構，右鍵目錄結構。如圖小擴展還有一個場景一個頁面會從后臺請求字體包，字體包會在某個時刻通過加入到標簽中。
今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。先來看一個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代碼處。如圖
作者：易企秀——Hison
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110272.html
摘要：今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。如圖彩蛋介紹一個在瀏覽器中全局搜索代碼的方法，點擊面板，會看到左側有目錄結構，右鍵目錄結構。如圖小擴展還有一個場景一個頁面會從后臺請求字體包，字體包會在某個時刻通過加入到標簽中。 今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。先來看一個H5頁面，下面是地址http://liticool.info/wsvist/i...
摘要：今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。如圖彩蛋介紹一個在瀏覽器中全局搜索代碼的方法，點擊面板，會看到左側有目錄結構，右鍵目錄結構。如圖小擴展還有一個場景一個頁面會從后臺請求字體包，字體包會在某個時刻通過加入到標簽中。 今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。先來看一個H5頁面，下面是地址http://liticool.info/wsvist/i...
摘要：今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。如圖彩蛋介紹一個在瀏覽器中全局搜索代碼的方法，點擊面板，會看到左側有目錄結構，右鍵目錄結構。如圖小擴展還有一個場景一個頁面會從后臺請求字體包，字體包會在某個時刻通過加入到標簽中。 今天分享一些平時不常用，但總有一天你會用到的瀏覽器調試技巧。先來看一個H5頁面，下面是地址http://liticool.info/wsvist/i...
摘要：而就是告訴程序在那里停下來進行單步調試，俗稱斷點。面向，專為異步而生的斷點調試功能。中的調試技巧元素的控制臺書簽開發者工具和都提供了書簽功能，用于顯示你在元素標簽頁或標簽頁中最后點擊的元素。 寫在前面本文包括瀏覽器調試，不包括web移動端調試。本文調試均在chrome瀏覽器進行 alert 這個不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
摘要：而就是告訴程序在那里停下來進行單步調試，俗稱斷點。面向，專為異步而生的斷點調試功能。中的調試技巧元素的控制臺書簽開發者工具和都提供了書簽功能，用于顯示你在元素標簽頁或標簽頁中最后點擊的元素。 寫在前面本文包括瀏覽器調試，不包括web移動端調試。本文調試均在chrome瀏覽器進行 alert 這個不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
閱讀 3461·2023-04-26 02:48
閱讀 1465·2021-10-11 10:57
閱讀 2489·2021-09-23 11:35
閱讀 1196·2021-09-06 15:02
閱讀 3294·2019-08-30 15:54
閱讀 1612·2019-08-30 15:44
閱讀 879·2019-08-30 15:44
閱讀 988·2019-08-30 12:52
