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

[[318311]]

CSSViewer

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

它比我們?yōu)g覽器中的內(nèi)置版本先進(jìn)得多，后者只能顯示其下方元素的寬度和高度。

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

Angury

這是我的最愛，也是我的 DevTool 擴(kuò)展首選。

Augury 是由 Rangle.io 構(gòu)建的 DevTool 擴(kuò)展，用于調(diào)試、分析和優(yōu)化 Angular 項(xiàng)目。

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

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

當(dāng)我想了解組件的變更檢測觸發(fā)器可以進(jìn)入組件樹多深時，我覺得這款工具是很有用的。

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

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

React Developer Tools

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

這是 React 團(tuán)隊(duì)開發(fā)的，很棒的開發(fā)工具。

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

我經(jīng)常使用的一項(xiàng)很酷的功能是高亮顯示重渲染的組件。

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

JSONView

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

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

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

Library Sniffer

我經(jīng)常會在瀏覽一些網(wǎng)頁的時候想知道這個網(wǎng)頁是用哪個框架構(gòu)建的，以及它所使用的是哪些庫。

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

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

Web Developer

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

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

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

LambdaTest

瀏覽器兼容性永遠(yuǎn)是 Web 開發(fā)的大坑之一。開發(fā)人員經(jīng)常要考慮如何在不同的瀏覽器上呈現(xiàn)自己的網(wǎng)站。

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

這款擴(kuò)展程序?yàn)槟阃瓿闪怂泄ぷ?。它讓你可以使用桌面和移動設(shè)備上的各種瀏覽器來截取網(wǎng)頁的屏幕快照，從而快速、果斷地解答兼容性問題。

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

ColorPick Eyedropper

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

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

CSSPeeper

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

使用 CSSPeeper，你可以將鼠標(biāo)懸停在網(wǎng)頁上的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。

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

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

WhatFont

“排版是基于經(jīng)驗(yàn)和想象力的二維架構(gòu)。” ——赫爾曼·薩普夫

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

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

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

附贈：

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

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

因此，無論你是要創(chuàng)建自己的可重用組件的私有集合，還是要查閱由開源社區(qū)構(gòu)建的無數(shù)組件列表，Bit 都是你的好伙伴：

https://github.com/teambit/bit