DevTips: Советы веб-разработчику (1-16)

Команда браузера Google Chrome проделывает огромную работу для того, чтобы разработчикам жилось лучше. Chrome DevTools — пример замечательного инструмента, сильно упрощающего отладку вашего веб-приложения. Но подчас не весь функционал этой системы виден с первого взгляда, поэтому Umar Hansa — программист из Лондона — описывает его на своем сайте, причем в весьма удобном формате: немного текста и короткий скринкаст. А мы, в свою очередь, решили сделать эти советы более доступными русскоязычной аудитории.

1. Перенаправление порта позволит вам открывать локальные ссылки на мобильном устройстве

2. Активация псевдо-классов DOM-элемента

Если вам нужно посмотреть, как конкретный DOM-элемент ведет себя в различных состояниях ( active , focus , hover и visited ), можно активировать любое из них в Chrome DevTools. Для этого кликните правой кнопкой мыши по нужному элементу в панели «Elements», а затем выберите «Force element state». Есть и другой способ: в панели характеристик элемента в разделе «Styles» кликните на кнопку «Toggle element state» и выберите конкретное состояние.

После изменения состояния узла, рядом с его открывающим тегом в DOM-дереве появится небольшой оранжевый индикатор-кружок. В каких-то случаях он появляется и у закрывающего тега (если он не слишком далеко ушел из поля зрения).

Прим. перев.: в последних версиях разработчики браузера немного изменили контекстное меню узла в панели «Elements». Теперь состояния элемента может быть выбрано из него напрямую без промежуточного «Force element state». А оранжевый индикатор сам по себе стал кликабельным и открывает то же самое меню.

3. Повтор сетевого запроса при помощи cURL

Каждый ресурс, отображаемый в панели «Network», имеет свое собственное контекстное меню, содержащее пункт «Copy as cURL». При выборе этого пункта в буфер обмена попадет команда, полностью эмулирующая выбранный запрос через утилиту «cURL» (включая заголовки запроса). Вставьте ее в терминал, подредактируйте по необходимости и запускайте.

Прим. перев.: Чтобы повторить XHR-запрос без использования cURL, найдите его в панели «Network» и выберите пункт «Reply XHR» в его контекстном меню.

4. Запуск сохранённых блоков кода (сниппетов) на любой веб-странице

• откройте панель «Source» → «Snippets» (она в левой вкладке);
• в контекстном меню этой вкладки выберите «New»
• введите подходящее имя для своего сниппета;
• запускайте его при помощи выбора пункта «Run» в меню сниппета (или «Cmd+Enter»).

5. Отслеживание изменений файлов через DevTools

6. Простая запись действий страницы

Когда вам нужно записать действия страницы при помощи панели «Timeline», открепите окно DevTools от основного окна браузера и поместите его так, чтобы кнопка начала записи располагалась как можно ближе к анализируемому участку страницы. Как альтернатива используете горячие клавиши «Cmd+E», чтобы начать/остановить запись поведения.

Прим. перев.: такое расположение окна DevTools позволит избежать лишнего шума, возникающего пока вы ведете мышкой от кнопки записи до нужной части приложения.

7. Поиск элементов DOM-дерева при помощи CSS-селекторов

8. Копирование изображения в формате Data URI

Чтобы скопировать ссылку на изображение в формате Data URI (закодированную в base64), найдите нужную картинку в панели «Resources» и из ее контекстного меню (в правой панели) выберите «Copy Image as Data URL».

Прим. перев.: это может быть полезно если вы, например, не хотите отправлять запрос за картинкой на сервер, а использовать ее base64-копию из CSS.

9. Переход к нужной строке при открытии файла

• нажмите «Cmd+O» в открытом в панели «Sources» файле;
• введите «:5:9»
• вас перебросит к символу 9 строки 5.

10. Упрощенная навигация между правками

11. Копирование ответа на сетевой запрос

12. Работа с несколькими курсорами при редактировании скриптов

13. Блочное выделение

14. Быстрый мониторинг событий в консоли

15. Доступ к выбранному DOM-узлу в консоли

Чтобы использовать в консоли DevTools выбранный в панели «Element» DOM-узел, просто наберите $0 . Так же можно использовать конструкцию $_ , которая вернет значение самого последнего вычисленного в консоли выражения.

Прим. перев.: Панель «Sources» запоминает 5 последних выбранных элементов, доступ к которым осуществляется через $0 , $1 , $2 , $3 , $4 . Эти конструкции являются полноценными Javascript-выражениями, поэтому поддерживают любые операции, например, вызов метода $0.appendChild(. ) .