App下載

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

迪士尼在逃公主 2021-09-09 10:54:29 瀏覽數(shù) (3312)
反饋

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

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

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

?React Developer Tools?是一個(gè) Chrome 擴(kuò)展,可以擴(kuò)展你的 ?DevTools?。React 組件、道具和狀態(tài)都可以被分析。這對(duì) 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ā)人員的必備工具,對(duì)于調(diào)試 Vue 組件非常有用。

Githunt

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

JSON視圖

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

Library Sniffer

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

CSS 掃描 2.0

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

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

瀏覽器堆棧

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

Web開發(fā)人員

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

WhatFont

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

ColorZilla

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

光譜

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

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

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

Toby

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

Talend API 測(cè)試器

?Talend API Tester? 是一個(gè)很棒的擴(kuò)展,可讓你在瀏覽器中與 REST、SOAP 和 HTTP API 進(jìn)行交互——例如類似于 Postman。免費(fèi)版本處理各種 HTTP 請(qǐng)求,還支持安全和身份驗(yàn)證。

整頁屏幕截圖

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

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

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

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

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


0 人點(diǎn)贊