Google Chrome в настоящее время является одним из самых популярных веб-браузеров, используемых сегодня разработчиками. Chrome DevTools может значительно улучшить ваш рабочий процесс, помогая вам разрабатывать, тестировать и отлаживать свои сайты прямо в вашем браузере. Многие из вас, вероятно, регулярно используют Chrome DevTools, но ознакомьтесь с этими дополнительными советами и трюками и Вы повысите свою работоспособность в несколько раз.

Chrome Devtools горячие клавиши и другие полезности при разработке от Google:

Что такое Google Chrome DevTools?

Инструменты разработчика Google Chrome, также известные как Chrome DevTools, – это инструменты для создания и отладки веб-сайтов, встроенные прямо в браузер. Они обеспечивают разработчикам более глубокий доступ к их веб-приложениям и браузеру. Вы можете делать все, начиная с тестирования вашего видового экрана на мобильном устройстве и заканчивая редактированием HTML / CSS на лету, используя даже для измерения производительности отдельных активов вашего сайта.

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

Вы можете улучшить свою разработку, используя chrome://flags разрешая экспериментальные функции в инструментах разработчика. Затем вы можете использовать панель настроек в инструментах разработчика для переключения отдельных экспериментов.

Для активации экспериментальных функций dev панели включите данный пункт:

Открытие Chrome DevTools

Есть несколько способов открыть Chrome DevTools.

1. Откройте меню браузера

Вы можете открыть Chrome DevTools из меню Chrome, нажмите «Дополнительные инструменты», а затем нажмите «Инструменты разработчика».

2. Открыть нажатием правой кнопки мыши

Вы также можете щелкнуть правой кнопкой мыши по любому элементу на веб-странице и нажать «Посмотреть код», который запустит Chrome DevTools.

3. Открыть с помощью клавиш быстрого доступа

Вы также можете использовать следующие сочетания клавиш:

• Windows: F12 или Ctrl + Shift + I
• Mac: Cmd + Opt + I

Ниже приведены несколько из нескольких сотен вещей, которые вы можете сделать с Chrome DevTools . Это также способствует хорошему курсу на инструменты, если вы не использовали их раньше. Примечание. Мы используем Google Canary для всех этих примеров, поскольку есть более новые функции, такие как палитры дизайна материалов и агрегированные данные временной шкалы.

Быстрое переключение файлов

Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Ctrl + P (Cmd + P), когда Chrome DevTools открыт и ищет имя.

Pretty Print {}

Знаете ли вы, что в Chrome DevTools имеется красивое форматирование как сжатых стилей, так и сжатых java script? Вы можете легко изменить форматирование вводимого кода, нажав {}, который вернет к нормальному виду на самом деле сжатый код.

Редактирование HTML-элемента

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

Изменить свойства CSS

Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, вероятно, одно из самых распространенных применений для этого инструмента. Просто выберите элемент, который вы хотите отредактировать, и под панелью стилей вы можете добавить / изменить любое свойство CSS, которое вы хотите.

Поиск в исходном коде

Вы можете быстро выполнить поиск в своем исходном коде, нажав Ctrl + Shift + F (Cmd + Opt + F).

