Chrome開發工具是開發人員必不可少的資產。雖然其他瀏覽器提供了相當方便的故障排除工具，但Chrome DevTools由於其多功能介面和流行性而值得您關注。

Chrome是開發者最流行的瀏覽器，因為它有一套強大的除錯工具。使用chromedevtools很容易，但是您需要了解它是如何工作的，以便最大限度地利用它。

chrome開發工具的工作原理

ChromeDevTools允許您透過錯誤控制檯和其他除錯和監視工具解決網站上的問題。使用DevTools會暴露前端漏洞，並允許您監視網站在移動和平板裝置上的顯示方式。

使用DevTools，您可以對網站的程式碼（如JavaScript、HTML和CSS）進行實時編輯，並獲得更改的即時結果。

透過DevTools所做的更改不會永久影響網站。它們只是臨時顯示預期的結果，就好像您已經將它們應用於實際的原始碼一樣。這可以讓你找到方法讓你的網站載入更快，更容易消除錯誤。

如何訪問chrome開發工具

您可以透過多種方式訪問Chrome DevTools。要在Mac OS上用快捷方式開啟開發人員工具，請按Cmd+Opt+I。如果您使用的是Windows OS，請按鍵盤上的Ctrl+Shift+I鍵。

或者，你可以透過點選螢幕右上角的三個點來訪問Chrome開發者工具。轉到“更多工具”並選擇“開發人員工具”。另一個選項是在網頁上單擊滑鼠右鍵，然後單擊Inspect選項。

使用chrome開發工具進行網站診斷

Chrome開發工具提供了幾種調整和解決網頁問題的方法。讓我們看看DevTools可以幫助您的一些方法。

在智慧**上檢視網站外觀

一旦你將Chrome瀏覽器切換到開發者模式，它就會呈現一個半大小的網頁。然而，這並不能讓你真實地看到它在智慧**或平板電腦上的樣子。

謝天謝地，除了設定網頁的螢幕大小之外，ChromeDevTools還允許您在不同的**螢幕型別和版本之間進行切換。

要訪問該選項，請開啟“檢查”模式。接下來，單擊DevTools左上角的Resp***ive下拉列表，選擇您喜歡的移動裝置。然後，該網頁將呈現並調整以適合所選移動裝置的大小。

訪問網頁的原始檔

你可以透過Chrome開發工具訪問組成網頁的檔案。要訪問這些檔案，請單擊DevTools選單上部的Sources選項。這暴露了網站的檔案系統，也給你編輯。

您還可以搜尋原始檔，這對處理包含許多資源的網頁很有幫助。要透過DevTools搜尋原始檔，請單擊控制檯上方的搜尋選項。

但是，如果找不到搜尋選項，更好的選擇是使用鍵盤快捷鍵。在Mac OS上，按Cmd+Opt+F鍵搜尋原始檔。如果您使用的是Windows作業系統，請按Ctrl+Shift+F鍵訪問原始檔搜尋欄。

對網頁執行實時編輯

使用DevTools的主要目的之一是對網頁上的元素進行即時假編輯。一旦切換到開發人員工具，就可以透過單擊Elements選項來編輯網站的HTML內容。然後，在程式碼編輯器中右鍵單擊要應用更改的任何點，然後選擇“作為HTML編輯”。

要編輯非內聯的CSS屬性，請選擇源。接下來，選擇要編輯的CSS檔案。將游標放在程式碼控制檯中選擇的行上以執行實時編輯。這樣做可以讓你即時反饋你對網頁所做的任何風格改變。

請注意，當您透過DevTools編輯頁面時，在瀏覽器上重新載入該頁面會將其還原為原始形式，並且該編輯僅對您可見。透過DevTools進行編輯既不會影響該網站的平穩執行，也不會影響其他使用者對該網站的使用。

使用devtools控制檯除錯javascript程式碼

除錯JavaScript的最佳方法之一是使用Chrome的開發工具。它可以直接報告無效指令碼以及錯誤的確切位置。

在使用JavaScript設計網站時，最好始終保持DevTools的開啟狀態。例如，執行控制檯.log（）如果程式成功執行，JavaScript命令將在DevTools控制檯中顯示該日誌的結果。

預設情況下，控制檯會報告網站上的任何JavaScript問題。您可以在DevTools的下部找到控制檯，或者單擊Chrome DevTools視窗頂部的c***ole選項來訪問它。

監視從資料庫載入的資源

除了除錯JavaScript之外，控制檯還可以提供未從網站資料庫正確載入的資源的詳細資訊。

雖然這並不總是除錯後端問題的最佳方法，但它仍然會告訴您哪些資源在執行這些元素的資料庫查詢後返回404錯誤。

相關：常見網站錯誤及其含義

切換chrome開發工具的方向

要更改Chrome開發工具的位置，請單擊DevTools中的三個選單點（而不是瀏覽器上的主選單點）。然後從Dock side選項中選擇您喜歡的位置。

安裝chrome devtools擴充套件

您還可以安裝與Chrome DevTools一起使用的特定於語言或框架的擴充套件。安裝這些擴充套件可以讓你更有效地除錯你的網頁。

您可以在Chrome的特色DevTools擴充套件庫中訪問Chrome DevTools可用擴充套件的列表。

檢查網站上的安全問題

chromedevtools可以讓你評估你的網站有多安全，基於諸如網路安全證書的可用性和連線的安全性等引數。要檢查您的網站是否安全，請單擊DevTools頂部的Security選項。

“安全”選項卡提供網站安全詳細資訊的概述，並告訴您任何潛在威脅。

稽核你的網站

chromedevtools有一個功能，可以讓你根據特定的引數檢查網站的整體效能。

要訪問該功能，請選擇DevTools視窗頂部的Lighthouse選項。接下來，選擇要檢查的引數，然後勾選“移動”或“桌面”選項，以檢視網頁在不同平臺上的效能。

接下來，單擊GenerateReport，根據前面選擇的引數執行網頁分析。

您還可以透過單擊效能選項來評估網站的執行時或載入效能。要執行測試，請單擊ClicktheRecord按鈕選項旁邊的圖示以執行執行時分析。或者，單擊其下方的“重新載入”按鈕以評估載入時間效能。單擊停止停止分析儀並顯示結果。

利用chrome開發工具

根據你的需要，Chrome開發工具讓你做的不僅僅是簡單的網站除錯。謝天謝地，DevTools對於所有技能級別的程式設計師都很容易使用。您甚至可以透過查詢您訪問的網站的原始碼來學習一些網站前端開發的基礎知識。

您可能還會發現本文中沒有討論的其他一些選項。因此，您可以隨意使用可用的功能。此外，調整這些功能並不會對網站造成一點傷害。