The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Chrome 開發者工具

Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具,可用來對網站進行迭代、調試和分析。

打開Chrome 開發者工具

  • 在Chrome菜單中選擇 更多工具 > 開發者工具
  • 在頁面元素上右鍵點擊,選擇 “檢查”
  • 使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

瞭解面板

設備模式

Device Mode

使用設備模式構建完全響應式,移動優先的網絡體驗。

元素面板

Elements Panel 使用元素面板可以自由的操作DOM和CSS來迭代佈局和設計頁面.

控制檯面板

Console Panel

在開發期間,可以使用控制檯面板記錄診斷信息,或者使用它作爲 shell在頁面上與JavaScript交互。

源代碼面板

Sources Panel

在源代碼面板中設置斷點來調試 JavaScript ,或者通過Workspaces(工作區)連接本地文件來使用開發者工具的實時編輯器。

網絡面板

Network Panel

使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能。

性能面板

使用時間軸面板可以通過記錄和查看網站生命週期內發生的各種事件來提高頁面的運行時性能。

內存面板

如果需要比時間軸面板提供的更多信息,可以使用“配置”面板,例如跟蹤內存泄漏。 Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

應用面板

使用資源面板檢查加載的所有資源,包括IndexedDB與Web SQL數據庫,本地和會話存儲,cookie,應用程序緩存,圖像,字體和樣式表。

安全面板

Security Panel

使用安全面板調試混合內容問題,證書問題等等。

參與互動

Twitter Stack Overflow Slack