Вы также можете выполнить поиск с помощью селекторов CSS, нажав Ctrl + F(Cmd + F

Точки остановки Javascript

При отладке Javascript иногда бывает полезно установить контрольные точки. Вы можете установить контрольные точки в Chrome DevTools, щелкнув по номеру строки, который вы хотите разбить, и нажмите Ctrl + R(Cmd + R), чтобы обновить страницу. Затем страница будет работать прямо до этой точки остановки.

Перейти к номеру строки

Вы можете автоматически перейти к строке вашего кода, нажав Ctrl + O (Cmd + O) и используя синтаксис строки. В приведенном ниже примере мы набрали:200:10 и нажали enter, чтобы перейти к строке 200 столбца 10.

Несколько курсоров

Есть ли у вас несколько строк, которые нужно добавить? Возможно, вы хотите добавить font-size в несколько классов. Вы можете легко добавить несколько курсоров, нажав Ctrl + Click(Cmd + Click) и одновременно вводя информацию на несколько строк. Это очень удобный трюк.

Изменение положения стыковки DevTools

Вы также можете изменить положение стыковки Chrome DevTools. Есть три варианта выбора: Bottom, Side и Undocked (плавающий). Для переключения между положениями док-станции вы можете нажать Ctrl + Shift + D (Cmd + Shift + D). Затем в правом верхнем углу выберите положение в котором должна находится док-станция.

Очистка файлов cookie

Вы также можете легко очистить файлы cookie с помощью Chrome DevTools. Это может быть особенно полезно при тестировании и отладке сторонних плагинов. Просто перейдите на вкладку «Ресурсы» и в разделе «Куки» вы можете щелкнуть правой кнопкой мыши и удалить все файлы cookie, хранящиеся в вашем браузере.

Режим устройства

Вы можете протестировать свой веб-сайт и мультимедийные запросы что бы убедиться что срабатывает адаптивная верстка, перейдя в режим устройства. Или, возможно, вам нужно увидеть, на каком разрешении экран как отображается страница, поэтому вы знаете, где применять медиа-запросы. Чтобы войти в режим устройства, щелкните значок маленького телефона в Chrome DevTools или вы можете нажать Ctrl + Shift + M(Cmd + Shift + M). Затем вы можете выбрать, какое устройство вы хотите эмулировать, ориентацию и даже разрешение. Вы также можете изменить дросселирование сети, чтобы увидеть, как ваш веб-сайт будет отображаться на обычном 2G-соединении.

Пользовательские цветовые палитры и набор цветов

Изменить формат цвета

Вы можете переключаться между RGBA, HSL и шестнадцатеричным форматированием, нажав Shift + Click на цветной блок.

Датчики эмуляции устройства

Приятной особенностью Chrome DevTools является то, что вы можете даже имитировать сенсорные экраны. Для этого нажмите Консоль, эмуляция и датчики.

Переключить состояние элемента

Вы когда-нибудь пытались выяснить, откуда приходит скрытый стиль, скажем: атрибут hover? В Firefox инструментарий dev позволяет увидеть это при выборе элемента, но не в Chrome DevTools. Однако в Chrome DevTools есть кое что лучше, называемое состоянием элемента переключения. Это позволяет принудительно ввести состояние элемента:

Копировать изображение как URI данные (закодированные в base64)

Вы можете сохранить любое изображение с веб-страницы в виде URI данных или, скорее, закодировать в base64. Нет необходимости использовать бесплатный онлайн-конвертер, поскольку он уже встроен в Chrome DevTools. Для этого просто нажмите на панель «Сеть», щелкните изображение, а затем щелкните его правой кнопкой мыши и выберите «Копировать изображение в качестве URL-адреса данных».

Затем вы получите изображение в следующем формате: ” URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt…”

Показать агент пользователя Shadow DOM

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

Выберите следующее происшествие (вия)

Chrome DevTools позволяет легко выбрать следующее вхождение, а затем применить изменения одновременно по всем разделам. Чтобы сделать это, просто дважды щелкните то, что вы хотите изменить, затем нажмите Ctrl + D (Cmd + D) для каждого события, которое вы хотите выбрать, а затем, когда вы введете его, одновременно измените все из них.

Workspaces – подключение локальных файлов к проекту

Очень мощная функция Chrome DevTools – это рабочие области . По умолчанию, когда вы меняете что-то в инструментах разработчика, они исчезают после обновления страницы. Это прекрасно для небольших настроек здесь и там, но рабочие области фактически позволяют вам сохранить эти изменения, сохранив их на вашем диске.

Для этого щелкните правой кнопкой мыши по папке и выберите «Добавить папку в локальную рабочую область». Затем, чтобы сделать ее постоянной, щелкните правой кнопкой мыши файл и выберите «Карта для файлового системного ресурса …».

Сетевой диафильм

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

Чтобы запустить этот кликните на панели «Временная шкала» и нажмите Ctrl + R(Cmd + R), чтобы обновить страницу. Затем вы можете щелкнуть на панели «Сводка» в панели «Агрегированные».

DOMContentLoaded

В инструментах разработчика вы можете точно увидеть время DOMContentLoaded и общее время загрузки. Чтобы запустить это кликните на панели «Сеть», нажмите «Показать обзор» и нажмите Ctrl + R(Cmd + R), чтобы обновить страницу. Синяя линия появится для DOMContentLoaded вместе с красной строкой для общего времени загрузки. Обычно все, что осталось от синей линии или касается ее, – это активы, которые блокируют DOM или называются ресурсами блокировки рендеринга.

Проверка Google AMP HTML

Использовать инструменты разработчика Firefox в Google Chrome

Знаете ли вы, что вы можете запускать Firefox Developer Tools в Google Chrome? Valence – экспериментальное дополнение от команды Firefox, которая позволяет Firefox Developer Tools отлаживать более широкий спектр браузеров. Valence требует Chrome 37.0 или выше.

Люди пользуются браузером не только для просмотра страниц на каких-либо сайтах, но и при создании новых. Режим разработчика в яндекс браузере (и любых других) позволяет пользователю получить доступ к инструментам, необходимым для веб-программирования.

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

Для чего нужен режим разработчика

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

Консоль разработчика предоставляет ряд возможностей для настройки и проверки страниц в реальном времени. Среди них:

• Просмотр HTML-код страницы.
• Наблюдение за процессом выполнения всех действий, совершающихся пользователями на конкретном вебсайте.
• Осмотр лог-файлов, где содержатся упоминания об ошибках, возникающих при работе скриптов и пр.

Сервис «инструменты разработчика» вряд ли понадобится обычным юзерам, которым не нужно тестировать, создавать и проверять страницы сайта на наличие ошибок. Зато он может понадобиться веб-мастерам, скажем, для отладки страницы, подгонки картинки под определённый размер и т.д.

Рядовому пользователю может понадобиться инструментарий разработчика, например, если ему понравился шрифт или цвет на конкретной странице, и он хочет узнать его название. Любой элемент можно просмотреть, открыв html код и css стили, использованные на данной странице. Затем можно скопировать необходимые данные (к примеру, стиль и код кнопки) и вставить на свой сайт.

Активация режима

Как включить режим разработчика? Интерфейс с инструментами включается несколькими способами. Для начала открываем Yandex browser на любой странице.

Первый способ – открыть консоль с инструментами:

1. В правом верхнем углу веб-обозревателя кликнуть по значку «настройки» (с тремя горизонтальными полосками).
2. В открывшемся списке выбираем пункт «дополнительно».
3. Далее нажимаем на «дополнительные «инструменты» («More tools»).
4. Выбираем нужный инструмент.

Второй способ для тех, кто не хочет открывать консоль с помощью мышки. Для этого можно воспользоваться горячими клавишами для активации требуемого инструмента, причём при любой раскладке клавиатуры и независимо от того, была ли нажата клавиша «Caps Lock»:

• Ctrl+U (при русской раскладке – буква «Г») – для просмотра кода страница («View page code»). Чтобы внести изменения, кликаем на кнопку «Править».
• Ctrl+Shift+J («О») – для открытия консоли Java («JavaScript console»). Инструменты открываются после нажатия на вкладку «Console».
• Ctrl+Shift+I (Ш) – чтобы выбрать инструменты разработчика («Developer tools»).

Инструменты разработчика можно открыть всего одной клавишей – «F12». Далее кликнуть по той же вкладке «Console». На системе Mac инструментарий разработчика включается нажатием Cmd» ⌘, «Option» ⌥ и «I».

Пользоваться консолью могут и разработчики расширений. Для этого нужно:

1. Открыть яндекс браузер.
2. Вставить в адресную строку ссылку browser://extensions/ (тот же способ работает и в Chrome).
3. Перейти по ней.

Вас направят сюда:

Ставим галочку сверху, где написано «Режим разработчика». После этого пользователю предоставляется выбор того, что нужно сделать с расширениями:

• Для обновления установленных в браузере расширений нажимаем на «обновить расширения».
• Если нужно протестировать его, выбираем опцию «Загрузить распакованное расширение», а затем нажимаем на нужный файл.

Чтобы включить расширения, необходимо зайти в раздел «Дополнения». Здесь вы увидите список всех расширений, которые установлены в браузеры. Некоторые из них могут быть активны, а другие – выключены. Запускать и отключать работу расширений вы можете при помощи специальных переключателей.

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

Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:

Elements

Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!

Найти нужный тег в древе не сложно, есть 2 способа. Способ первый - перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая - выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый - сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать "Просмотреть код".

Выбрав нужный тег мы без труда можем его подправить в нужный нам вид. Хочу заметить, что именно так я корректирую верстку всегда, попросту беру нужные теги и меняю им свойства в браузере, и когда я останавливаюсь на последнем понравившемся варианте, то копирую результат уже в мои html и css. Теперь поговорим о правой колонке - styles и computed. computed - финальная версия всех стилей применённых к тегу. Помните я говорил о том, что браузер по умолчанию имеет перечень свойств у тега, а мы их лишь меняет на нужные нам, так вот тут и есть этот самый перечень финальной версии, то есть вместе с изменёнными нами свойствами. Если посмотреть внимательно, то можно заменить интересную особенность, что почти все теги имеют одни и те же свойства с разными значениями, а это говорит о том, что практически весь сайт можно сверстать используя всего 1 или 2 тега, что кажется и абсурдным, но возможным:) В первой же колонке Styles указаны именно изменёнными нами стили (нашими таблицами стилей). В данной вкладке мы можем поменять влияние стилей как на данный тег работая в блоке element.style, так и изменять по id и class для всех элементов на сайте.

Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!

