概覽 · 谷歌瀏覽器開發者工具

[TOC] ## 谷歌瀏覽器開發者工具谷歌瀏覽器開發者工具（以下簡稱谷歌開發者工具）是一套基于谷歌瀏覽器內嵌的網頁調試工具，使得網頁開發者能夠方便快速的調試和定位頁面問題。 ### 打開谷歌開發者工具 * 打開谷歌瀏覽器菜單，選擇“更多工具”>“開發者工具” * 網頁上右擊，選擇“檢查”選項 * 使用[快捷鍵盤](246495)，Ctrl+Shift+I(Windows) Cmd+Opt+I ### 開發者工具面板 #### 設備模式使用設備模式能夠模擬網頁在響應式布局，即移動端下的表現行為，經常被使用于開發H5頁面時的調試。 * [設備模式](246880) * [測試響應式和特定設備視圖展現](247127) * [模擬傳感器：地理位置和加速度計](247128) ![](image/devicemode.png) #### 元素使用元素面板，通過自由的操作DOM和CSS，來調整網頁的布局和整體設計。 * [檢視以及調整網頁](247130) * [編輯樣式](247131) * [編輯DOM](247132) ![](image/elements-panel.png) #### 控制臺使用控制臺可以打印開發過程中的日志診斷信息，同時它還是網頁與開發者之間的人機交互接口。開發者可以輸入JavaScript代碼并執行。 * [使用控制臺](247133) * [人機交互的命令行](247134) ![](image/console-panel.png) #### 源代碼在源代碼面板，可以使用斷點調試JavaScript代碼，并且能通過工作區使用開發者工具的實時編輯器對本地代碼進行修改。 * [斷點調試](247135) * [調試混淆后的代碼](247136) * [工作區持久化設置](247137) ![](image/screenshot_1481186006514.png) #### 網絡使用網絡面板可以檢視網絡請求以及資源請求，進而優化頁面加載性能。 * [網絡面板基礎](247138) * [理解資源時間線](247139) * [網絡優化](247140) ![](image/screenshot_1481186769855.png) #### 時間線使用時間線能夠記錄和展示在網頁生命周期中發生的各種事件所消耗的時間，從而提升網頁整體的性能 * [分析運行性能](247141) * [如何使用時間線功能](247142) * [避免強制同步布局事件的發生](247143) ![](image/screenshot_1481187244058.png) #### 分析器分析器面板能夠提供比時間線的更多的信息，例如內存泄漏等 * [JavaScript CPU 分析器](247145) * [堆分析器](247146) ![](image/screenshot_1481187408928.png) #### 應用應用面板可以檢視所有的頁面加載的資源，包括DataBase、Web SQL、本地緩存、圖片、字體、樣式文件等等 * [數據管理](247147) ![](image/screenshot_1481187573906.png) #### 安全安全面板用來調試跟安全證書相關的各種復雜問題 * [安全](security.md) ![](image/screenshot_1481187710570.png)