33 изключително полезни разширения на Chrome за уеб разработчици

Разширенията добавят допълнителни характеристики и функции към твоя браузър, подобрявайки работата или процесите. С помощта на специални разширения уеб разработчиците спестяват време и разходи, тъй като много от тези изключително ефективни инструменти са безплатни. Някои са отнасят за външното оформяне на уеб страницата, други са в помощ на технологията зад нея. Помагат за изграждането и оптимизирането на онлайн продуктите. Тъй като повечето разработчици предпочитат да използват браузъра Chrome, аз подготвих списък с най-добри разширения за Chrome за уеб разработчици.

Публикацията е обновена на 21.11.2024.

1. Ghostery

Ghostery е страхотно разширение на Google, което открива тракери, пиксели и всякакви други вградени фрагменти в уебсайт. Веднага виждаш кои добавки и тракери са инсталирани на уеб страницата, която си посетил. Най-големият актив на уеб програмиста може да бъде скоростта на неговата система. Ghostery е мощен плъгин, който блокира всички реклами, скриптове, изображения, рамки и вграждания от компании, на които нямаш доверие. Това ускорява производителността. Можеш да сърфираш по-бързо, като същевременно защитаваш поверителността си. Не е необходима регистрация, за да го използваш.

Въпреки че Ghostery не предоставя полезни инструменти за уеб разработка, той поддържа твоето сърфиране чисто и прави всичко по-бързо.

Иди на разширението Ghostery.

2. Wappalyzer

Wappalyzer е ефективен инструмент, който подобно на Ghostery, ти позволява да идентифицираш софтуер, който е инсталиран на всеки конкретен уебсайт – рамки, езици, видео плейъри и т.н.

Само с едно щракване можеш да откриеш езиците за програмиране, базите данни, уеб услугите, управлението на съдържанието, сървърния софтуер, инструментите за анализ, платформите за електронна търговия, плъгините, уиджетите, JavaScript библиотеки и цял набор от други приложения. Ако искаш да знаеш тайните зад дадена страница, това е един от начините да разбереш.

Просто инсталирай разширението, избери го, докато си на желаната уеб страница и ще се появи изскачащ прозорец, подчертаващ всички разпознаваеми приложения, работещи на тази страница.

Иди на разширението Wappalyzer.

3. Web Developer

Това разширение ще ти даде инструменти, за да можеш да правиш много по-сложни тестове, например премахване на CSS, премахване на JavaScript, изображения, забрана на бисквитки, форми, рамки и много други.

Веднъж инсталиран, Web Developer е достъпен чрез малката икона на зъбно колело в лентата с инструменти. След като я кликнеш, трябва да видиш малък падащ прозорец с набор от опции, организирани в раздели. Избери раздел за достъп до инструментите в него.

Иди на разширението Web Developer

4. You.com

Това е търсачка, предназначена за програмисти, която можеш да добавиш като разширение към Google. Когато търсиш нещо, тя подчертава страници като stackoverflow, и ти дава някои примерни кодове за това, което търсиш.

Можеш да търсиш в 4 различни търсачки с това разширение:

• You.com: частна търсачка без реклами, която можеш да персонализираш със 150 приложения.
• You.com/code: търсачка за кодиране, създадена по поръчка, за да включва 20 ресурса за кодиране.
• Стандартни търсачки като Google и DuckDuckGo.

Иди на разширението You.com.

5. Lighthouse

Това разширение ще ти помогне бързо да тестваш уеб страница за SEO, оптимизация, добри практики, достъпност и т.н., в допълнение към това, че ще ти даде съвет как да коригираш проблемите.

Разширението оказва голяма помощ за разработчиците. С негова помощ се подобрява производителността и качеството на уеб страниците. Бързите тестове и одити на уеб страницата генерират отчет, който помага да се идентифицират слабите места.

Можеш също да стартираш Lighthouse чрез Панел за одити на Chrome DevTools (DevTools Audits panel). Пряк път за отваряне на DevTools: F12.

* Кратко ръководство за използване на Lighthouse:
https://developers.google.com/web/tools/lighthouse/

