使用Chrome DevTools，我們可以立即在代碼中看到修改的效果
Chrome DevTools是一個 谷歌瀏覽器內置的一組網站創建和調試工具。 當然，我們也可以使用它們 在其開源版本中； 鉻。
可以通過按Ctrl + Shift + I組合鍵來訪問開發人員的Chrome工具，也可以將鼠標懸停在元素上並右鍵單擊Inspect。
組件
當我們打開Chrome DevTools時，我們看到您出現我們正在瀏覽的頁面右側的n面板。 就此而言，此面板e它分為與每個工具相對應的選項卡。 反過來，這些工具又分為幾個部分。
這些部分是：
- 元素：顯示頁面的不同組件。
- 控制台：使您可以像在Linux終端上一樣在開發過程中運行診斷或與Javascript代碼進行交互。
- 來源：使調試Javascript代碼和使用本地文件變得容易。
- 網絡：有助於監視和改善頁面性能。
- 時間軸：允許記錄和瀏覽在訪問網站期間發生的不同事件。
- 應用程序：調查所有已加載的資源； 其中包括IndexedDB或Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和样式表。
- 安全性：檢測代碼中的安全性問題。
讓我們看看我們可以將Chrome DevTools用於
解決不起作用的問題
它發生在每個開發人員身上。 編寫代碼，檢查是否沒有錯誤，但實際上，頁面無法正常工作。 控制台工具 顯示執行時發生了什麼錯誤。
減少加載時間
如果頁面加載時間很長，則用戶會感到厭倦並轉到另一個站點。 幸運的是，Flash網站及其動畫介紹的時代已經結束。 無論如何，Chrome DevTools的“網絡”標籤 可以更輕鬆地找出哪些元素在延遲負載。 我們可以針對不同的連接速度重複測試。
修改代碼
在“元素”標籤中，我們可以 請參閱頁面的元素，相關的html代碼和CSS屬性。 我們也可以更改它們。
我們可以使用以下命令編輯頁面的文本
document.designMode = 'on';
嘗試不同的屏幕尺寸
平板電腦，智能手機，智能電視，台式計算機。 我們上網衝浪的設備列表正在增長。 借助Chrome DevTools，我們可以 測試頁面在不同尺寸下是否看起來不錯。
標杆測試
在管理中，基準測試一詞意味著向與我們一樣的最佳做法學習。 使用Chrome DevTolls，如果我們喜歡網站的設計，我們可以 查看html代碼和CSS樣式表，然後將其複製到我們的網站。
獲取Chrome DevTools
Chrome DevTools可在Google Chrome瀏覽器和Chromium瀏覽器上使用。 鉻存在於主要分佈的儲存庫中。 也可以從商店安裝 搶購。 至於谷歌瀏覽器，您可以 過來。 以DEB和RPM格式