您需要知道的 10 個 Chrome 控制台提示

測試網站或 Web 應用程序及其用戶界面可能會非常棘手且耗時，尤其是在您沒有使用適當的調試工具（例如 Chrome 控制台，也稱為 Chrome 開發人員工具）時。

現在幾乎所有的網絡瀏覽器都支持開發者工具，但谷歌似乎更堅定地為快速調試過程提供最佳環境。

Google 一直在努力使 Chrome DevTools 盡可能地對開發人員友好。 如此之多，以至於問題不再是您可以使用這些直接內置於 Google Chrome 瀏覽器中的開發人員工具做什麼。 現在的問題是您對 chrome 控制台了解多少。

有一些特定的 Chrome 控制台功能往往會吸引每個開發人員。 有些人認為它是查找網站組成部分（包括腳本和样式）的最佳開發人員工具。 其他開發人員發現它在跟踪鏈接標籤、瀏覽器呈現、HTTP 請求和響應、分頁點、測試新功能或腳本等方面更有用。

這篇文章幾乎不會觸及控制台可以做什麼的表面。 有關功能和手冊的完整概述，請訪問 Google 開發者官方頁面。

如何打開 Chrome 控制台

訪問 Chrome DevTools 的常規方法是點擊自定義和控制 Google Chrome按鈕（Chrome 瀏覽器菜單欄右上角的三個垂直點），向下滾動到更多工具並選擇開發人員工具。

鍵盤快捷鍵： Ctrl + Shift + I 用於 Windows 和 Cmd + Options + I 用於 Macintosh。

或者，您可以通過右鍵單擊網站上的任何元素並選擇“檢查元素”選項來訪問 Chrome 控制台。

如果您使用上述任何一種方法，Chrome 控制檯面板將出現在瀏覽器窗口的側面或底部。 您可以將 chrome 控制檯面板解鎖到一個單獨的窗口中，或者通過單擊自定義和控制 Devtools按鈕（DevTools 面板右上角的三個垂直點）並在Dock 側選項旁邊選擇您的首選位置來更改停靠位置.

每個開發者都應該知道的 10 個 Chrome 控制台提示

1.模擬移​​動設備

網站測試最重要的方面之一是確定您的頁面設計的響應速度以及它們相對於不同設備的斷點。 您可以使用 chrome DevTools 測試媒體查詢或找出網站中斷的分辨率，以便您可以通過模擬不同的移動設備來設置應用媒體查詢的位置。

要訪問 Chrome 控制台設備模式，您可以在其中模擬不同的移動設備，請單擊 Chrome 控制檯面板左上角的切換設備工具欄（小手機和平板電腦圖標）。 這會將網站窗口更改為響應模式。

鍵盤快捷鍵： Ctrl + Shift + M（Cmd + Shift + M）。

將出現在網站窗口中的一組工具將允許您選擇要模擬的設備和分辨率，以及添加列表中不可用的移動設備。

2. 檢查網絡活動

使用 Chrome 控制台，您可以檢查網站的網絡活動，以確保准確下載和上傳所有資源。 並且還檢查每個資源的屬性，例如圖像大小、內容、HTTP 標頭等。

單擊 DevTools 窗口上的網絡選項卡。 這將打開帶有空日誌的網絡面板，因為該工具僅在打開時記錄網絡活動。 按 Ctrl + R (Cmd +R) 或重新加載網站以查看您的頁面網絡日誌活動。

您應該會在頁面下方看到一個表格，其中顯示了您的頁面網絡活動的時間日誌。 要查看有關每個資源的更多信息，請單擊網絡設置（右側的齒輪圖標）並選中旁邊的框以使用大圖標請求行。

您可以通過調試網絡日誌中的錯誤來提高頁面的加載性能，以解決文件壓縮等問題。

3.網絡節流

與移動設備模擬類似，您可以使用 Chrome 控制台模擬不同的互聯網速度。 如果您想以特定速度測試網站性能，例如在 3G 移動設備上，此功能會很有用。

在網絡面板菜單欄中，單擊在線（限制）並選擇您選擇的互聯網速度。 要添加自定義網絡配置文件，請單擊下拉菜單中的添加選項，然後輸入您首選的上傳和下載速度。

4.添加腳本片段

您可以使用片段功能在網站內的任何位置添加您喜歡的隨機代碼。 無需一遍又一遍地編寫相同的代碼，此功能將允許您保存代碼片段並隨時訪問代碼。

