Вся правда о Chrome(и не только) Web Inspector. Часть 1

Это цикл статей о Web Inspector. Я постараюсь максимально подробно описать его возможности.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го.

Какой версией пользоваться?

Сейчас существует несколько версий Web Inspector:

1. Все самые новые функции получает Google Chrome Canary Build.
2. Когда все стабилизируется, их добавляют в Ночные сборки WebKit, а затем в Стабильный Google Chrome.
3. Safari в этом смысле — наиболее консервативный браузер и отстает от Google Chrome Canary Build примерно на год.

Я буду использовать Google Chrome Canary Build , и, если Web Inspector — ваш основной инструмент для отладки, то рекомендую именно эту версию (Если у вас не Windows, скачайте Chromium )

Почти все описанное здесь, тем не менее, будет работать и в других версиях Web Inspector.

Запускаем Web Inspector

Есть несколько способов открыть Web Inspector:

• Control + SHIFT + I — Открывает панель элементов.
• Control + SHIFT + J или F12 — Открывает консоль
• Control + SHIFT + C — Позволяет выбрать элемент, с помощью мыши, в самом документе и открыть его во вкладке «Elements»
• Можно нажать на любом элементе на странице правой кнопкой мыши и выбрать «Inspect Element (Просмотр кода элемента)».
• Можно открыть Web Inspector из меню: Иконка с ключом -> Инструменты -> Инструменты разработчика (Tools -> Developer tools)

Настраиваем Web Inspector

Экспериментальные функции

Все новые инструменты сначала попадают в «экспериментальные функции». Чтобы включить их, зайдите в «about:flags», найдите там опцию Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).

После этого перезапустите браузер.

Будьте осторожны с экспериментальными функциями, они могут работать не так как ожидается и вызывать ошибки.

Я буду рассматривать экспериментальные функции в одной из следующих статей.

Настройки

Давайте откроем диалог настроек нажав на эту кнопку , в правом нижнем углу и посмотрим, что там есть интересного.

Dock to the right

Закрепляет Web Inspector в правой части страницы.
На больших мониторах это позволяет лучше использовать горизонтальное пространство,
к тому же легко позволяет легко менять широту видимой
области браузера, что полезно для быстрого тестирования media queries.

По умолчанию Web Inspector снизу. Можно вытащить его в отдельное окошко, нажав на

Disable Cache

Выключает кэш. Весьма полезная опция, при отладке скриптов и стилей.
Еще можно очистить кэш из панели «Network», нажав там правой кнопкой и выбрав «Clear Browser Cache»

Disable JavaScript

Хочу отметить эту функцию здесь, потому что появилась она совсем недавно. Она… выключает Javascript.

Override device metrics

Более серьезный способ, для тестирования media queries (англ.). Позволяет задать ширину и высоту экрана, а так же маштаб шрифта. В идеале хотелось бы несколько готовых пресетов для популярных мобильных платформ.

Emulate touch events

Позволяет эмулировать touch-события. Полезно, для тестирования мобильных приложений.

Enable source maps

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

Source maps (англ.), позволяют указать браузеру способ найти исходный файл.
Идея отличная, по пока позволяет работать только с Javascript.
В будущем обещают поддержку CoffeeScript, LESS, SASS и других чудо-технологий.

Log XMLHttpRequests

Показывает в консоли XHR запросы. (англ.)

Preserve log upon navigation

Если выбрана эта опция, содержимое консоли будет сохранено даже при одновлении страницы.

Горячие клавиши

Чтобы посмотреть список горячих клавиш, откройте любую вкладку кроме консоли и нажмите там "?" (В английской раскладке).

Обратите внимание, что если окошко не влезает полностью, оно обрезается и может скрыть часть информации.

Здесь все довольно очевидно, важно знать, что практически везде работает автодополнение.

Консоль

Консоль позволяет вводить и исполнять любые Javascript команды. Если вы хотите написать выражение из нескольких строк используйте SHIFT+Enter.

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

Консоль можно использовать не только по прямому назначению.

• Она отлично помогает в качестве калькулятора, при несложных рассчетах
• В качестве игрального кубика: Math.ceil(Math.random()*6)
• В качестве быстрой записаной книжки: localStorage.setItem(0, «Номер телефона»);

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

Как и везде, в консоли есть автодополнение. Сначала, может быть не совсем очевидно, как оно работает.

• Tab работает только когда остался лишь один вариант дополнения
• Если вариантов несколько, вы можете выбрать любой и нажать вправо (или просто нажать мышкой)

