適用於非開發人員的Google Chrome DevTools

谷歌瀏覽器是世界上使用最廣泛的瀏覽器之一，全球有近65％的用戶。 並且有一個很好的理由，它運行良好，它支持大量的網絡功能，可以與google提供的所有功能進行本地集成，並且易於使用。

但是，不僅限於用戶方面。 它也非常適合開發人員。 Firefox是另一種出色的瀏覽器，儘管其用戶群相對較小，但可提供出色的開發體驗。 因此，出於這個原因，我們將重點放在Chrome及其DevTools上，但是值得慶幸的是，大多數瀏覽器之間的UI仍然非常相似，因此此處的提示將可以很好地轉換為Firefox，Safari，Edge和其他瀏覽器。

什麼是Chrome DevTools？

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

大多數前端（通常是後端）開發人員都使用DevTools來檢查網頁的性能，定義網頁的HTML標籤以及以其最基本形式應用的樣式。 它提供了許多其他超級有用的功能，只要它們也適用於非開發人員的一般用例，我們將一目了然。

您可以在上面的屏幕快照中看到開發工具，其中代碼在左側，而各種屬性在右側。 如果您按Command + Option + C（Mac）或Control + Shift + C（Windows，Linux，Chrome OS），則將看到默認視圖。

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

• 頁面加載時和加載時生成的文檔結構（HTML）。
• 什麼CSS適用於特定的HTML元素以及從父元素繼承的元素。
  查看視口大小，元素大小，填充，邊距，邊界等。
• 除正在運行的腳本外，還可以修改頁面上的所有內容。
• 刷新頁面後對保存的代碼進行更改（儘管默認情況下無法更改）
• 所有更改都在客戶端-意味著，無論您進行什麼更改，只有您才能看到，直到刷新頁面為止。
• 無需高速緩存並模擬較慢的網絡速度即可進行測試。
• 衡量性能和對頁面性能進行評分的工具，並提供解決方法。
• 顯示頁面的控制台及其錯誤，警告和消息，以及在那裡執行JavaScript代碼的方式。

這是一個非常簡短的列表，但是它涵蓋了一些更顯著的功能，主要是我們將介紹的功能。

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

為什麼需要DevTools，用例有哪些？

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

套用CSS程式碼

DevTools的第一個也是最常見的用法是修改和應用CSS。 CSS是定義頁面外觀的要素，它是美觀。 為此，您只需指向要設置樣式的元素，右鍵單擊並選擇“檢查”

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

在HTML部分找到自己的方式可能有些棘手，但是請放心，當您將元素懸停在左側面板上時，DevTools會突出顯示這些元素。 一旦找到所需的內容，就可以在右側編寫樣式。 已經添加了一些。 因此，讓我們更改背景以閱讀並查看其外觀：

鍵入時，頁面中的樣式將立即更新。 您可以在此處編寫任何CSS，它將按照頁面上已有的樣式進行應用。 如果您在規則的末尾（在“寬度”下）按，它將開始添加新樣式。 或者，您也可以在頂部寫著“ element.style”的地方寫它們。 然後，如果要與開發人員共享，則只需選擇代碼並複制粘貼即可。 專業提示，還可以抓住樣式的“選擇器”。 這是上面截圖中的“ .RNNXgb”。 這將告訴開發人員要在哪個元素上添加樣式。

相關：WordPress CSS：初學者基本指南

選擇一種顏色

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

查找使用什麼字體

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

如果繼續更新字體，您將看到該網站使用另一種字體的外觀，您可能希望立即切換到另一種字體。 當然，開發人員以後將不得不修改代碼並解決字體更改將導致的任何問題，但是這種方法非常有用，可以在不設置任何開發環境的情況下快速地進行測試。

設置為“喬治亞”字樣的Google主頁的外觀如下。 為此，我們必須更新多個屬性，但是由於Google開發人員提供了良好的CSS體系結構，因此相當容易。 在大多數情況下，寫得不好的網站需要您更新大量屬性才能查看整個網站的更新。

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

緩存，油門和速度

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

但是，如果服務器發生了變化並且設置未使用最佳實踐來更新資源，會發生什麼情況？ 簡而言之，即使開發人員更改了代碼庫，您仍然可以看到舊樣式。 好了，那麼您就可以停止緩存並執行“硬刷新”。

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

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

刷新一次後，在同一標籤上，您還將看到有關頁面速度和重量的度量。 觸發“加載”之前需要等待多長時間（附加其他腳本以執行更多工作時發生的事件），請求了多少文件（上面的31個請求，相當數量），已下載了多少等等。 很簡單，每個值越低越好。 任何高於100-150的請求，您將開始看到較大的速度問題。

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

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

審核是另一個很棒的功能，可提供用戶友好的頁面速度分析。 您只需通過轉到“審計”標籤並點擊“生成報告”即可運行它：

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

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

相關文章：“加速網站”的真正含義是什麼，以及如何實現？

DevTools控制台

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

但是，如果由於某些原因在您網站上的最新更新後，交互式組件（如下拉菜單，菜單，地圖，表單）停止工作，則可以隨時查看控制台。 可能會有錯誤說明原因是什麼。

這是此類錯誤的示例：

使用錯誤日誌文檔頁面​​展示錯誤有點諷刺，對嗎？ 無論如何，它都有很好的用途。 這些錯誤會使某些功能無法正常工作。 您始終可以與開發人員共享此類信息並尋求幫助。 與頁面交互時，日誌是實時發布的，因此，如果單擊按鈕並彈出錯誤，則很可能是其後面的腳本有問題。

相關：成為優秀Web設計人員的途徑

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

概要

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

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

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