谷歌瀏覽器是其中使用最廣泛的瀏覽器之一，全球有將近65％的用戶。 這是有充分的理由的， 它運作良好， 它支持大量的網絡功能， 與google提供的所有內容進行本地集成，并且易于使用。

但是，不僅限于用戶方面。 它也非常適合開發人員。 Firefox是另一種出色的瀏覽器，可提供出色的開發人員體驗， 盡管它的用戶群相對較小。 因此， 我們專注于Chrome及其DevTools， 但幸運的是， 大多數瀏覽器中的用戶界面仍然非常相似， 因此這里的提示可以很好地翻譯到Firefox， 蘋果瀏覽器， Edge和其他瀏覽器。

Chrome DevTools是一組直接內置在Google Chrome瀏覽器中的網絡開發人員工具。 DevTools可以幫助您即時編輯頁面并快速診斷問題， 最終可以幫助您建立更好的網站， 快點。
Chrome DevTools文檔首頁

DevTools是大多數前端（通常是后端）開發人員用來檢查網頁效果的工具， 定義它的HTML標簽以及以其最基本形式應用的樣式。 它提供了許多其他超級有用的功能，只要它們也適用于非開發人員的一般用例，我們將對其進行介紹。

開發工具 是您在上面的屏幕快照中看到的，左側是代碼，右側是各種屬性。 如果您按Command + Option + C（Mac）或Control + Shift + C（Windows， Linux， Chrome操作系統）。

DevTools提供了很多功能， 但最值得注意的是：

• 頁面加載后以及加載時生成的文檔結構（HTML）。
• 什么CSS適用于特定的HTML元素以及從父元素繼承的元素。
  查看視口大小， 元素大小， 填充物 邊距 邊界等等。
• 除正在運行的腳本外，還可以修改頁面上所有內容的功能。
• 刷新頁面后對保存的代碼進行更改（盡管默認情況下是不可能的）
• 所有更改都是客戶端-意思是， 不管你改變什么 只有您會看到，直到刷新頁面。
• 無需高速緩存并模擬較慢的網絡速度即可進行測試。
• 衡量效果和對網頁效果進行評分的工具，并提供解決方法。
• 顯示頁面的控制臺及其錯誤， 警告和消息，以及在其中執行javascript代碼的方法。

這是一個很短的清單， 但它涵蓋了一些更顯著的功能， 我們將主要介紹。

有關的：如何創建您的第一個Chrome擴展程序

對于開發人員而言，顯而易見的是， 但是非開發人員呢？ 出色地， 有一些巧妙的竅門和技巧可以使您更接近高級用戶狀態。 網站所有者通常會在網站上發現問題， 問一個或兩個問題，有時會收到一小段代碼以“粘貼”以解決問題。 開發人員測試此類代碼片段的方法之一是直接將其應用于開發工具。 這也是一種為開發人員提供有關外觀外觀的漂亮預覽的方法。

DevTools的第一個也是最常見的用法是修改和應用CSS。 CSS是定義頁面外觀的方式， 這是美學。 去做這個， 您只需指向要樣式化的元素， 右鍵單擊并選擇“檢查”

大多數其他瀏覽器也是如此， 盡管菜單項的文本可能會略有不同。 完成后， 您將看到DevTools打開，并直接選擇所需的元素。 在那里， 您將看到開發工具的兩個主要部分。 HTML和CSS面（左右）：

在HTML部分找到自己的方式可能有點棘手， 不用擔心 當您將元素懸停在左側面板上時，DevTools將突出顯示這些元素。 一旦找到需要的東西， 在右邊您可以編寫樣式。 已經添加了一些。 因此，讓我們更改背景以閱讀并查看其外觀：

當您輸入時， 頁面中的樣式將更新。 您可以在此處編寫任何CSS，它將按照頁面上已有的樣式進行應用。 如果您在規則結尾附近按（在“寬度”下）， 它將開始添加新樣式。 或者，您也可以在上面寫著“ element”的地方寫下它們。風格”。 然后，如果您想與開發者共享， 您只需選擇代碼并復制粘貼即可。 專家提示， 也抓住樣式的“選擇器”。 這是“。上面的屏幕快照中的“ RNNXgb”。 這將告訴開發人員要在哪個元素上添加樣式。

有關的：WordPress CSS：初學者基本指南

您可以做的另一件整潔的事情是找出確切使用了什么顏色，以及直接從DevTools中使用顏色選擇器來查看其他顏色。 只需單擊顏色代碼旁邊的正方形（上面的箭頭指向的地方），它將打開一個顏色選擇器。

CSS開發人員還定義了使用的字體， 字體大小， 線高 顏色， 字體粗細和其他與排版有關的屬性。 所有這些都將顯示在右側。 只要沒有越過 您看到的樣式將被應用。 讓我們找出在Google表單上進行搜索所使用的字體。 右鍵點擊， 檢查并向下滾動，直到看到字體為止，或者只是在右側部分頂部上方的“過濾器”字段中進行搜索：

如果您繼續更新字體， 您會看到使用其他字體的網站外觀， 您可能希望很快切換到的一種。 當然， 開發人員以后將不得不修改代碼并解決字體更改可能造成的任何問題， 但是這種方法非常有用，可以在不設置任何開發環境的情況下快速測試事物。