Что показывать

Можно выбрать, что именно хотим видеть в консоли с помощью этой панели снизу:

Можно выбрать два элемента, если зажать CTRL. Здесь же можно выбрать фрейм, с которым мы хотим работать.

Избавляемся от сообщений об ошибках в расширениях

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

• Запускать Chrome в Incognito Mode (CTRL+SHIFT+N)
• Использовать для откладки другой профиль, без расширений. Для этого нужен другой Google account. Чтобы добавить профиль нажмите иконку с гаечным ключом -> Настройки -> добавить пользователя (settings add user).

Изменяем размер шрифта

Почему-то CTRL+Scroll в консоли не работает.

Зато можно использовать CTRL + для увеличения шрифта, CTRL — для уменьшения и
CTRL + 0 для изначального масштаба.

Команды консоли

У консоли есть свои собственные команды, Так как Web Inspector написан на JS, список всех команд можно посмотреть в самой консоли, введя console._commandLineAPI. Давайте рассмотрим самые интересные из них.

Очищаем консоль

Есть несколько способов очистить консоль:

• Командой clear();
• CTRL+L (Эта комбинация в Chrome переводит фокус на адресную строку. Если она не работает в консоли, нажмите в любое место документа, а потом кликните на консоль).
• Нажать правой кнопкой и выбрать «Clear console»

Взаимодействие со вкладкой «Elements»

В переменных $0-$4 — Последние пять выбранных элементов, в порядке выбора.
Любой DOM элемент, выведенный в консоли, можно открыть во вкладке «Elements», нажав правой кнопкой мышки.

Выбираем элементы

Консоль поддерживает несколько дополнительных способов выбрать элементы, без каких либо дополнительных библиотек.

• $("ID") — Выбор элемента по идентификатору.
• $$("selector") — Выбор элемента по CSS селектору.
• $x("selector") — Выбор элемента по XPath-селектору..

Обратите внимание, что есла на сайте используется какая-то Javascript-библиотка, то эти функции
могут быть перезаписаны. Например на Хабре $ это jQuery.

Изучаем объекты

Есть несколько функция, ползволяющих узнать больше, об элементе. В основном они дублируют функционал панелей из вкладки «Elements».

• inspect() — Открывает DOM-Дерево и находит там элемент
• dirxml() — Выводит элемент в виде xml
• dir() — Показывает список свойств элемента
• keys() — Выбирает все ключи из списка dir()
• values() — Выбирает все значения из списка dir()

Следим за событиями

Можно следить за всем, что происходит с элементом, с помощью функции monitorEvents( element )

С помощью второго аргумента можно выбрать тип событий, за которыми вы ходите следить:

• "mouse" — для mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel
• "key" — для keydown, keyup, keypress, textInput
• "touch" — для touchstart, touchmove, touchend, touchcancel (Если включены в настройках)
• "control" — для resize, scroll, zoom, focus, blur, select, change, submit, reset
• Если не указывать второй аргумент, то все вышеперечисленные события плюс load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll, search, devicemotion, deviceorientation.

Остановить это безумие можно с помощью функции unmonitorEvents( element )

Копируем информацию в буфер обмена

Результат любого выражения можно сразу скопировать в буфер обмена, используя функцию Copy(). Приятно и может сэкономить немного времени.

Вкладка «Elements»

Эта панель содержит в себе все DOM-Дерево нашей страницы, обновляющееся в режиме реального времени.

Каждый раз, когда на странице изменяются элементы, они обновляются в дереве и наоборот.

Если вы хотите выбрать какой-то элемент из документа, нажмите на кнопку с лупой внизу или CTRL+SHIFT+C и выберите любой элемент.
При наведении мышкой будут показан CSS пусть до элемента, его размеры и отступы.

Путь до элемента

В самом низу панели можно увидеть путь до файла. Можно кликнуть на выбрать любой родительский элемент.

Работа с деревом

Передвигаться по дереву можно стрелками (если вы в другой секции, то можно вернуть фокус, с помощью CTRL+ вверх/вниз).

Редактирование

Чтобы изменить любой атрибут или значение, дважды кликните на элемент, или нажмите Enter
и доберитесь до него с помощью кнопки Tab (SHIFT+Tab).
Можно так же изменить весь HTML-код элемента, нажав F2.

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

Drag&Drop

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

Контекстное меню

Нажав на элемент правой кнопки мышки, можно скопировать его HTML-код, или XPath-путь и установить DOM-брейкпоинты.

Подробная информация

