如你所想chrome devtools 是乙個允許web開發人員通過瀏覽器干擾和操控web 應用，有了這個工具，您可以：
開啟devtools ，你可以在頁面任意位置單擊滑鼠右鍵，選擇檢查元素，或則從右上角的選單選擇 「更多工具》開發者工具」
下面例項使用的是chrome canary 版本
方法當你編輯完成後，閉合標籤也會自動更改
方法在source面板，使用「:行號:列號」 這樣的格式快速定位到你想要到的行數
快捷鍵cmd+ o (win ctrl+o)
方法
方法：快捷鍵
dock 選項：
方法：方法：你可以點選十六進製制的顏色**前面的小圖示來進行選擇：
material design：這個面板自動從material design生成三原色
方法：方法：選擇「network」面板
在resources 面板選擇你要轉化的，然後右鍵選擇copy image as a data uri
在console面板，貼上即可轉化成data uri
方法：選擇sources 面板
選擇檔案，在源**面板編輯
按住alt 鍵拖動滑鼠
方法:選擇「elements」面板
在」elements」面板編輯器裡面選擇乙個dom元素
單擊console面板，輸入$0進行使用
如何更專業的使用Chrome開發者工具
顧名思義chrome開發工具就是乙個工具，它允許web開發人員可以通過瀏覽器應用程式干預和操作web頁面，也可以通過這個工具除錯和測試web頁面或web應用程式。有了這個工具，你可以做很多有趣的事情 開啟開發者工具，你只需要在頁面的任意位置右擊滑鼠，選擇檢查元素或從右上角選單中選擇 工具 更多工具 ...
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
chrome開發者工具使用
chrome 開發工具好，誰用誰知道。你可以 network 對於分析網路請求情況 檢視請求和響應的詳情特別有用 sources 展示了 載入的資源檔案。它的一大用處是在js除錯時設定斷點 還可以格式化壓縮後的js timeline 並不是指網路請求的載入時間，而是指 js 執行時間 頁面渲染時間，...