設置為“喬治亞”字樣的Google主頁的外觀如下。 為了達成這個， 我們必須更新多個物業 但是多虧了Google開發人員的出色CSS架構， 這很容易。 大多數時候， 一個寫得不好的網站需要您更新大量的屬性才能看到整個網站都已更新。

有關的：如何為您的網站選擇最佳字體

什么是緩存？ 簡單來說 保存在您的計算機上以備將來使用的資源。 資源可以是JS， CSS文件或圖像。 如果每次打開頁面都沒有改變， 不需要每次都下載對嗎？ 因此，瀏覽器只會將其在您的計算機上保留一段時間。

但是會發生什么 服務器上是否有更改，并且設置未使用最佳做法來更新資源？ 或簡而言之， 即使開發人員更改了代碼庫， 您仍然可以看到舊樣式。 出色地， 那么您就可以停止緩存并執行“硬刷新”。

打開開發工具，然后導航到“網絡”選項卡。 然后單擊“禁用緩存”并執行“硬刷新”：

現在， 在打開DevTools的情況下瀏覽頁面時， 您的瀏覽器將不會有任何緩存的資源。 由于每次都會加載資源，因此頁面加載速度會變慢， 但您會看到更改。 通常，開發人員默認情況下默認情況下將“禁用緩存”設置為“開”，并且僅在加載時間很重要時測試實際用戶交互時才禁用它。

刷新一次后，在同一選項卡上，您還將看到頁面速度和重量的度量值。 多久才觸發“加載”（附加其他腳本以執行更多工作時發生的事件）， 請求了多少個文件（以上31個請求， 相當不錯的金額）， 已下載了多少等等。 這很簡單， 每個值越低越好。 任何高于100-150的請求，您將開始看到較大的速度問題。

DevTools還提供了慢速連接的模擬。 一項非常有用的功能，可用來查看您的站點如何在速度較慢的網絡（如3G）上工作。 打開它， 只需更改“禁用緩存”旁邊的值，然后單擊刷新即可。 刷新后，您會看到網站加載的每個步驟。 在禁用緩存的情況下， 這將是常規使用的首次訪問。

與使用實際連接速度的第一個示例相比，選擇“慢速3G”并刷新時看到的速度差異。 在這里，您還可以測試“離線”-如果沒有任何互聯網連接，該站點將如何工作。 如果聽起來很奇怪， 它不是， 漸進式Web應用程序已經允許訪問站點至少訪問一次的站點，即使沒有互聯網連接也可以正常運行。

稽核 是另一個偉大的功能，可提供用戶友好的頁面速度分析。 您只需運行“審計”選項卡并單擊“生成報告”即可運行它：

在右側，您可以選擇一些選項來決定要測試的內容，因為有時測試可能需要一段時間（一兩分鐘）， 因此，如果您多次運行它們， 您可能會選擇當前測試所需的內容。 以下是Google主屏幕帶有上述選項的示例結果：

好極了！ 94非常好，展示了此頁面上所做的出色工作。 請記住，表面上看起來可能非常簡單， 但是在后臺運行的大量腳本仍處于隱藏狀態，從而降低了網站速度。 還測試了許多其他指標，您可以在任何站點上執行此操作，以查找存在的問題以及可以改進的問題。

有關的：“加速網站”的真正含義是什么，以及如何實現？

我們將介紹的最后一個視圖是控制臺。 只需按ESC鍵或轉到“控制臺”選項卡即可輕松訪問。 不出所料 沒有錯誤， 只是一些不應該引起太多問題的警告：

但， 如果出于某種原因在您網站上最近更新之后， 互動組件（例如下拉菜單， 菜單， 地圖， 表格）停止工作， 您可以隨時查看控制臺。 它可能有錯誤，說明原因是什么。

這是此類錯誤的示例：

使用錯誤日志文檔頁面展示錯誤有點諷刺意味， 正確的？ 在任何情況下， 它有一個很好的目的。 這些錯誤會使某些功能無法正常工作。 您始終可以與開發人員共享此類信息并尋求幫助。 與頁面互動時，日志會實時發布， 因此，如果您單擊按鈕并彈出錯誤， 它背后的腳本很可能有問題。

有關的：成為優秀的Web設計者的途徑

安全須知注意：在不了解代碼功能的情況下將代碼復制粘貼到控制臺不是一個好主意。 特別是如果它來自不可靠的來源，并在公司的內部應用程序/網站上使用。 因此，Facebook在其控制臺上發布了警告：

DevTools是一個了不起的工具，可為開發人員和網站所有者提供幫助。 它為您提供了調整和修改頁面所需的一切。 通過它，您可以更改CSS， 修改HTML， 刪除并重新排列頁面上的元素， 查看速度報告和報告的錯誤。

網站所有者可以使用它向開發人員展示想法和他們的需求示例，這些想法和示例可能比編寫文本段落更容易理解。 掌握了一些CSS的基本屬性后， 您可以更加描述您的需求， 這將大大減少來回更改的時間和時間。

還有許多其他功能需要使用， 不要害怕探索！

長期發展， 支持， 和您的WordPress平臺的創新。 DevriX為中小型企業和快節奏的初創企業提供技術合作伙伴關系。 我們構建WordPress解決方案并擴展平臺，最多可生成20個，000，每月000次網頁瀏覽。

DevriX的創意主管和前端開發人員
亞歷克斯（Alex）的熱情在于學習新的網絡技術， 探索創新的方法來優化網站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數字藝術，最近開始在ELSYS技術學校教授設計。