Выделив элемент, можно посмотреть информацию про него, в панели справа.

Computed style

Список CSS-стилей, примененных к элементу. Если поставить галку в «Show inherited», то отобразятся все стили, включая браузерные.

Styles

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

Можно выключить любое выражение, убрав галку из чекбокса слева.

Раздел element.style показывает стили прописанные в style атрибуте в HTML коде документа,
а раздел Matched CSS Rules показывают все селекторы, заданные с CSS файлах и совпавшие с выбранным элементом.

Перемещаться между свойствами и значениями можно можно с помощью Клавиши Tab (SHIFT+Tab), чтобы вернуться назад).

Добавление правил и выражений

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

Можно добавить новое выражение в уже имеющийся селектор, нажав на закрывающую фигурную скобку правила (или начав изменять последнее выражение нажать Tab).

Псевдоклассы

Нажав на эту кнопку , и проставив галки, вы сможете задать пэлементу псевдоклассы :active, :focus, :hover и :visited.

Отображение цветов

Нажав на кнопку с шестеренкой ,As authored — покажет цвета в том формате котором они были заданы.

Изменение числовых значений

Числовые значения можно изменять с помощью клавиатуры.

• Alt + Вверх/Вниз изменяет значение на 0.1
• Вверх/Вниз изменяет значение на 1
• SHIFT + Вверх/Вниз или Page Down/Page Up изменяет значение на 10
• SHIFT + Page Down/Page Up изменяет значение на 100.

Если нажать на квадратик рядом с цветом, можно выбрать цвет из удобного диалога. Нажав на числовое значение, можно ввести цвет вручную.

Metrics

Здесь можно увидеть размеры и отступы элемента (А если для элемента задан position, то и положение).

Вы можете изменить здесь любое значение, нажав на него дважды.

Интересно, что все размеры показываются в пикселях, даже если вы пропишете размеры в EM, они будут переведены в пиксели автоматически.

Properties

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

DOM-Breakpoints

Здесь список установленных Dom-Брейкпоинтов.Можно быстро найти элемент, кликнув на название, выключить брейкпоинт, убрав галку, удалить брейкпоинт, нажав на него правой кнопкой мыши.

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

Сохранение изменений

Web Inspector позволяет нам легко модифицировать CSS код. К сожалению, простого способа, позволяющегобыстро сохранить изменения не существует. Есть несколько вариантов

• Просто скопировать все изменения в вашу IDE.
• Изменения в CSS (кроме заново созданных правил) сохраняются в соотвествующих файлах. Нажав на «имя файла: номер строки» справа от селектора
• Есть расширение от ELV1S: ChromeDevtools Autosave (англ.), оно работает только локально и требует для установки сервера (англ.) на Node JS (англ.) зато позволяет сохранять изменения в JS и CSS автоматически.

Что дальше?

Немного полезных ссылок

Ссылки в случайном порядке, к сожалению, все на английском.

• Peter Beverloo (англ.) — Подробно и регулярно о новых функциях Chromium
• Chrome Developer Tools (англ.)
• About Safari Developer Tools (англ.)
• — Modern Web Development (англ.) Хорошая иочень подробная статья о Web Inspector, к сожалению, на Английском.
• monitorEvents (англ.) — Немного о monitorEvents
• Youtube канал от разработчиков Chrome (англ.)
• Исходные коды (англ.)
• Багтрекер (англ.)
• Paul Irish (англ.)Пол АЙриш, занимается продвижением Chrome Dev Tools, есть хорошие статьи

В следующий серии

Это только первая часть статьи. Оставайтесь с нами и вы узнаете

• Что делают оставшиеся 5 панелей.
• Отладка Javascript, debugger; и команды console
• Как получить Base64 код картинки штатными средствами Web Inspector.
• Кто такие «Show shadow DOM», «Snippets support» и «Show styles panel»
• Как превратить минифицированную версию срипта в прекрасную.
• Как отлаживать наш код с помощью JS, DOM, XHR и Event Listener брейкпоинтов.
• Как правильно и максимально эффективно использовать консоль из наших скриптов?
• Как отлаживать приложения для Ipad/Iphone/Androind смартфона с помощью Web Inspector?
• Как подключить консоль для моего любимого Coffee Script? А показывать в консоли ошибки PHP?
• Что за новый plugin-API для Web Inspector, и что с ним делать.
• Как посмотреть HTTP запросы.
• Как получилось, что dev-tools не переведены на русский.

Я часто использую Web Inspector в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.

До следующей серии!

Автор: z6Dabrata