我所不知道的 Chrome 開發者工具

自打我開始進行Web開發後，我就一直将Firebug當作我的調試工具使用。一直以來Firebug對我的幫助非常大，但據我所知，Chrome的開發者工具中有一個功能是Firebug不具有的，它就是性能分析工具，該工具可以幫助我們發現網頁中記憶體洩漏的迹象。我早就想參加一下免費課程Explore and Master Chrome DevTools（探索并掌握Chrome的開發者工具），最後我終于可以把這事從我的待辦事項清單中劃掉了。這個課程花了我四個小時才學完，我從中學會了Chrome的開發者工具中我以前并不了解的一些非常酷的功能。

fbm 翻譯于 11天前 0人頂 頂 翻譯的不錯哦!

獲得DOM節點的方法 除了可以通過使用放大器在網頁中直接選取DOM節點外，你還可以使用jQuery風格的“$”來獲得想要的DOM節點。例如，$(“#name”)将會獲得id為name的DOM節點。如果你在元素标簽中選擇了一個DOM節點，你就可以在控制台标簽中鍵入“$0″來獲得該DOM節點。另一方面，你在控制台标簽中鍵入“inspect($0)”，就可以轉到顯示該節點的元素标簽中了。 顯示不同狀态的樣式 在元素 --> 樣式标簽下有個用于切換元素狀态的選項，你可以用它将所選元素的狀态設定為active（激活）, focus（聚焦）, hover（滑鼠懸停）和visited（已通路過）。我發現這個對于調試這些狀态的樣式問題幫助非常大，因為在樣式标簽下隻顯示目前狀态下的樣式定義。 動态編輯源檔案和資料源并檢視修改的曆史記錄 你可以在源檔案标簽下修改CSS檔案或者JavaScript檔案。滑鼠右鍵點選檔案，你将看到有個“本地修改。。。”這個菜單，單擊該菜單你就能看到該檔案的修改曆史記錄并可以對它們進行恢複操作。盡管我們已經習慣了編輯CSS檔案，但能夠動态的更新JavaScript用處可大了。 将更新的檔案儲存到本地 如果你在源檔案标簽中對檔案進行了修改，Chrome會将這些修改儲存到它的本地存儲之中。你也可以将修改後的檔案儲存到你的計算機之中并用它們覆寫原先的檔案。 時間線中的事件/幀視圖 時間線标簽為Chrome所記錄下來的内容提供三種類型的視圖: 事件、幀和記憶體 The 事件/幀視圖顯示的是花在HTML解析（藍色部分）、JavaScript渲染(黃色部分)、樣式計算(紫色)以及CSS渲染(綠色)等方面的時間。記憶體視圖是用來尋找記憶體洩漏的迹象的。 其它插件 頁面速度（Page speed）：它同YSlow類似，可以在提高性能方面為你提出一些建議。安裝完成後，它會作為開發者工具中的一個新标簽顯示出來。 Google Closure：将多個JavaScript檔案壓縮為一個檔案，以減少HTTP請求的個數。 上面隻是我從這個課程中學到的一些新東西。我非常樂于參加這個互動式課程。想要了解更多關于如何通過使用Chrome的開發者工具來提高你的應用的性能的細節，請通路這個連結。