Console

Без неё и жизнь не мила у любого программиста:) Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку "all", то есть выводить все ошибки. По умолчанию установлен всегда "all", но зная Вас, мои ученики... :)
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!

Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click - ошибка - переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы. Забудете об этой фишке, то будете ошибку пол года искать:)

О том, что наши заметки попадают в консоль из console.log я писать не буду, Вы итак это знаете из общего курса:)

Sources и Network

Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт "Open link in new tab", и уже с новой страницы сохранить файл нажав комбинацию ctrl+s . Согласитесь, удобно же:)

Network более сложный функционал, тут перечень всех запросов и их ответов с сервером. Обратите внимание на то, что тут так же есть Filter - All, а так же Preserve log, это очень важно!

Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.

Во вкладке header у нас тип нашего запроса (файл, метод, ip и статус ответа), Response header и Request header. Request header - то, что отправляет Ваш браузер на сервер, он не только просит страницу, он так же отправляет существующие куки, предпочтительный язык страницы, разрешает ли сжатие gzip файлов, полное название и версия браузера, а так же страницу, откуда он посылает запрос. Хочу заметить, что изучая в будущем CURL на PHP Вы можете так же все эти данные отправлять! В разделе Response приходят заголовки ответа. Вспоминайте теорию работы PHP, отправляемые данные делятся на 2 блока, сначала отправляют заголовки, потом содержание, когда отправляется содержание, тогда нельзя отправлять уже заголовки. В заголовках сервер отправляет куки, если их надо изменить, кодировку страницы, версию сервера (что является уязвимостью и надо скрывать, как это сделано на сайте сайт , ya.ru , google.ru и т.д.), дату файла (с целью не загружать его повторно, если изменений не произошло с момента прошлого обращения браузером).

