Пользователь
0,0
рейтинг
8 декабря 2012 в 01:21

Разработка → Chrome extensions для оптимизации фронт-енда

Устанавливаемые и стандартные расширения Гугл хром для оптимизации фронт-енда.

Выключалка js

Устанавливать здесь — chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
С этим собственно все просто — когда хотим поглядеть что-то без js — жмем на кнопку в правом углу и вуаля.
Следующий лот будет печеньки

chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon Все также предельно просто и переодически юзабельно. Можно посмотреть, можно исправить при необходимости
И если предыдущие 2 расширения еще более менее часто встречаются, о следующих почему-то забывают:

PageSpeed

Позволяет повысить производительность вашего приложения на фронт-енд стороне.
developers.google.com/speed/docs/insights/using_chrome — здесь можно и почитать и установить этот замечательный плагин.
В двух словах — нажимаете Ctrl+Shift+J — у вас открывается консолька. После установки там появится дополнительная иконка pagespeed. Идем на нужную страницу, и нажимаем в менюшке pagespeed кнопку Analyze. Ждем пока ваша страница перезагрузится и читаем советы как опитимизировать. Также есть замечательные советы по уменьшению размера картинок, и уже обработанные варианты можно забирать по уникальным ссылкам, прямо из консольки.


Speed Tracer

Прямо из печей гугл, еще горяченький- chrome.google.com/webstore/detail/speed-tracer-by-google/ognampngfcbddbfemdapefohjiobgbdl.
Устанавливаем его — и видим значок зеленого таймера в правом верхнем углу. Он немного запутанный, но довольно просто разобраться. Нажимаем значок, находясь на нужной странице. Открывается окно, где уже началась запись. Далее возвращаемся в старое окно и там перезагружаем страницу. Возвращаемся к окну с трекером и нажимаем красный кружок, останавливая запись. Далее в менюшке есть 3 значка лупы. +,-,<>. Нажимаем последний вариант — у нас смаштабируется вся активность. Вуаля, можно наслаждаться графиком загрузки вашей страницы — как, кто подгружался(DOM, js, отрисовка лайаута и так далее). Также справа вверху есть значок с диаграмкой — все покажет на круговой диаграмме.

Слева направо иконки соотвествующих расширений. Чтобы были узнаваемы.
Это все были устанавливаемые и нестандартные плагины — а что же у нас есть в наборе из коробки?
Открываем консольку и видим вкладку
Network

Замечательная вкладка, которая помиллисекундно расскажет вам, какой элемент страницы сколько по времени у вас грузился. Переходим на нее и обновляем страницу. Например наглядно можно увидеть, как html ждет js подгрузки, если он не асинхронно добавляется, а также отследить — кто является слабым звеном, какая картинка или скрипт грузился дольше других и так далее.
И еще один стандартный модуль напоследок:
Profiles.

Там же в консоле Гугл Хром, рядом со вкладкой Network. Этот модуль может собирать статистику по js и css — и показывать значение в процентах или в мс(нажать 2 раза на любом значении в колонке) каждой загружаемой части css или js.
@Railsmax
карма
4,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (6)

  • +1
    Еще пару расширений для фронт-енда:
    Window Resizer — изменение размера окна
    PerfectPixel — расширение для попиксельной верстки
    CSS Refresh — обновление css без перезагрузки страници
    • 0
      1) В настройках «Developer tools» (шестерёнка) можно не только размеры поставить, но и user agent поменять
  • 0
    Разные полезняшки (например, показ данных формы, просмотр cookies, js, отключение картинок, кэша, ресайз странцы, оутлайн)
    Web developer — chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
  • +2
    Для проверки адаптивной верстки, лучше пока еще не видел.
    lab.maltewassermann.com/viewport-resizer/ закладочку.
  • +1
    первые два: нажимаете на favicon сайта и… вуаля:)
    следующие 2: дубликация «Network»

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.