2021 年值得推薦的 14 款 Chrome 開發者插件

Web Developer

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

使用這些方便的工具，你可以快速檢查元素並開始調試你的網站。這個插件最大的一大優點是你可以在所有流行的瀏覽器（Firefox、Opera 等）和你使用的任何操作系統上運行它。這意味着你可以使用它在任何地方進行調試和檢查。

在它的官網（https://chrispederick.com/work/web-developer/to-do/#item-2BE123DD-69E7-4419-AFF2-FC7AA8E153B2）上還有一堆令人期待的 Todo List。

Wappalyzer

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?ref=designrevision.com

Wappalyzer 是一款功能強大的、且非常實用的 Chrome 網站技術分析插件，通過該插件能夠分析目標網站所採用的平臺構架、網站環境、服務器配置環境、JavaScript 框架、編程語言等參數，使用時很簡單，開啓你要分析、檢測的網頁後，點選該圖示即可看到網站使用的相關技術和服務。

WhatFont

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

WhatFont 採用鼠標懸浮特性，點擊後就可以告訴你所指字體的屬性，字體名稱、字體大小、字體顏色等，非常方便，目前有 Chrome 和 Safari 擴展，Firefox 的用戶可以使用書籤欄工具。它是一個快捷方式，因此你不必檢查每個元素。

Eye Dropper

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka

就像網站字體一樣，在某個時間點，你會想知道網頁上顯示的顏色代碼。你可以使用這個方便的小 Chrome 擴展程序。

使用它，你可以將鼠標懸停在網頁上並識別特定顏色。如果你單擊顏色，它將複製到剪貼板，以便你可以輕鬆訪問它。顏色代碼有 RGB 值和十六進制值兩種，甚至可以使用這個工具訪問你的歷史記錄，如果你不記得你正在欣賞的網頁，這個工具還是非常方便的。

Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/

Window Resizer 是一款可以調整瀏覽器窗口大小的 Chrome 窗口縮放插件，特別適合 Web 前端開發，用戶安裝了 Window Resizer後，可以使用插件提供的選項來選擇瀏覽器窗口大小，提供了多種常用尺寸可選或自定義窗口大小，爲頁面適配提高效率。

插件還有一個實時窗口測量器，因此當你手動調整屏幕尺寸時，你就知道正在使用的尺寸。此外，還有一個旋轉功能，因此你可以查看側視圖的外觀並涵蓋所有角度和變化。

CSS Viewer

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

CSSViewer 是一個簡單的 CSS 屬性查看器。它提供了一個浮動面板，該面板顯示鼠標懸浮在的元素的標識，以及它的字體、文本、顏色、背景、框、定位和效果屬性。CSSViewer 可以提供你所需要的基本的 CSS 信息。工具是開源的，因此你可以在 GitHub 上找到源碼

Clear Cache

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

Clear Cache 給你提供了清除緩存的最簡單方法。只需單擊一下按鈕，你的所有瀏覽數據都將一去不復返！

沒有確認對話框，沒有彈出窗口或其他任何減慢你的清算過程的東西。只需單擊一下。你還可以自定義從以下位置清除的數據量：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。

你可能討厭 cookie，但有些 cookie 其實是對你很有幫助的，使用它你還可以自定義哪些域 cookie 被刪除，哪些未被使用。

EditThisCookie

https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg

使用這個 cookie 管理器，你可以對 cookie 做任何你想做的事情。你可以添加、編輯、刪除、搜索、阻止、設置到期日期等等！

除了基本的 cookie 編輯功能外，你還可以進行批量編輯，這可以幫你節省大量時間。

Marker.io

Marker.io 是一個非常方便的 Web 開發工具，它可以讓網頁上的錯誤報告更快、更直觀。你可以輕鬆捕獲屏幕截圖並利用編輯功能清楚地勾勒出錯誤的位置和內容。

此擴展的優點在於它可以與你可能在工作中使用的大多數項目管理工具集成，例如 Trello、Jira、GitHub、Asana 以及其他一些工具。突出顯示問題後，你可以直接從擴展程序創建票證，而無需離開站點或在應用程序之間切換。

這個工具是付費的，也有試用版，可以玩玩看。

React Developer Tools

不用多說，React 開發者必備！

Vue.js Devtools

Vue 開發者必備！

Svelte Devtools

Svelte 開發者必備！

Color Tab

https://chrome.google.com/webstore/detail/color-tab/hchlgfaicmddilenlflajnmomalehbom

還在爲選擇顏色而發愁嗎？每當你打開新標籤頁時，都會出現一個漂亮的調色板……

Octotree

https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc

Octotree 可以爲 GitHub 項目生成一個文件菜單樹，就跟在 IDEA 中看到的效果一樣。在左邊會生成一個 Octotree 按鈕，鼠標滑動代碼文件樹，這樣就不用一層一層的找文件了。另外它還支持私有存儲庫、Omni 書籤、高性能、使用任何大小的存儲庫。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bEoxXfALzidqjmjiFjSCVA