На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с scripts.js?v=1 на scripts.js?v=2. Как видите, мы лишь поменяли переданные GET данные, а скрипт уже практически у всех будет подгружаться новый (не 100%, но вполне приемлемо для большинство сайтов). Но после правки запятой в скрипте во время разработки не так уж и удобно бегать и менять html с подключением этого самого js файла, тут для разработчика приходит на помощь ещё одна важнейшая галочка "Disable cache", если она включена, то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Разрабатываем сайт с этой галочкой, а при загрузке новой версии скриптов всем пользователям меняем лишь версию?v=3.

Preview и Response

После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response - неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть! При работе с Ajax в Preview мы получим удобный вид JSON ответа похожего на HTML-древо в разделе Elements, что так же упростит нам разработку сайта.

Ajax и панель разработчика

Разрабатывая код с Ajax мы делаем следующее:
1) Пишем код, вешаем событие на кнопку.
2) Открываем панель разработчика, обновляем страницу.
3) Проверяем, что ошибок нет, устанавливаем Preserve log, так как в случае переадресации нам надо перехватить ошибку.
4) Кликаем на кнопку вызывающую Ajax запрос. Теперь если переадресации не было смотрим внимательно сначала в вкладку Console и убеждаемся, что произошла ошибка. Ошибка может быть любого плана, не только неправильный ответ с сервера, но и опечатка в самом коде. Если в console ошибки нет, или же она не ясна как, например, это строчка 0 или 1, то продолжаем анализировать вкладку Network.
5) Во вкладке Network убеждаемся, что запрос был отправлен на корректный URL, статус ответа 200, а не 404, анализируем сам запрос, то есть открываем вкладку Response и смотрим внимательно верный ли ответ прислал нам файл, именно тот, который мы ожидаем, или в ответе присутствует мусор в виде лишнего кода, ошибок и т.д. Если Вы понимаете какой ответ ждёте от сервера, то вы без труда можете сравнить ожидаемое с реальностью, увидеть ошибку и исправить её!