* Преглеждай и споделяй отчети онлайн:
https://googlechrome.github.io/lighthouse/viewer/

* Източник и подробности за Github:
https://github.com/GoogleChrome/lighthouse

Иди на разширението Lighthouse.

6. CSS Peeper

CSS Peeper е програма за преглед на CSS, пригодена за дизайнери. Това разширение ще ти даде много инструменти за по-задълбочен тест на страницата. То съдържа инструменти като премахване на CSS, показване на alt атрибути, премахване на Javascript.

Иди на разширението CSS Peeper.

7. CSS Viewer

CSSViewer е проста програма за преглед на свойства на CSS. Може би едно от най-полезните разширения на Chrome за уеб разработчици. Тя предоставя плаващ панел, който отчита идентичността на секцията, върху която е поставена мишката, заедно с атрибути те за шрифт, текст, цвят, фон, кутия, позициониране и ефекти. CSS Viewer предоставя бързо основната CSS информация, от която се нуждаеш.

Иди на разширението CSSViewer

8. Window Resizer

Разширението Window Resizer ти позволява да промениш размера на прозореца на браузъра си в движение, имитирайки различни резолюции на екрана. Това го прави много полезно за уеб разработчиците да тестват своите оформления, особено докато работят с адаптивен дизайн. Щракването върху иконата в лентата с менюта създава падащо меню с размери на прозорец, който покрива повечето стандартни мобилни устройства, таблети и настолни компютри и има опции за добавяне на персонализирани размери. Разширението има опция за експортиране на настройките и импортирането им на друг компютър.

Хубавото на Window Resizer е, че той предлага опция за стартирането му като изскачащ прозорец, което ти позволява да превключваш между различни разделителни способности на екрана и да видиш дали твоите медийни точки на прекъсване работят според очакванията. Освен това можеш също да завъртиш екрана си и да персонализираш предварително зададените настройки.

Иди на разширението Window Resizer.

9. Dark Reader

Dark Reader помага за намаляване на напрежението в очите, като активира тъмен режим на всеки уебсайт. Той обръща ярките цветове в по-тъмни тонове, което позволява по-удобно сърфиране. Можеш да регулираш яркостта, контраста и настройките на шрифта по твой вкус. Не става въпрос само за естетика, но и за поддържане на здравословни навици на екрана.

Иди на разширението Dark Reader.

10. ColorZilla

Colorzilla е инструмент за избор на цвят, история на цветовете, CSS анализатор на градиенти и т.н. Това е отлично разширение за Chrome за уеб разработчици или дизайнери, за да избират директно цвета и да го използват в дизайна или работата си.

Това и горното разширение са едни от най-използваните разширения на Chrome за уеб разработчици.

Иди на разширението ColorZilla.

11. Fake Filler

Попълването на формуляри за тестване може да бъде досадно. Fake Filler автоматизира това, като попълва формуляри с произволни данни. Независимо дали тестваш формуляр за контакт или процес на плащане, това разширение спестява време, като бързо попълва всички полета с информация за контейнери. Това е особено полезно по време на фазата на тестване на уеб разработката.

Иди на разширението Fake Filler.

12. Corporate Ipsum

Corporate Ipsum е популярна алтернатива на Lorem Ipsum Generator. Ако твоят клиент е по-придирчив към текста на контейнера или искаш да има повече усещането за бизнес уебсайт, това е точното разширение. То генерира lorem ipsum, но с корпоративен привкус.

Работи като генератора на Lorem Ipsum. Инсталирай разширението, отвори страницата си, избери иконата и ѝ кажи колко копия да генерира. Това е бърз и лесен начин за генериране на по-ориентиран към бизнеса текст на контейнер.

Иди на разширението Corporate Ipsum.

13. Clear Cache

Колко пъти си променял настройка в сайт и си се чудил защо промяната не е отразена на екрана? Не си сам в тези истории, случва се на всички. Ето защо Clear Cache е толкова полезно разширение за разработчици на Chrome.

