Share This
Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ со ΠΌΠ½ΠΎΠΉ
ΠšΡ€ΡƒΡ‚ΠΈ Π² Π½ΠΈΠ·
Categories
//🧰 10 Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Google Chrome для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

🧰 10 Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Google Chrome для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

Расширения браузера Chrome для управления свойствами элементов страницы, необходимые каждому веб-разработчику. Обсудить

10 rasshirenij google chrome dlja veb razrabotchika 5d0467b - 🧰 10 расширений Google Chrome для веб-разработчика

OctoTree

10 rasshirenij google chrome dlja veb razrabotchika 5e6c9c2 - 🧰 10 расширений Google Chrome для веб-разработчика

OctoTree

Расширение OctoTree облегчает изучение и модификацию кода на Github. Доступны следующие функции: темный режим, настройка шрифтов, исходный код в виде дерева, боковая панель, как в IDE и т. д. Octotree похож на Visual Studio Code, но для GitHub.

Wappalyzer

10 rasshirenij google chrome dlja veb razrabotchika dc6295e - 🧰 10 расширений Google Chrome для веб-разработчика

Wappalyzer

Если требуется выяснить, какие технологии, фреймворки и библиотеки JavaScript используются на конкретном сайте или в приложении, вам поможет Wappalyzer. Расширение-профайлер показывает сходные с обследуемым сайты и составляет список используемых технологий. Интересная особенность – инструмент умеет отслеживать изменения в программном стеке сайта-конкурента.

Web Developer

10 rasshirenij google chrome dlja veb razrabotchika 9efa928 - 🧰 10 расширений Google Chrome для веб-разработчика

Web Developer

Web Developer добавляет в Chrome, Firefox и Opera очистку cookies сеанса, просмотр свойств элементов и изображений (как в DOM Inspector), информацию о шрифтах и возможность редактирования CSS.

Windows Resizer

Windows Resizer изменяет размер окна браузера, эмулируя различные разрешения экрана. Расширение полезно для тестирования макетов: не нужно вручную растягивать окно.

10 rasshirenij google chrome dlja veb razrabotchika e8c90f5 - 🧰 10 расширений Google Chrome для веб-разработчика

Windows Resizer

Список разрешений настраивается: можно добавить, удалить и изменить их порядок, установить размеры и положение окна и иконок, применить новые параметры к viewport, настроить горячие клавиши, а также экспортировать и импортировать настройки.

Check My Links

10 rasshirenij google chrome dlja veb razrabotchika 06a6bd5 - 🧰 10 расширений Google Chrome для веб-разработчика

Check My Links

Check My Links просматривает страницу и выделяет ссылки, которые не работают, ведут на нерелевантную страницу и т. д. Удобная функция: коды HTTP-ответов и полные URL-адреса неработающих ссылок публикуются в журнале консоли (Ctrl+Shift+J).

What Font

10 rasshirenij google chrome dlja veb razrabotchika 1926523 - 🧰 10 расширений Google Chrome для веб-разработчика

What Font

С помощью What Font можно навести курсор на элемент, чтобы просмотреть шрифт и найти используемые для управления веб-шрифтами службы. Расширение поддерживает Typekit и Google Font API. Аналоги: Firebug (для Firefox) и Webkit Inspector (нужно установить Chrome Canary).

ColorZilla

10 rasshirenij google chrome dlja veb razrabotchika a6f8272 - 🧰 10 расширений Google Chrome для веб-разработчика

ColorZilla

Наведите курсор на элемент и получите информацию о цвете с помощью ColorZilla. Есть возможность выбора цвета из палитры, история использования, копирование атрибутов оформления, анализ цвета DOM-элемента и генератор градиентов. Похожее расширение – Color By Fardos.

Web Developer Checklist

10 rasshirenij google chrome dlja veb razrabotchika 6b9f15b - 🧰 10 расширений Google Chrome для веб-разработчика

Web Developer Checklist

Web Developer Checklist позволяет проверить любой ресурс или приложение, используя заранее подготовленный список с полезными ссылками, разбитыми по категориям: SEO, производительность, семантика, безопасность и т. д.

CSS Viewer

10 rasshirenij google chrome dlja veb razrabotchika 2af51c6 - 🧰 10 расширений Google Chrome для веб-разработчика

CSS Viewer

CSS Viewer обеспечивает простой доступ к CSS-свойствам элемента. Для активации инструмента нажмите на значок в панели инструментов, а затем наведите курсор на любой элемент Популярный аналог – Code Cola.

Pesticide

10 rasshirenij google chrome dlja veb razrabotchika 721f312 - 🧰 10 расширений Google Chrome для веб-разработчика

Pesticide

Простейший способ визуализировать размеры элементов в CSS. С помощью Pesticide вы видите каждый из них, как прямоугольник с границами вокруг. На схеме динамически отображается влияние на элемент свойств border, margin, padding.

Заключение

Рассмотренные расширения помогают автоматизировать рутинные задачи по созданию сайтов, а совместное использование нескольких инструментов приведет к значительному росту производительности труда веб-разработчика. Опытом использования этих и других расширений читатели могут поделиться в комментариях.

Дополнительные материалы по теме:

  • 8 отличных инструментов для веб-разработчиков
  • 8 самых распространенных ошибок веб-разработчика
  • 10 каналов с лучшими видео по веб-разработке на YouTube
  • Лучшие шпаргалки для веб-разработчиков
  • 20+ интересных идей для создания веб-приложений

  • 0 views
  • 0 Comment

Leave a Reply

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

Π­Ρ‚ΠΎΡ‚ сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Akismet для Π±ΠΎΡ€ΡŒΠ±Ρ‹ со спамом. Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ваши Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π².

Π‘Π²Π΅ΠΆΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

    Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚ ! МнС 38 Π»Π΅Ρ‚, я Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π² области ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π±ΠΎΠ»Π΅Π΅ 4 Π»Π΅Ρ‚. Π’ΡƒΡ‚ собрано самоС интСрСсноС.

    Our Instagram 04.

    Categories 05.

    Β© SpeccyΒ 2020 / All rights reserved

    Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ со ΠΌΠ½ΠΎΠΉ
    Close