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

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

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

Инструменты для разработки представляют собой специальные модули, которые создаются и используются сторонними веб-мастерами для разных задач. Изначально в 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 в настоящее время является одним из самых популярных веб-браузеров, используемых сегодня разработчиками. 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 или выше.

Из этого туториала Вы узнаете, как работать с Инструментом исследования Google Chrome.

Наверное, Вы уже знаете о FireBug, плагине для Mozilla Firefox. Один из наших видео-туториалов покажет, как работать с FireBug . Из этого туториала Вы узнаете, как работать с подобным расширением для Google Chrome.

Для того чтобы использовать Инструмент исследования Google Chrome, следуйте таким инструкциям:

В этом инструменте есть несколько доступных настроек:

Редактирование стилей CSS

Вкладка Элемент (Element) позволяет редактировать CSS в живом режиме. Это обозначает то, что Вы можете предварительно посмотреть изменения, которые Вы вносите в CSS вашего сайта, перед тем как вносить изменения напрямую на вашем сайте.

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

Исследование разметки HTML

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

В левом широком разделе, Вы увидите код HTML , используемый на вашей странице.

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

Работа с Консолью

Консоль поможет найти баги на вашей странице. Для того чтобы открыть страницу Консоли:

Используйте сочетание клавиш CRTL+Shift+J для Windows (или Cmd+Opt+J для Mac).

Или нажмите на кнопку Консоль (Console) в ранее открытом инструменте разработчика.

Когда Консоль открыта, Вы увидите ошибки, которые отображаются на вашем сайте.

Этот инструмент очень полезен, если у Вас какие-то проблемы с сайтом. Консоль отобразит все ошибки сайта и некоторые подсказки, как их устранить.

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

Для того чтобы узнать больше о консоли Google Chrome, Вы можете ознакомиться со стандартным сайтом Google Chrome .

Использование функции Эмулятора устройств Google Chrome

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

Для того чтобы получить доступ к этой функции, убедитесь, что ваш инструмент разработчика открыт. Нажмите на кнопку Перетягиваемая панель инструментов устройства (Toggle Device Toolbar )(или используйте сочетание клавиш CTRL+Shift+M ):

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

Вы можете также ознакомиться с детальным видео-туториалом ниже.

Здравствуйте, дорогие друзья!

Сегодня я хочу рассказать об уникальном инструменте для веб-разработчиков, встроенном в популярный браузер Google Chrome. Этот инструмент называется WebTools или веб-инспектор. Из-за простоты и удобства им могут пользоваться как люди, профессионально занимающиеся созданием сайтов, так и те, кто лишь немного знаком с языками HTML и CSS. Инструмент позволяет исправлять ошибки в коде сайта во время его создания, вносить изменения в готовые сайты: изменять расположение элементов, их дизайн и многое другое.

Рассмотрим инструмент WebTools подробнее.

Это можно сделать двумя способами:

Окно инструмента состоит из двух частей. По умолчанию, слева открывается вкладка Elements, в которой отображается HTML-код страницы, а справа – вкладка Styles. В ней расположен CSS-код выделенного элемента.

Сразу следует отметить, что окно WebTools можно располагать по-разному. Для этого щелкаем по значку рядом с кнопкой закрытия и выбираем нужный вариант:

• В нижней части окна браузера.
• С правой стороны. Это может быть удобно при использовании широкоформатного экрана.
• В отдельном окне. Этот вариант удобен, если вы используете , на одном мониторе можно экспериментировать с кодом, а на втором видеть результат.

Способы перемещения по коду

Возможны два таких способа.

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

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

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

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

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

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

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

Тестирование адаптивной верстки

Еще одна полезная и актуальная функция инструмента WebTools – проверка отображения страницы на различных устройствах. Для ее активизации щелкните на кнопке с изображением телефона. Теперь можно выбирать разрешения экрана, поворачивать его, изменять масштаб. Само окно инспектора при этом не изменяется.

Кодирование изображения в Base64

В статье я писал о том, что для ускорения загрузки сайта небольшие изображения можно закодировать в формате data URL и вставлять такой код непосредственно в HTML-страницу. Так вот, наш уникальный инструмент позволяет выполнить такую кодировку. Как это сделать?

