我所不知道的 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的開發者工具來提高你的應用的性能的細節，請訪問這個鏈接。