“進步不是勤奮者的功勞。它是懶惰者在嘗試尋找更簡單的方法時取得的成果。” ——羅伯特·海因萊因

[[318311]]

CSSViewer

這款工具用來識別和顯示元素的 CSS 屬性是非常方便的。它包含一個浮動面板，你可以將其懸停以檢查頁面上的元素。CSSViewer 將你選擇的 CSS 顯示在一個提示框中，使你可以輕松地復制所選的 CSS。

它比我們瀏覽器中的內置版本先進得多，后者只能顯示其下方元素的寬度和高度。

https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en

Angury

這是我的最愛，也是我的 DevTool 擴展首選。

Augury 是由 Rangle.io 構建的 DevTool 擴展，用于調試、分析和優化 Angular 項目。

Augury 在 DevTools 中提供了豐富的 UI，你可以在其中：

• 查看組件的 DI 樹圖
• 編輯和更改組件中的屬性
• 發射事件
• 還有更多功能……

當我想了解組件的變更檢測觸發器可以進入組件樹多深時，我覺得這款工具是很有用的。

如果你是 Angular 開發人員，并且沒有在 DevTools 中使用過 Augury，這次可不要錯過它了。當你要直接從瀏覽器調試 Angular 應用程序時，Angury 就是你需要的一切。

https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en

React Developer Tools

可以將 React Developer Tools 視為“React 版的 Angury”。

這是 React 團隊開發的，很棒的開發工具。

就像 Augury 一樣，React Developer Tools 提供了一個內容豐富的 UI，我們可以在其中監控 React 組件中的事件流。你可以檢查 React 組件的 props 和狀態，隨意更改 props 和狀態，并查看在組件樹中是如何更改和傳播的。

我經常使用的一項很酷的功能是高亮顯示重渲染的組件。

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

JSONView

瀏覽器通常不擅長顯示 JSON 數據。通常情況下，數據都會以黑白兩種顏色顯示，而且看起來十分密集，理解起來也很困難，尤其是在嘗試定位深層嵌套的屬性時會讓人感覺特別麻煩。

JSONView 能格式化并美化 JSON 數據。它以彩色樹狀視圖顯示它們，讓我們更容易識別屬性和值。

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

Library Sniffer

我經常會在瀏覽一些網頁的時候想知道這個網頁是用哪個框架構建的，以及它所使用的是哪些庫。

對于有和我一樣的需求的開發者，Library Sniffer 絕對是一個絕佳的選擇。這款工具將為你提供網頁上的詳細信息，Library Sniffer 會告訴你，你正在瀏覽的網頁到底是運行在哪個框架上，是 React、Angular、Vue、Svelte 還是 Wordpress 等等。有的時候你肯定想知道這些，就像我一樣。

https://chrome.google.com/webstore/detail/library-sniffer/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh?hl=en

Web Developer

這是一個工具包。Web Developer 在你的瀏覽器上添加一個工具欄。這個工具欄有許多方便的道具，程序員和設計人員都可以在日常工作中用到它們，從而簡化自己的工作。它的用途包括添加輪廓到元素、顯示標尺、查找頁面上所有損壞的圖像、更改頁面的布局和處理圖像等。

它還將更多常用功能添加到了默認的 DevTools 檢查器中。

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

LambdaTest

瀏覽器兼容性永遠是 Web 開發的大坑之一。開發人員經常要考慮如何在不同的瀏覽器上呈現自己的網站。

我們通常選擇的方法是在計算機上安裝不同的瀏覽器，以便我們可以啟動任何瀏覽器并在其上測試我們的網站。

這款擴展程序為你完成了所有工作。它讓你可以使用桌面和移動設備上的各種瀏覽器來截取網頁的屏幕快照，從而快速、果斷地解答兼容性問題。

https://chrome.google.com/webstore/detail/lambdatest-screenshots/fjcjehbiabkhkdbpkenkhaahhopildlh?ref=producthunt

ColorPick Eyedropper

ColorPick Eyedropper 有一個浮動面板，這個浮動面板懸停在網頁中的元素上方，以顯示元素的顏色。單擊該元素會將所選元素的顏色復制到剪貼板。這是快速發現、復制和粘貼顏色的好方法。

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

CSSPeeper

另一個檢查和復制元素樣式的出色工具。

使用 CSSPeeper，你可以將鼠標懸停在網頁上的任何元素上，然后單擊鼠標即可復制元素的樣式。

如果你曾經試過在 chromeinspector 工具中從一個元素復制 CSS 樣式代碼，就能輕松理解 CSSPeeper 所帶來的價值。

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en

WhatFont

“排版是基于經驗和想象力的二維架構。” ——赫爾曼·薩普夫

在查看網頁時，經常讓我眼前一亮的是網頁所使用的字體。如果我看上了某種字體，就會本能地單擊鼠標右鍵來查看頁面源，進而檢查并揭示這一奇跡的源頭。但這套流程對于這么簡單而常見的東西來說有些過于復雜。

WhatFont 讓字體查看起來更加容易。你可以將鼠標懸停在文本上以快速查閱其字體系列。

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

附贈：

Bit除了上面的十個擴展程序外，Bit 也值得一提。Bit 不是 Chrome 擴展程序，但絕對是遵從“讓你的開發工作更輕松”這一精神的工具。

你可以使用 Bit 從任何代碼庫中“獲取”可重用組件，并將它們共享到 bit.dev 中的組件集合中。與你的團隊成員一起使用它，可以最大程度地(在存儲庫內和在不同存儲庫之間)重用代碼，加快開發速度，并使代碼庫更易維護。

因此，無論你是要創建自己的可重用組件的私有集合，還是要查閱由開源社區構建的無數組件列表，Bit 都是你的好伙伴：

https://github.com/teambit/bit