Секретная фишка

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

Недостатки

Работая с рассмотренным средством редактирования кода, вы сразу заметите его недостаток – все изменения, вносимые в код, не сохраняются. После обновления страницы в браузере она примет первоначальный вид. Чтобы эти изменения сохранить, необходимо открыть соответствующие файлы в текстовом редакторе, отредактировать код и сохранить их. Хотелось бы, чтобы все корректировки, производимые в WebTools, сразу же сохранялись. Эта проблема решаема, и как это сделать, мы рассмотрим в следующем посте. Поэтому подписывайтесь на обновления блога, чтобы не пропустить новые материалы (форма для подписки справа).

А пока для наглядности предлагаю посмотреть видео:

Сегодня я познакомил вас с одним из инструментов, полезных для веб-разработки, но таких инструментов много, поэтому команда WebForMyself разработала новый курс «Инструменты Front-End разработчика» . Если вы занимаетесь созданием сайтов, то вам этот курс будет наверняка интересен и полезен. Вот ссылка на курс

Инструменты Front-End разработчика

• Перевод

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $ ? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

1. Выбор элементов DOM

Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’) . Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector() .

Команды вида $(‘tagName’) , $(‘.class’) , $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$ . Её использование выглядит как $$(‘tagName’) или $$(‘.class’) . Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’) и $$(‘.className’)  дадут доступ, соответственно, к первому и второму элементу полученного массива.

Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор

Вам приходилось ловить себя на мысли о том, что хорошо было бы править текст отлаживаемой веб-страницы прямо в браузере? Если да – значит вам понравится команда, показанная ниже.

Document.body.contentEditable=true
После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.

3. Поиск обработчиков событий, привязанных к элементу

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

GetEventListeners($(‘selector’))
В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.

Обработчики событий

Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:

GetEventListeners($(‘selector’)).eventName.listener
Эта команда выведет код функции-обработчика события. Здесь eventName – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

GetEventListeners($(‘#firstName’)).click.listener
В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName .

4. Мониторинг событий

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

• Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName .
• Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName .
• Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3",….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName .
• Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.

5. Измерение времени выполнения фрагмента кода

В консоли Chrome доступна функция вида console.time(‘labelName’) , которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’) , останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

Console.time("myTime"); //Запускает таймер с меткой myTime console.timeEnd("myTime"); //Останавливает таймер с меткой myTime //Вывод: myTime:123.00 ms
Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

Console.time("myTime"); // Запускает таймер с меткой myTime for(var i=0; i < 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Вывод значений переменных в виде таблиц

Предположим, у нас имеется такой массив объектов:

Var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]
Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

Console.table(variableName)
Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

Вывод массива объектов в виде таблицы

7. Просмотр кода элемента

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

• Команда inspect($(‘selector’)) позволяет открыть код элемента, соответствующего селектору, в панели Elements инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName . Команда inspect($$(‘a’)) откроет код четвёртой ссылки, которая присутствует в DOM.
• Команды вида $0 , $1 , $2 позволяют быстро переходить к недавно просмотренным элементам. Например, $0 откроет код самого последнего просмотренного элемента, и так далее.

8. Вывод списка свойств элемента

Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:

Dir($(‘selector’))
Она возвращает объект, содержащий свойства, связанные с заданным элементом DOM. Как и в прочих подобных случаях, содержимое этого объекта можно исследовать, просматривая его древовидную структуру.

9. Вызов последнего полученного результата

Консоль можно использовать как калькулятор, это, вероятно, знают все. Но вот то, что она имеет встроенные средства, позволяющие использовать в командах результаты предыдущих вычислений, известно немногим. С помощью конструкции $_ можно извлечь из памяти результат предыдущего выражения. Вот как это выглядит:

2+3+4 9 //- Результат суммирования - 9 $_ 9 // Выводится последний полученный результат $_ * $_ 81 // Так как последний результат 9, получаем 81 Math.sqrt($_) 9 // Квадратный корень из последнего результата, который был равен 81 $_ 9 // Снова получаем 9 – результат предыдущего вычисления

10. Очистка консоли и памяти

Если нужно очистить консоль и память, воспользуйтесь такой вот простой командой:

Clear()
После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.

11, 12, 13, 14…

Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их