вторник, 8 октября 2013 г.

5 лучших фишек Google Chrome для мега продуктивности

В этой статье хочу рассказать 5 о фишках Google Chrome которые существенно облегчают жизнь разработчиков.

 

1. Скрытые команды обновления страниц

Google Chrome славится своим агрессивным кэшированием. И если для пользователя это как правило благо, поскольку благодаря кэшированию ускоряется открытие страниц, то для разработчикам кэширование контента как правило мешает – не подгружаются только что модифицированные файлы и невозможно понять повлияли ли твои изменения на поведение приложения или нет. Видимо, чтобы облегчить жизнь разработчикам в Google Chrome в режиме разработки (при открытых инструментах разработчика) есть специальные команды для обновления страницы. Чтобы их увидеть надо навести курсор на кнопку обновления страницы нажать и удерживать курсор мыши нажатым 1-2 секунды. Затем под кнопкой появятся разнообразные команды для обновления страницы: Normal Reload, Hard Reload и Empty Cache and Hard Reload.

clip_image002

Команды – это кончено хорошо, но если вы вдруг обнаруживаете, что вызывать их приходится очень часто, то лучшим решением будет просто отключить кэширование в Chrome при открытых инструментах разработчика. Эта опция находится в настройках Developer Tools (иконка с шестеренкой в нижнем правом углу), закладка General.

clip_image004

 

2. Открытие скриптов и быстрый переход к функции в файле

Вторая супер-мега фича это открытие файлов скриптов и быстрый переход к функции в файле. Тем, кто пользуется Resharper\WebStorm\Idea будут эти фишки знакомы, а кто не пользуется, уверен, найдут их очень полезными. Чтобы открыть файл скрипта есть комбинация клавиш Ctrl+O. Она совсем не является срытой и даже напротив написана на закладке Source если у вас нет открытых скриптов (“Hit Ctrl+O to open a file” на первом скриншоте).

clip_image005

Что делает эту функцию еще более полезной – так это поиск файла по заглавным. Как видно на скриншоте ниже введя wlc в поле поиска при открытии файлов Chrome нашел по заглавным буквам WindowsLiveConnect_c.js файл.

clip_image006

Отрыв файл и нажав менее очевидную комбинацию клавиш Ctrl+Shift+O мы попадаем в окно для быстрого перехода к функции в файле (Go to member).

clip_image007

 

3. Поиск по всем файлам

Поиск вызывается комбинацией клавиш Ctrl+Shift+F и производится по содержимому загруженных файлов в веб приложение.

clip_image009

Искомый текст выделен в тексте, а найденные фрагменты очень удобно сгруппированы по файлам. Это незаменимая функция особенно при работе с большими проектами, содержащими более одного веб приложения и включающими, порой, не одну сотню файлов. В отличие от аналогичного поиска средствами IDE где поиск идет по всем файлам включенных в проект (без учета был ли файл загружен в веб приложение) поиск по файлам Google Chrome идет только по загруженным файлам.

 

4. Маскировка и смена ориентации

При веб-разработке под мобильные устройства порой бывает необходимость «притвориться» мобильным устройством. Для такой маскировки в Chrome можно поменять User Agent и установить размер окна советующий мобильному устройству (телефону или планшету). На скриншоте ниже я выбрал User Agent соответствующий iPhone c iOS 4 и задал размеры экрана. После обновления страницы Bing отобразил свою мобильную версию.

clip_image011

Обратите внимание на кнопку правее от полей ввода размеров. Она меняет местами высоту и ширину.

clip_image012

С ее помощью очень удобно эмулировать смену ориентации мобильного устройства.

 

5. Google Chrome как редактор файлов

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

Чтобы опробовать возможности встроенного редактора сделайте 2 простых шага:

1. Откройте настрой Developer Tools и перейдите на закладку Workspace.

clip_image013

2.  Нажмите кнопу Add folder и выберите папку где находятся файлы, которые вы собираетесь редактировать (браузер запросит разрешения для DevTools для работы с файлами)

Подготовительные работы закончены. Далее привычной командой Ctrl+O открываете файл, с которым хотите работать.