Web 開發(fā)人員必備的 15 個瀏覽器擴展

現(xiàn)代瀏覽器（例如 Google Chrome）不僅提供出色的瀏覽體驗，而且還為 Web 開發(fā)人員創(chuàng)建出色的應(yīng)用程序提供了出色的工具。有許多出色的瀏覽器擴展可供選擇，因此我整理了一些最佳瀏覽器擴展列表，它們將幫助軟件開發(fā)人員提高工作效率、更快地開發(fā)應(yīng)用程序并檢測錯誤。

React/Redux 和 Vue 開發(fā)工具

像 React.js 和 Vue.js 這樣的 JavaScript 框架非常棒。但是，你應(yīng)該使用它們各自的瀏覽器擴展來充分利用它們。

?React Developer Tools?是一個 Chrome 擴展，可以擴展你的 ?DevTools?。React 組件、道具和狀態(tài)都可以被分析。這對 React.js 開發(fā)來說太棒了！

如果你曾經(jīng)遇到過應(yīng)用程序狀態(tài)問題，?Redux DevTools? 可以幫助你。它適用于 Redux，并可用于任何架構(gòu)處理狀態(tài)。在 Chrome 中激活插件后，訪問 Airbnb.com 等網(wǎng)站。Airbnb 使用 React/Redux，你可以使用 ?DevTools ?來查看他們?nèi)绾伟才艩顟B(tài)管理。是不是很酷？

?Vue.js? 中等效于 ?React Dev Tools? 是?Vue.js devtools?。它是 Vue 開發(fā)人員的必備工具，對于調(diào)試 Vue 組件非常有用。

Githunt

如果你花了很多時間在 GitHub 上尋找新的項目，?Githunt?是一個很好的工具。這個 Chrome 開發(fā)者擴展不是依賴 GitHub 的熱門項目提要，而是在瀏覽器的新標簽區(qū)域中突出顯示所有熱門項目。

JSON視圖

你有沒有想過為什么 JSON 數(shù)據(jù)在其他人的瀏覽器中看起來如此漂亮，而在你的瀏覽器中卻不是？這很可能是由于他們使用了 Chrome 插件?JSONView?。它在格式化 JSON 方面做得很好，而且?guī)缀趿⒓赐瓿?。毫無疑問，這是我最喜歡的附加組件之一！

Library Sniffer

如果你想快速找出 Web 應(yīng)用程序使用的框架或庫，?Library Sniffer?是一個很好的工具。例如，你可以判斷一個網(wǎng)站是由 WordPress 還是 Drupal 提供支持，或者它是否是使用 React.js、Vue.js 或 AngularJS 開發(fā)的……

CSS 掃描 2.0

?CSS Scan 2.0?是一個很棒的插件，用于通過將鼠標懸停在任何元素上來檢查和復(fù)制 CSS。但是，有一個問題：它需要購買許可證。

Peeper CSS 是一個免費的替代品，讓你可以專注于設(shè)計而不是編碼。

瀏覽器堆棧

對于 Web 開發(fā)人員來說，另一個非常方便的 Chrome 插件是 BrowserStack。這個插件，像?Window Resizer? 一樣，允許你測試你的工作的響應(yīng)能力。此插件允許您使用多個瀏覽器而不是不同的屏幕尺寸進行測試。

Web開發(fā)人員

在?Web開發(fā)?擴展增加了一個工具欄與幾個開發(fā)工具到瀏覽器。你可以關(guān)閉 JavaScript、更改頁面布局、操作圖形等等。它與 Chrome 和 Firefox 兼容！

WhatFont

?WhatFont?是一個小插件，可幫助您識別網(wǎng)站上使用的字體。要使用擴展程序，只需激活它并將鼠標懸停在文本上。這里的所有都是它的！它適用于 Chrome 和 Firefox。

ColorZilla

?ColorZilla?是 Chrome 和 Firefox 的瀏覽器擴展。它具有強大的滴管、顏色選擇器、漸變生成器和其他功能。例如，您可以檢索網(wǎng)站上任何像素的顏色。還包括顏色歷史記錄和調(diào)色板查看器。

光譜

由于許多人在使用網(wǎng)站和應(yīng)用程序時是殘疾人，因此可訪問性是當(dāng)前 Web 開發(fā)的重要組成部分。色覺缺陷 (CVD) 是損害一個人區(qū)分不同顏色的能力的一種情況。您可以使用Spectrum為各種類型的 CVD 患者評估網(wǎng)站。

網(wǎng)站調(diào)色板

此擴展程序允許你從任何網(wǎng)站創(chuàng)建調(diào)色板。它包括多個調(diào)色板生成器，以及制作可共享鏈接、以 PDF 格式打印或存儲調(diào)色板等的能力。

Toby

?Toby ?的創(chuàng)建是為了幫助你安排瀏覽器選項卡，這樣你就不必同時打開 1,000 個選項卡。每個新選項卡都包含一個可視化工作區(qū)，你可以通過拖放向其中添加項目。它還可以幫助您提高工作效率。

Talend API 測試器

?Talend API Tester? 是一個很棒的擴展，可讓你在瀏覽器中與 REST、SOAP 和 HTTP API 進行交互——例如類似于 Postman。免費版本處理各種 HTTP 請求，還支持安全和身份驗證。

整頁屏幕截圖

你是否曾經(jīng)想在不請求任何額外權(quán)限的情況下完整地截取當(dāng)前頁面的屏幕截圖？那么 ?Full Page Screen Capture? 可能是適合你的擴展程序。只需單擊擴展程序圖標或使用快捷方式即可傳送到新選項卡，你可以在其中將結(jié)果下載為圖像或 PDF。它甚至適用于可滾動元素或 iframe！

這是我收集的很棒的瀏覽器擴展。我真的希望你可以在作為開發(fā)人員的日常工作中使用其中的一個或多個。

面向開發(fā)人員的最佳 Chrome 擴展程序摘要

至少可以說，這份針對開發(fā)人員的最佳 Chrome 擴展程序列表非常廣泛。雖然我們將其分成兩半，但正如你所見，它們是相當(dāng)松散的部分。每個工具中都有對多種類型的開發(fā)人員有價值的工具，以及一些更專門用于某個特定領(lǐng)域的工具。

我們希望你通過本文了解了一些新的開發(fā)人員工具，它們將使你的生活更輕松。這里有一些工具可以幫助你完成所有這些以及更多工作，無論是通過提高生產(chǎn)力、解決困難還是簡化流程。