單擊源選項卡>>片段>>新片段。 這將在片段窗格中創建一個新文件。 重命名您的代碼段並在窗格旁邊的窗口中編寫一小段 JavaScript 代碼。 要保存片段，請右鍵單擊片段文件，單擊另存為並選擇您喜歡的目錄。 您也可以通過命令菜單訪問此功能。

使用 Ctrl + Shift + P 或 Cmd + Shift + P (Mac) 打開命令菜單，鍵入片段並單擊創建新片段。

使用 Ctrl + Enter 或 Cmd + Enter 運行代碼或單擊文本窗口下方的Run Snippet圖標。

5. 截取網站截圖

Chrome DevTools 允許您截取網站不同部分的屏幕截圖。 使用 Ctrl + Shift + P 或 Cmd + Shift + P (Mac) 打開命令菜單並輸入screenshot 。 選擇您想要的屏幕截圖類型。 DevTool 將自動截取圖像並將圖像作為 .png 文件下載到您的默認下載目錄中。

6.開啟內容文字編輯模式

您可以使用 Chrome 控制台直接在瀏覽器窗口中編輯頁面內容。 單擊控制台選項卡並使用以下代碼打開該功能。

document.body.contentEditable = 'true';

或者

document.designMode='開';

按回車鍵打開該功能。

7. 顏色選擇器

使用具有一系列工具的顏色選擇器可以更輕鬆地在您的網站上操作顏色。 吸管可讓您直接從網頁中選擇顏色並將它們設置在您的顏色屬性中。 您可以使用顏色選擇器調整顏色的色調和不透明度，並通過簡單的點擊在 RGBA、HEX 和 HSLA 之間進行轉換。

要訪問顏色選擇器，請選擇要更改其顏色的元素。 這應該會在右側打開元素選項卡和样式表窗格。 找到元素 CSS 屬性並單擊相應的顏色框以打開顏色選擇器。

8. 編輯 CSS 屬性

Chrome 控制台提供了輕鬆訪問以調整網站上任何元素的 CSS 屬性。 單擊選擇按鈕（Ctrl + Shift + C 或 Cmd + Options + C），將光標懸停在要編輯的元素上以查看元素屬性的概覽，然後單擊元素。

這應該會突出顯示 Element 窗格下元素的 HTML 根，以及 DevTools 面板右側的 CSS 屬性。 轉到樣式窗格並滾動到要編輯以進行實時更改的屬性。 您可以通過 Ctrl + 單擊（Cmd + 單擊）屬性來查看任何樣式的完整屬性。

9. JavaScript 斷點

使用斷點查找和修復 JavaScript 錯誤比使用 console.log () 方法要容易得多。 這是因為，在後一種方法中，您需要手動訪問源代碼並將console.log()語句插入到相關代碼中，然後重新加載頁面以查看日誌。 斷點不一定要求您在暫停相關代碼之前了解代碼結構。

單擊源選項卡 > 頁面，然後從特定文件夾中選擇要調試的腳本。 您可以在 Chrome DevTools 中設置斷點，只需單擊要暫停腳本的行號，以便在腳本執行到該行時立即暫停。

或者，您可以使用調試器窗格中的事件偵聽器來設置斷點，以參考您在腳本中定位的特定事件，例如鼠標單擊或媒體播放。 使用 Ctrl + R (Cmd + R) 刷新頁面並使用調試器窗格工具移動步驟。

10. 將 HTML 元素存儲為全局 JS 變量

無論您是檢查記錄到控制台的複雜對像還是站點上的 DOM 元素，您都可以在全局範圍內自動存儲對它們的引用。 這在調試時非常方便，因為您可以簡單地將它們作為全局變量進行檢查。

右鍵單擊控制台中的對像或元素選項卡中元素的 HTML 塊，然後在下拉菜單中選擇“存儲為全局變量”。 Chrome 控制台會自動將元素存儲為全局變量，並使其在控制台中可用。 變量名稱將是“tempN”，其中 N 表示您使用此方法存儲變量的次數。 第一個變量顯然命名為“temp1”，第二個變量命名為“temp2”。

結論

熟練度和速度是人們熟悉工具的屬性，這在 Chrome DevTools 中有很深的含義。 您擁有的信息越多，您可能會越快越好地使用這些工具，這反過來又會減少調試所花費的時間。

本周和下週花一點時間閱讀文檔可能更有價值，從通常花費您最多時間的調試方面開始。 如果上述 chrome 控制台提示沒有提及您最喜歡的功能，我們不會感到驚訝。 請在下面的評論中讓我們知道它們。