開啟chrome 開發者工具
主要面板介紹
chrome開發者工具主要有以下面板
console（控制台面板）：在開發期間，可以使用控制台面板記錄診斷資訊，或者使用它作為
shell，在頁面上與j**ascript互動。
network（網路面板）：從發起網頁頁面請求request後得到的各個請求資源資訊（包括狀態、
資源型別、大小、所用時間等），並可以根據這個進行網路效能優化。
memory（記憶體面板）：分析web應用或者頁面的執行時間以及記憶體使用情況。
security（安全面板）：使用安全面板除錯混合內容問題，證書問題等等。
audits（審核面板）：對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化
建議，比如列出所有沒有用到的css檔案等。
network面板
controls （控制器）：使用這些選項可以控制 network 面板的外觀和功能
overview （概覽）： 此圖表顯示了資源檢索時間的時間線。如果您看到多條豎線
堆疊在一起，則說明這些資源被同時檢索
summary （概要）： 此窗格可以一目了然地告訴您請求總數、傳輸的資料量和
載入時間
Chrome開發者工具詳解 1
這些按鈕的功能點如下 通過js 或者命令列console.log console.warn console.error 可以將日誌資訊輸出到控制台 注 當需要換到下一行而不是回車的時候，請按shift enter。在上一小節，我們已經看到可以在控制台輸入js表示式點選enter即可得到表示式的值，當...
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...