1. Редакторы кода
2. 2. JSONView
3. 3. Stylebot
4. 4. Проверьте мои ссылки
5. 5. Сонар
6. 6. Wappalyzer
7. Другой
8. 8. Очистить кэш
9. 9. OneTab
10. Резюме

Коди Арсено

Опубликовано 1 июня 2017 г.

Если вы веб-разработчик, вы, вероятно, проводите много времени в Chrome. Так как это самый популярный веб-браузер с долей рынка 44,5% вы обязаны постоянно использовать ее для предварительного просмотра веб-страниц, над которыми вы работаете. Если Chrome является браузером по умолчанию, вы можете упростить свою жизнь, используя лучшие расширения Chrome для веб-разработки.

С расширениями Chrome, предназначенными для веб-разработчиков, вы можете редактировать код на лету, проверять производительность, анализировать технологический стек других веб-сайтов и многое другое. Хотя Chrome Devtools действительно предлагает впечатляющий набор функций и возможностей, многие из инструментов, представленных в этом посте, направлены на расширение текущей функциональности, предоставляемой Devtools.

Ниже вы найдете список из 9 полезных расширений Chrome для веб-разработчиков.

Редакторы кода

1. Веб-разработчик

Веб-разработчик - одно из самых надежных расширений Chrome для людей, которые создают веб-приложения и сайты. Он позволяет вам делать все, начиная от записи и редактирования HTML и CSS, а также отключать и включать файлы cookie, отмечать все ссылки как посещенные или не посещенные и отображать различную информацию об изображениях, включая текст ALT, размеры изображений и пути к изображениям.

Расширение также позволяет вам очертить ряд объектов на веб-странице, включая рамки, заголовки и плавающие элементы. Кроме того, вы можете автоматически вносить изменения в сайт, такие как преобразование всех форм из GET в POST и наоборот, а также очистку данных формы и изменение размера или размера фреймов. Даже если у вас есть отдельный инструмент для редактирования, веб-разработчик является ценным расширением, которое может помочь вам редактировать веб-сайты на лету.

2. JSONView

Если вы хотите проверить код JSON в Chrome, будь то собственный или другой сайт, сделать это через Chrome может быть непросто. Если вы не заинтересованы в просмотре кода в виде текстовой стены или необходимости его загрузки, рассмотрите возможность установки JSONView. Это расширение изначально было создано для Firefox, но оно было перенесено в Chrome.

Это расширение показывает вам код JSON в удобной для чтения форме, включает возможность нажимать на ссылки и даже выполняет базовую проверку. Он также предоставляет складные массивы и объекты, как при просмотре XML, и позволяет настраивать методы анализа и отображать код, даже если он содержит ошибки.

3. Stylebot

Используя Stylebot, вы можете легко изменять и тестировать CSS. Наряду с возможностью загрузки сохраненных таблиц стилей, вы также можете извлекать таблицы стилей с других сайтов и применять их к веб-странице с помощью этого расширения. Предварительный просмотр может быть настроен для отображения изменений на сайте по мере их внесения.

Расширение также позволяет вам определить, хотите ли вы использовать расширенную опцию редактирования, которая позволяет вносить изменения, редактируя код CSS или используя основной инструмент редактирования. Базовое редактирование позволяет вам заполнять поля формы, а не возиться с CSS-кодом. Тем не менее, базовое редактирование позволяет вам делать только такие вещи, как изменение граней и размеров шрифта и создание настроек заголовка.

4. Проверьте мои ссылки

Наличие страницы, заполненной неработающими ссылками, может разочаровать как посетителей, так и частых пользователей. Используя Check My Links, вы можете узнать в течение нескольких секунд, есть ли какие-либо битые ссылки на странице. Расширение позволяет вам убедиться, что оно не смотрит на кэшированную версию страницы, а также позволяет использовать HEAD или GET для проверки ссылок.

Хотя это довольно простое расширение, это отличное расширение Chrome для разработчиков, поскольку оно также позволяет вам добавить список доменов, которые вы не хотите проверять. Например, если вы хотите исключить рекламные сети из доменов, которые проверяет инструмент, вы можете сделать это. Вы также можете использовать инструмент для проверки как внутренних, так и внешних ссылок, и у вас есть возможность проверять или не проверять ссылки nofollow.

5. Сонар

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

Сонар разбивает информацию о соединениях с веб-страницами и показывает, сколько времени они загружают. Наряду с отображением общего времени загрузки в миллисекундах, вы также можете увидеть, какие типы медиафайлов и файлов загружаются, включая скрипты, CSS и изображения. Вы также можете увидеть, сколько доменов участвует в загрузке страницы и сколько времени требуется для получения данных из каждого домена.

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

Посетите расширение

6. Wappalyzer

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

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

Некоторые платформы и инструменты, которые может определить расширение, включают:

• Рекламные системы
• аналитика
• Защитный код
• Системы комментариев
• Системы управления документами
• Автоматизация маркетинга
• Сетевое хранилище
• Платежные системы
• платный доступ
• Виджеты

Другой

7. Окно Resizer

Для веб-разработчиков и разработчиков приложений важно знать, как выглядит ваше приложение на экранах разных размеров. Даже если вы разрабатываете веб-сайт или приложение, которое будет адаптивным или адаптивным, вам все равно необходимо убедиться, что сайт или приложение будут работать на различных экранах. Несмотря на то, что вы можете протестировать сайт на нескольких устройствах, самый простой способ убедиться, что все будет правильно, - это использовать Window Resizer.

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

8. Очистить кэш

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

Например, если вы просто хотите, чтобы куки из определенного домена были очищены, вы можете настроить расширение для вас. Кроме того, вы можете очистить такие данные, как данные локального хранилища и данные подключаемых модулей, как данные WebSQL, что очень полезно, поскольку вы не можете автоматически или легко очистить данные WebSQL через Chrome.

Очистить кэш позволяет удалить следующее:

• Кеш приложения
• Печенье
• Загрузки
• Файловые системы
• Данные формы
• Индексированная БД
• Локальное хранилище
• Данные плагина
• Пароли
• WebSQL

9. OneTab

OneTab, возможно, является одним из лучших расширений Chrome для пользователей любого типа. Если вы похожи на многих людей, вы в конечном итоге откроете множество вкладок Chrome. Это не только может затруднить возвращение к нужной вкладке, но и наличие нескольких открытых вкладок может также начать поглощать ресурсы вашего компьютера, так как Chrome начинает использовать все больше памяти.

Это расширение позволяет отслеживать вкладки, которые вы используете и посещали, не оставляя их открытыми и не беспокоясь о закладках и возвращении. Как только вы начинаете замечать, что у вас открыто слишком много вкладок, вы можете просто щелкнуть значок OneTab и преобразовать ваши вкладки в список. Использование этого расширения также позволяет вам уйти от компьютера, не беспокоясь о сбое Chrome и о том, чтобы забрать с него все свои вкладки.

Резюме

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

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