打開Developer Tools的方法：
a. 點擊F12
b. 在瀏覽器中選擇Tools-->F12 Develooper Tools
打開后圖示：
從上圖我們可以看到，Developer Tools有八個獨立的選項卡：
DOM資源管理器(DOM Explorer): 顯示了在瀏覽器中渲染網頁時的結構，並使在活動頁中編輯HTML和樣式的操作成為可能。不必編輯或重新加載資源，即可執行操作，以便你可以快速解決顯示問題或試用新思路。
控制台(Console): 提供了與運行代碼交互、使用控制台命令行發送信息和使用控制台調試API獲取信息的方式。
調試器(Debugger):檢查代碼的作用、代碼執行時間及其執行方式。在執行過程中暫停代碼，逐行操作代碼，然后查看每個步驟中變量和對象的狀態。
網絡(Network): 提供了涉及加載和網頁操作的任何網絡請求的詳細信息。
UI響應能力(UI Responsiveness): 在頁面減慢時幫助我們尋找問題症結，可以使用它分析速度緩慢的特定點，也可以顯示導致這些問題的操作。
探查器(Profiler)：JavaScript速度的單純計量工具，顯示了在分析會話過程中調用的函數、調用次數以及完成所需的時間。
內存(Memory): 如果某個網頁開始很快，但使用一會兒后就變慢，主要原因通常是內存泄漏，該工具跟蹤網頁的內存使用情況，幫助你標識何處的內存使用處於增長趨勢，增長原因以及如何修復它。
模擬(Emulation): 幫助你測試你的網頁在不同的屏幕大小和硬件功能上的運行方式，以及它們如何響應不同的用戶代理字符串。
接下來的文章將詳細介紹這八個工具。