П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как "блондинки". :)
Данная статья в будущем ещё будет дорабатываться, возможно!

• Перевод

Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.

1. Быстрая смена файлов

Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.

2. Поиск в исходном коде

Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.

3. Переход к строке

После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.

Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести ":" и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя ":" как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).

4. Выборка DOM элементов с помощью консоли

Консоль инструментов разработчика поддерживает несколько полезных «магических» функций и переменных для выборки DOM:

• $() - эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ("DIV") вернет первый элемент DIV на странице.
• $$ () - эквивалентно document.querySelectorAll (). Возвращает список элементов (Примечание переводчика: а именно NodeList), которые соответствуют данному CSS селектору.
• $0 - $4 - история пяти последних элементов DOM, которые вы выбирали во вкладке Elements, где $0 будет последним.

Узнать больше функций консоли можно .

5. Использование нескольких кареток и выделений

При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.

6. Preserve Log

При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.

(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)

7. Прихорашивание минимизированных исходников

Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.

(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)

8. Режим устройства

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

9. Эмуляция датчиков устройства

Еще одной крутой особенностью режима устройства является возможность имитации датчиков мобильных устройств, таких как сенсорные экраны и акселерометры. Вы даже можете указать ваши географические координаты. Объект расположен в нижней части вкладки Elements в Emulation -> Sensors.

10. Выбор цвета

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

11. Принудительное состояние элемента

Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как:hover и:focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.

12. Отображение shadow DOM

Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.

13. Выбрать следующее вхождение

Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.

14. Изменение формата цвета

С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).

15. Редактирование локальных файлов в рабочей области

Рабочие области - мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.

Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.

UPD. Примечание переводчика:

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

Вы можете узнать больше о рабочих пространствах

Многие из нас тратят сотни и тысячи долларов на сервисы, которые помогают автоматизировать и упростить повседневную работу. Но в нашем распоряжении есть отличный бесплатный набор средств для SEO – инструменты разработчика (DevTools) в браузере Chrome. С его помощью можно проверить самые важные и фундаментальные для поисковой оптимизации аспекты любой страницы.

В Chrome DevTools есть несколько очень удобных приложений, которые пригодятся при проведении SEO-анализа. Ниже мы рассмотрим их подробнее.

Для начала откройте страницу, которую вы хотите проверить, в браузере, а затем – панель инструментов разработчика. Для этого перейдите в меню Chrome, расположенное в правом верхнем углу экрана, и выберите «Дополнительные инструменты » -> «Инструменты разработчика ».

Вы также можете использовать сочетания клавиш: Ctrl+Shift+I (для Windows) или Cmd+Opt+I (для Mac).

Ещё один вариант – кликнуть правой кнопкой мыши по странице, которую вы хотите проверить, и в появившемся меню выбрать пункт «Просмотреть код» .

Теперь можно приступить к аудиту.

1. Проверка основных элементов контента страницы

В настоящее время Google способен сканировать и индексировать JavaScript-контент, однако он не всегда делает это корректно. Поэтому необходимо проверять основные элементы содержимого страницы – тайтл, метаописание и текст. Это значит, что нужно не только анализировать HTML-код, но и проверять DOM. Таким образом вы сможете увидеть, как эта информация будет визуализирована и идентифицирована Google.

Просмотреть DOM любой страницы можно на вкладке «Elements» панели Инструментов разработчика.

Проверяйте эту вкладку, чтобы убедиться, что вся необходимая информация доступна для Google.

К примеру, в левом верхнему углу на скриншоте ниже мы видим, что отображаемый основной текст (в красной рамке) заключен в тег