То ти позволява да изчистиш кеша от лентата с инструменти. Работи „зад кулисите“, което означава, че няма изскачащи или диалогови прозорци за потвърждение, които да те разсейват. Може да се персонализира по отношение на това колко данни искаш да изчистиш, включително кеш на приложения, изтегляния, файлови системи, данни за формуляри, история, локално хранилище, пароли и много други.

Иди на разширението Clear Cache.

14. Talend API Tester – Free Edition

Talend API Tester е мощен инструмент в браузъра за REST и SOAP API, предлагащ функции като верижно свързване на заявки, визуализиране на отговорите и отстраняване на грешки в реално време. Той е удобен за потребителя и позволява запазване на заявки и организирането им в колекции.

Иди на разширението Talend API Tester – Free Edition.

15. Octotree – GitHub code tree

Octotree подобрява интерфейса на GitHub с файлово дърво за бърза навигация през хранилища. Той е идеален за големи проекти, като ти позволява да изследваш файлове и папки, както би направил в IDE, без да напускаш браузъра си.

Иди на разширението Octotree – GitHub code tree.

16. BrowserStack

Ефективно и мощно разширение за уеб разработчици, облачна платформа за уеб и мобилно тестване, операционни системи и реални мобилни устройства. Позволява да тестваш работата си на всеки възможен браузър и операционна система при поискване.

Този плъгин предоставя реални устройства за тестване, а не емулатори / симулатори . Той стартира нови тестови сесии на реални браузъри с няколко кликвания. Можеш също така да стартираш до 12 браузъра за лесен достъп, да превключваш между браузъри и да отделяш по-малко време за цялостния процес на тестване, като използваш разширението за Chrome.

Позволява ти да тестваш отзивчивостта на твоята уеб страница или приложение и да проверяваш потребителското изживяване в реално време, за да регистрираш евентуални грешки.

За да използваш интеграцията:

1. Инсталирай разширението на браузъра.

2. Отвори уеб страницата, която искаш да тестваш и кликни върху логото на BrowserStack в лентата с инструменти за разширение.

3. Избери комбинацията браузър и устройство, на която искаш да тестваш.

Забележка: Тестерите се нуждаят от акаунт в BrowserStack, за да използват разширението за Chrome. Регистрирай се безплатно  директно от разширението.

Иди на разширението BrowserStack.

17. Lambda test

Lambda Test позволява на разработчиците и тестерите да извършват кръстосано тестване на уеб браузъри и операционни системи с различни екранни разширения.

Основни функции:

• Проверка на скоростта на реакция на всички размери на екрана;
• Отстраняване на грешки в реално време;
• Екранни снимки и видеозапис;
• Ясни и полезни дневници на сесии;
• Интелигентно визуално регресионно тестване;
• Онлайн тестване за съвместимост на браузъра;
• LambdaTest може лесно да се интегрира със следните инструменти: Jira, Slack, Asana, Github, Gitlab, Bitbucket и др.

Иди на разширението Lambda test.

18. Web Vitals

Измерва показатели за здрав сайт.

Web Vitals са сигнали за качество, които са ключови за предоставянето на страхотен UX в мрежата. Това разширение измерва Core Web Vitals, осигурявайки незабавна обратна връзка относно показателите за зареждане, интерактивност и промяна на оформлението. То е в съответствие с начина, по който тези показатели се измерват от Chrome и се отчитат на други инструменти на Google (напр. отчет за потребителското изживяване на Chrome, Page Speed ​​Insights, Search Console).

Разширението поддържа всички основни уеб показатели и улавя:

• Largest Contentful Paint
• Cumulative Layout Shift
• Interaction to Next Paint
• Time to First Byte
• First Contentful Paint
• First Input Delay

Иди на разширението Web Vitals.

19. GoFullPage

С това разширение разработчиците могат да правят екранни снимки на работата си и да я изпращат на ръководителя на екипа за одобрение или в други подобни случаи. Това разширение е предпочитано, тъй като опростява и ускорява процеса на правене на екранни снимки.

Основни функции:

• Бързо и лесно, с едно кликване се заснема цялата уеб страница;
• Притежава точност;
• Изтегляне на екранна снимка в JPG, PNG, PDF и др.

