Chrome: популярные расширения для разработчиков. Для разработчиков гугл хром
популярные расширения для разработчиков / Хабр
Рекомендуемые расширения инструментов разработчика Chrome для бОльшего удовольствия от процесса отладки и разработки.| Это расширение добавляет инструменты для поиска проблем в производительности, визуализации и отладки приложения. |
| DevTools Terminal — расширение инструментов разработчика Chrome, добавляющее возможности терминала вашему браузеру. |
| Ember Inspector — расширение инструментов разработчика Chrome, которое упрощает понимание и отладку приложений на Ember.js. |
| Добавляет вкладку в инструменты разработчика Chrome, на которой, в режиме реального времени, отображаются представления, модели, коллекции и маршруты. |
| Marionette Inspector предлагает инструменты для визуализации компонентов, поиска данных, а также изучения активности в режиме реального времени. |
| React Developer Tools является расширением инструментов разработчика Chrome для работы с открытой JavaScript библиотеки React.js |
| Добавляет в инспектор поддержку Thorax, библиотеки основанной на Backbone и Handlebars, для создания крупных веб приложений. |
| Расширяет инструменты разработчика добавляя инструменты для Grunt! Полноценный графический интерфейс для Grunt. Поддержка фоновых задач, таких как «слежение». Позволяет запускать задачи для нескольких проектов в одном окне. |
| Перехватывает и перенаправляет ресурсы с любого домена на любые ресурсы расположенные локально или на удаленном сервере. |
| Расширение для отладки Knockoutjs. Добавляет боковую панель на вкладку Elements инструментов разработчика с соответствующим knockout описанием выбранного элемента. |
| Если вы работаете с Batman.js, то это расширение станет для вас бесценным инструментом. Оно содержит множество инструментов, полезных для разработки Batman.js прямо в браузере. |
| В отличие от других аналогичных инструментов, LiveStyle не изменяет CSS файл в браузере (или файловой системе), чтобы отобразить изменения, он выполняет структурный анализ в процессе набора и карту изменений от одного источника CSS к другому. |
| SnappySnippet — расширение инструментов разработчика позволяющее получить CSS и HTML выбранной ветки DOM (последнего проинспектированного элемента). Всего в один клик вы можете перенести выбранный код в CodePen, jsFiddle или JS Bin. |
| Дополнительная панель в инструментах разработчика Chrome, позволяющая изучить rAppid:js приложение. |
| RailsPanel — Chrome расширение для разработки Rails приложений, которое будет обрабатывать лог файл. Получите доступ ко всей информации о запросах вашего Rails приложения прямо в консоли. |
| Расширение инструментов разработчика Google Chrome для отладки Sencha приложений. |
| Новая вкладка инспектора селекторов для удобства проверки ваших jQuery селекторов, и просмотра результатов на любом сайте. Дополнение разработано, чтобы помочь вам понять даже самые сложные селекторы. |
| Расширение браузера, доступное для Chrome и Firefox, которое позволит оценить производительность ваших страниц и получить рекомендации по их улучшению. |
| Django Debug Panel для инструментов разработчика WebKit. Показало хорошую работу с фоновыми AJAX запросами и не HTML запросами. Замечательно подходит для одностраничных приложений и других, использующих AJAX, веб приложений. |
habr.com
10 лучших расширений Google Chrome для веб-разработчиков / Полезное / FREELANCE.TODAY
Автор: Елизавета Гуменюк (liza1510) Рейтинг топика: 0 Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!
Веб-браузер — мост, который соединяет людей с Интернетом. Как и интернет, браузеры также изменили свою форму за последние несколько лет. От простого использования для доступа во всемирную паутину до полноценных экосистем, с их собственным набором программных расширений и дополнительных возможностей, сегодняшние браузеры стали более мощными, чем прошлогодние операционные системы.
Браузеры важны не только для пользователей, но и для веб-разработчиков также. Они служат главной испытательной площадкой для программистов, где они могут работать, компилировать и изменять веб-страницы, прежде чем сделать их живыми. Когда дело доходит до веб-браузеров — Google Chrome явно лидирует. Это — полнофункциональный инструмент со всей экосистемой плагинов и мини-приложений, которые расширяют его возможности и позволяют пользователям настроить его, как они того хотят.
Магазин приложений Google Chrome является домом для тысяч плагинов и мини-приложений. Чтобы упростить вашу жизнь, мы проконсультировались с лучшими компаниями веб-разработки и подготовили список из 10 ценных плагинов Google Chrome для веб-разработчиков.
1. WhatFont
В Интернете существуют миллионы шрифтов. Их распознавание может озадачить даже самых продвинутых дизайнеров, не говоря уже о веб-разработчиках. Приложение WhatFont решит эту проблему эффективным способом. Все, что вам нужно сделать, это навести курсор мышки на текст и тут же появится название шрифта.
2. Ruler
Сколько раз вам приходится прибегать к помощи таких приложений, как Photoshop, чтобы управлять элементами на вашей странице? Довольно много, верно? С данным приложением, этот запутанный подход становится пережитком прошлого. Получите идеальное пиксельное размещение всех ваших веб-элементов, используя перетаскиваемые вертикальные и горизонтальные линейки, дайте им собственные цвета, перемещайте их попиксельно или широкими ходами, пользуясь клавиатурой и мышью.
3. EyeDropper
Так же, как и шрифты, найти точные цвета на веб-страницах является невероятно трудной задачей. Сложный способ предполагает снятие скриншотов и вычисление с помощью фотошопа шестнадцатеричного кода цвета. EyeDropper привносит эту функциональность в браузер. Все, что вам нужно сделать, это нажать на виджет, чтобы выбрать инструмент и затем выбрать цвет, который вы хотите найти.
4. Stylebot
Stylebot – это мечта каждого веб-разработчика, которая становится реальностью. Он позволяет быстро манипулировать всеми визуальными элементами веб-сайта, используя пользовательский CSS. Почти любой элемент — размер шрифта, края, цвет, видимость и т.д. — может быть выбран и изменен согласно желанию разработчика. Stylebot — отличный инструмент для отладки дизайна вашего сайта, предлагающий большую помощь начинающим и профессиональным веб-разработчикам.
5. Resolution Test
Одной из наиболее сложных задач разработки является создание веб-страниц, которые работают плавно на экранах и в разрешениях различных размеров. Чтобы удостовериться в этом, необходимо провести тщательное тестирование.
Resolution Test позволяет пользователям проверить веб-страницу на разных разрешениях и размерах экрана. Расширение также позволит веб-разработчикам определять пользовательские разрешения.
Необходимый для всех веб-разработчиков, Speed Tracer помогает выявлять и устранять проблемы, связанные с производительностью веб-сайта и приложений. Speed Tracer распознает проблемы, вызванные в процессе выполнения JavaScript, Layout, обратных запросов XML http, перерасчета стиля CSS и многое другое.
7. Corporate Ipsum
Дизайн и текст формируют лицо сайта. Corporate Ipsum позволяет веб-разработчикам ввести фиктивный текст любой длины на веб-сайт. Эта возможность становится весьма актуальной при принятии решения, касательно макета сайта и представления рабочей модели клиенту.
8. FirebugLite for Google Chrome
Этот инструмент предоставляет многочисленные функции, такие как проверка HTML-элементов с помощью мышки и жизнеспособность свойств CSS, в то же время, обеспечивая богатое визуальное представление элементов HTML и DOM.
9. Alexa Traffic Rank
Очень важный инструмент для веб- и SEO-разработчиков, Alexa Traffic Rank включает вас в панель трафика Alexa и дает детальное представление о всех сайтах, которые вы посещаете, не прерывая просмотра.
10. Screen Capture
Анализ сайта является одной из основных задач в работе веб-разработчика. Это можно сделать легко с помощью Screen Capture — инструмента, который позволяет пользователям и разработчикам захватить весь видимый контент, присутствующий на веб-сайте, в единственной закладке, в конкретной части страницы или даже охватить ее целиком.
Для веб-разработчиков очень важно быть в состоянии понять и адаптироваться таким образом, чтобы создавать программные решения, являющиеся не только новыми, но и функциональными. Наш список расширений для Google Chrome поможет выработать эти решения значительно быстрее и гораздо эффективнее.
Источник
Chrome расширения для веб-разработчиков - Addons.Click
Google Chrome является самым популярным браузером 2017 года. По статистике его используют более половины всех интернет пользователей. Как минимум этот факт заставляет всех веб-разработчиков обращать внимание на работу своих сайтов и приложений именно в нем. К тому же хром достаточно быстро работает и имеет удобный интерфейс панели разработчиков. Но есть вещи, которых в Chrome по умолчанию нет. Эту проблему решают расширения для веб-разработчиков. О самых удобных и нужных на мой взгляд мы и поговорим сегодня.
Augury и React Developer Tools
Львиная доля динамических сайтов делается на таких javascript фреймворках, как Angular и React. То что их выпускают и используют разработчики Google и Facebook соответственно позволяет сказать, что данная тенденция продлится еще долго, а значит сайты на них будут делать еще ближайшие годы уж точно. Сами по себе фреймворки не являются сверхсложными для изучения, но при создании приложений очень часто возникают различные проблемы. Для того, чтобы найти ошибку в коде или представить визуально, как вообще устроено приложение (сайт), пригодятся Augury и React Developer Tools.
Augury добавляет в панель разработчика новую вкладку, в которых отображены дерево компонентов, дерево навигации (роутов), список модулей приложения, а также граф зависимостей компонентов. Для каждого компонента можно посмотреть состояния, созданные внутри, поменять их и в режиме реального времени посмотреть, как изменилось приложение.
Если расширение для разработчиков Angular приложений является open source проектом, то React Developer Tools — продукт компании Facebook. Сами сделали фреймворк — сами сделали расширение для работы с ним. Это крайне удобный интерфейс, помогающий видеть все states, actions, props и т.д. DOM-дерево реакт приложений визуально немного отличается от привычного стандартного, и многие атрибуты элементов просто не отображаются в стандартной панели разработчика. Расширение создает внутри нее еще одну вкладку, в которой отображает данное дерево именно в том виде, в котором его воспринимает React.
Оба расширения регулярно обновляются и поддерживают все особенности данных фреймворков. Лично я, как разработчик, использую эти приложения и ни разу об этом не пожалел.
Validity
Не самое популярное, но очень полезное расширение. Валидный код — это основа всего в веб-разработке. Каждый разработчик должен писать валидный и семантически верный код. Что это значит? Это значит, что любой код должен соответствовать определенным стандартам, разработанными Консорциумом Всемирной Паутины — World Wide Web Consortium (W3C). Знать этот стандарт наизусть, конечно, желательно, но не является приоритетной задачей для разработчиков. Для проверки сайта на валидность обычно пользуются сервисом validator.w3.org . Но куда удобнее держать всегда под рукой инструмент, который делает тоже самое. Один клик на иконку расширения проверяет сайт и выводит ошибки и предупреждения в консоль.
Responsive Viewer
Доля интернет-пользователей с мобильных устройств и планшетов стремительно растет. На сегодняшний день многие сайты имеют до 50% таких пользователей. В связи с этим одним из главных требований к сайтам является их адаптивность под различные устройства. Google Chrome по умолчанию имеет возможность проверки адаптивности сайта, но для того, чтобы переключаться между устройствами, приходится постоянно менять разрешения экрана. В данном расширение крайне удобный интерфейс. Все экраны можно видеть сразу, нужно лишь задать необходимые брейкпоинты, и оно отобразит на одной странице все их.
SEO & Website Analysis и Web Developer Checklist
Расширения выполняющие разные функции, но лично я их решил совместить в одном пункте. Какой бы вы не разрабатывали сайт, нужно чтобы по запросам в поисковых системах он был, как можно выше. Факторов ранжирования очень много, но те, что касаются кода сайта — нужно учитывать обязательно. Красивый и работающий быстро сайт не гарантирует, что разработчик учел все факторы ранжирования. Зачастую что-то элементарно забывается. В таких случаях как раз и помогают данные расширения.
Как следует из названия SEO & Website Analysis анализирует ваш сайт на соответствие требования SEO оптимизации. При клике на иконку расширения, открывается модальное окно, в котором будет отображен рейтинг по 100-бальной системе, который выстраивается на основе огромного количества данных, список которых можно увидеть в описании расширения.
Web Developer Checklist — это шикарный список того, что нужно выполнить при разработке любого сайта. В нем есть все от лучших практик в разработке и вышеупомянутого SEO до аналитики и требований к безопасности.
COPY URL
Мы уже писали про это расширение ранее, но напомнить о его пользе считаю не лишним. Лично я его использую регулярно.
P.S. Если же говорить не только о расширениях, но и в целом об инструментах разработки, то стоит в этот список включить еще одно крайне полезное приложение.
Postman — приложение для Google Chrome, позволяющее разрабатывать API интерфейс быстрее, легче и лучше. Это достаточно большое приложение (размер больше 6 МБ), которое имеет огромный функционал. Более 4 млн установок в Chrome Store говорят сами за себя.
addons.click
Школа | Хром.рф
description
Сегодня Google запустил Discover DevTools - интерактивный курс для веб-разработчиков, который поможет освоить инструменты, уже встроенные в браузер Google Chrome, на …
description
Несмотря на то, что расширения и приложения для Google Chrome технически очень похожи, пользователи ожидают от них совершенно разной работы. …
description
Разработчики могут создавать и публиковать в Chrome Web Store расширения и приложения, которые используют технологию NPAPI. Однако, такие системы как …
description
Google Chrome 22 во всю шагает по планете. Мы уже знаем, что нового принесла эта версия браузера для простых пользователей …
description
Синхронизация Google Chrome позволяет делать много замечательных вещей: переносить настройки браузера, закладки, пароли и даже сами расширения и приложения с …
description
UPD. Сроки сдвинули до 2014 года! Небольшой материал, ориентированный на разработчиков расширений и приложений для Google Chrome и касающийся скорого …
description
Небольшая полезная заметка для разработчиков расширений и приложений под Google Chrome. Уверен, что если вы активно создаете приложения, то могли …
description
Для любого активного пользователя Google Chrome знакома картина, изображенная на скриншоте ниже. Уйма расширений и приложений висят в диспетчере задач …
description
CSS фильтры это достаточно мощные и удобные инструменты, позволяющие разработчикам сайтов и приложений создавать сложные эффекты. Они позволяют преобразить любой …
description
Небольшой полезный материал для разработчиков расширений. Все мы (разработчики) знаем, что в Google Chrome есть стандартные средства для вывода чисел/текста …
my-chrome.ru
