專為開發者設計的 CSS 檢視器 Chrome 擴充套件

---

CSS 檢視器擴充套件是一個 Chrome 擴充套件，充當屬性檢視器，由 Nicolas Huon 開發。使用者需要點選工具欄圖示，然後將滑鼠懸停在任何元素上以檢視該元素的屬性。CSS 檢視器擴充套件需要訪問使用者歷史記錄以及網站資料的許可權，以便檢查頁面上的屬性。

在這篇文章中，我們將瞭解什麼是 CSS 檢視器擴充套件以及如何使用它？

什麼是 CSS 檢視器 Chrome 擴充套件程式，它對 Web 開發人員有什麼用？

如果 Web 開發人員訪問某個網站並想知道該頁面上使用了哪些 CSS 屬性，那麼 CSS 檢視器擴充套件程式就能派上用場。該擴充套件程式識別頁面上游標指向位置的 CSS 屬性，並幫助使用者輕鬆識別頁面上使用的 CSS。該擴充套件程式可以識別影像、按鈕、文字等中的 CSS 程式碼。現在，每個外掛都有其自身的特性、優點和缺點，因此讓我們來談談 CSS 檢視器擴充套件程式在 Chrome 中的優點、特性和缺點。

CSS 檢視器的特性

• 該擴充套件程式快速有效，安裝相對簡單。

• 它使使用者能夠即時檢視 CSS 程式碼，從而節省時間。

CSS 檢視器的優點

• 該擴充套件程式提供快速訪問。

• 該擴充套件程式是跨平臺的，適用於所有瀏覽器。

• 它還可以整合物件以及同步雲端儲存和系統，以便在一個工作區中工作。

CSS 檢視器的缺點

• 與其他擴充套件程式一樣，它需要不斷更新。

• 不同的瀏覽器需要不同版本的相同擴充套件程式。

• 該擴充套件程式需要使用者的許多許可權，在某些情況下，由於此類許可權，可能會發生資料洩露等意外事件。

CSS 檢視器擴充套件程式的快捷鍵

每個可安裝的擴充套件程式和外掛都有其自己的快捷鍵。CSS 檢視器的快捷鍵為：

• F 用於凍結或解凍網頁上顯示的彈出視窗。

• C 複製當前檢視的元素的程式碼。

• 使用者可以按Esc鍵關閉擴充套件程式。

如何安裝 CSS 檢視器 Chrome 擴充套件程式？

安裝 CSS 檢視器是一個簡單的過程。安裝擴充套件程式的步驟如下：

步驟 1 - 要安裝擴充套件程式，我們需要訪問 Chrome 擴充套件程式網上應用店或 Firefox 附加元件。擴充套件程式在網上應用店中的外觀如下所示。

步驟 2 - 現在，您需要根據使用的瀏覽器點選“新增到 Chrome”或“新增到 Firefox”按鈕，它看起來如下所示。

安裝擴充套件程式後，您將在瀏覽器右上角看到一個彈出視窗。

步驟 3 - 現在，我們需要使用 CSS 檢視器。因此，首先我們需要透過點選圖示啟動擴充套件程式，然後會出現一個“開始”按鈕。

現在，您可以將滑鼠懸停在任何元素或影像上以檢視該特定元素的 CSS 屬性。

為了更好地理解擴充套件程式的功能，讓我們看一個示例。

示例

在這個示例中，我們想知道某個網站的 CSS 程式碼。因此，我們將簡單地將滑鼠懸停在其上，我們這裡使用的網站是 TutorialsPoint 網站。您可以在啟用擴充套件程式之前檢視輸出。

這是我們在啟用擴充套件程式之前網站的外觀，讓我們看看在啟用擴充套件程式並懸停在各種元素上之後它的外觀。

當我們將滑鼠懸停在網站上的任何元素上時，我們會看到一個類似於上圖的彈出視窗。此處的影像展示了 CSS 程式碼中使用的不同屬性，例如字型大小、高度、顏色和背景，以及元素的位置。可以將滑鼠懸停在網站上具有 CSS 屬性的每個元素上以檢視此彈出視窗，您還可以複製該特定屬性的程式碼。

結論

CSS 檢視器是為開發人員設計的擴充套件程式，以便開發人員可以檢視開發人員懸停在其上的任何網頁或網站的 CSS 程式碼。該擴充套件程式最初由 Nicolas Huon 為 Firefox 開發，然後又為 Chrome 網上應用店開發。該擴充套件程式節省了大量開發人員的時間，因為他們無需查詢特定元素的程式碼。該擴充套件程式需要使用者資料和其他某些許可權，這可能會導致資料洩露或勒索攻擊。