Иди на разширението GoFullPage.

20. Lightshot

Lightshot е още едно от онези разширения за разработчици на Chrome, които могат да бъдат полезни за всички. Използва се за екранни снимки и анотации върху тях.

След като го инсталираш, отвори страницата, която искаш да заснемеш, избери иконата на перо. Плъзни и пусни курсора върху областта, която искаш да заснемеш. Избери от изскачащото меню, което се появява, какви действия искаш да извършиш върху екранната снимка и я запази.

Иди на разширението Lightshot.

21. WhatFont

WhatFont е просто, но елегантно разширение за Google Chrome. То позволява на разработчиците бързо да идентифицират шрифтовете, използвани на конкретен уебсайт. Всичко, което трябва да направиш, е да поставиш курсора на мишката върху съдържанието на уеб страницата и ще видиш изскачащ прозорец с информация за шрифтовете.

Разширението помага за идентифициране на стила, размера, теглото и цвета на текста.

Иди на разширението WhatFont.

22. Fonts Ninja

Fonts Ninja работи по подобен начин на WhatFont за идентифициране на шрифтове в уеб страница. Това е полезна алтернатива, ако WhatFont не работи за теб по някаква причина. Има по-малък интерфейс.

Инсталирай разширението и ще видиш малка зелена икона на нинджа в лентата с инструменти. Отвори уеб страница в Chrome, избери иконата и задръж курсора на мишката върху шрифт, който искаш да идентифицираш. Ще се появи изскачащ прозорец за преглед на страницата и отделен изскачащ прозорец над маркирания шрифт.

Иди на разширението Fonts Ninja.

Подобно разширение е и Font Finder.

23. Perfect Pixel

PerfectPixel позволява на разработчиците и дизайнерите на маркиране да поставят полупрозрачно наслагване на изображение върху горната част на разработения HTML и да извършват съвършено пикселно сравнение между тях.

Функции:

• Поддръжка на множество слоеве;
• Обръщане на слоя и мащабиране;
• Отделни слоеве за всеки уебсайт;
• Слоевете се запазват между сесиите на сърфиране;
• Минималистичен и лесен за използване потребителски интерфейс;
• Поддръжка на качване на файлове с плъзгане и пускане, поставяне от URL, поставяне от клипборда;
• Клавиши със стрелки на клавиатурата и поддръжка на колелце на мишката;
• Разширението работи с file:// scheme (локални файлове).

Иди на разширението Perfect pixel.

24. LT Debug

LT Debug заменя традиционните конзоли за разработчици с по-интуитивен интерфейс за отстраняване на грешки и тестване на уеб приложения. Позволява на разработчиците да променят HTTP заглавки, да блокират URL заявки и да запазват конфигурации за бъдеща употреба, рационализирайки значително процеса на отстраняване на грешки.

Иди на разширението LT Debug.

25. Page Ruler

Page Ruler е подобен на Dimensions по това, че е динамично разширение за измерване. Dimensions може да измерва височината и ширината на елементите, а Page Ruler е по-полезен за измерване между тях.

Когато трябва да измериш нещо, избери иконата на линийка, така че да стане оранжева. Страницата избледнява, което ти позволява да начертаеш елемента, който искаш да измериш. След това разширението ще представи точните измервания на елемента в малко изскачащо поле до него.

Иди на разширението Page Ruler.

26. HTML Validator

HTML Validator е бърз инструмент за проверка на твоя HTML код, синтаксиса на твоите HTML5 страници в браузъра. Има стотици HTML инструменти, но HTML Validator е наистина полезен за бързо валидиране на маркирането в браузъра.

Броят на грешките на HTML страница се вижда с икона в лентата на състоянието на браузъра. Подробностите се виждат в инструментите за разработчици.

Има и автоматичен бутон Clean up, който ще се постарае да ти предложи почистена версия на твоята страница, без грешки.

Иди на разширението HTML validator.

27. Redux DevTools

Redux DevTools е специално разширение за браузър, което ти позволява лесно да отстраняваш грешки в редуцирани приложения.

Основни функции:

1. Лесни и лесни за проследяване действия;
2. Интуитивен и разбираем интерфейс;
3. Можеш да видиш цялото хранилище на приложението.

Иди на разширението Redux DevTools.

28. Check My Links

Разширението прави точно това, което казва. Check My Link обхожда твоята уеб страница, за да покаже дали има повредени връзки и проверява за валидни и пренасочени връзки. Може да се използва лесно и може да бъде много полезно за поддържане на стандартите за SEO на твоята уеб страница.

След инсталирането му в Chrome, трябва да видиш малка икона на отметка в лентата с инструменти. Зареди страницата си, избери иконата и ще се появи изскачащ прозорец с всички оценени връзки. В зависимост от размера на страницата това може да отнеме няколко секунди, но работи безупречно.

Иди на разширението Check My Links.

29. VisBug

VisBug трансформира всяка уеб страница в интерактивно дизайнерско платно, където разработчиците могат да редактират елементи директно в браузъра. Този инструмент е особено полезен за създаване на прототипи и брейнсторминг върху проекти на потребителски интерфейси, без да е необходимо да се потапяте в кода веднага.

Иди на разширението VisBug.

30. Session Buddy

Session Buddy е общ инструмент, полезен за разработчици и всеки тип уеб потребител. Това е инструмент за „запазване за по-късно“, който може да запази всички отворени раздели в една сесия за по-късен достъп. Полезен е за случай, когато попаднеш на нещо, което искаш да прочетеш по-късно. Използва се за увеличение на продуктивността, ако използваш няколко раздела.

След като Session buddy бъде инсталиран, избери малката икона от лентата с инструменти, за да видиш всичките си отворени раздели. Можеш да избереш иконата след срив на браузъра, за да възстановиш всички раздели и да запазиш сесията за зареждане по-късно.

С помощта на функциите за търсене можеш лесно да намериш това, което търсиш в отворени или запазени раздели.

Иди на разширението Session Buddy.

31. React Developer Tools

React Developer Tools са специално за React JavaScript библиотеката с отворен код. Ако работиш с React, това разширение ти помага да инспектираш библиотеката според нуждите.

Инсталирай разширението в браузъра и ще видиш две икони, които се показват в лентата с инструменти на Chrome. Единият е за Components, а другият за Profiler. Компонентите ти показват какво използва React на страницата, а Profiler ти показва данни за ефективността.

Иди на разширението React Developer.

32. Checkbot: SEO, Web Speed & Security Tester

Checkbot е подобен на Web Developer Checklist по това, че проверява страница за връзки, грешки, сигурност, производителност, SEO и редица други съображения. Това е много полезен инструмент.

Checkbot се инсталира по същия начин като всички разширения. Избери синята икона, за да изведеш страничната лента. Използвай менютата, за да избереш типа тест, който искаш да извършиш, и резултатите ще бъдат показани на страницата.

Иди на разширението Checkbot.

33. Daily.dev The Homepage Developers Deserve

Daily.dev не е инструмент за производителност сам по себе си, но прави живота много по-лесен. Това е агрегатор на новини, който е специализиран в новини за развитие. Той показва страница, пълна с новини, публикации в блогове и полезни страници по избраната от нас тема.

Daily действа като начална страница и агрегатор на новини. Избери елемент от страницата, за да посетиш неговата страница. Всеки се отваря в нов раздел и е смесица от новини, рецензии, съвети, инструкции и всички добри неща, които те карат да растеш като разработчик Това е отлично разширение, което да използваш, ако искаш да си в течение.

Иди на разширението Dayly.dev.

Заключение

Споделих разширения, които сама изпробвах, но ако смяташ, че съм пропуснала някой полезен инструмент, не се колебай да оставиш коментар. Сподели опита си от използването на разширения, тези или извън този списък.

---

Препоръчани ресурси:

Най-добрите безплатни разширения за браузъри за преобразуване на текст в аудио

11 безплатни приложения за красиви екранни снимки – скрийншоти

Преобразуване на текст в аудио онлайн с видеоклип на аватар (Text-to-Speech)

Как бързо да научиш SEO за уеб дизайнери