Как работать с Chrome DevTools горячие клавиши и другие нужные функции


Содержание материала:

Как в chrome devtools найти откуда будет вызвана функция прописанная в onclick аттрибуте? [дубликат]

На данный вопрос уже ответили:

Собственно суть вопроса в топике.

Открываю сайт доставшийся по наследству и вижу в devtools следующую картину:

При нажатии перерисовываются маршруты и метки на карте.

Вопрос Как определить в каком файле и на какой строке объявлена функция вызываемая при клике на вышеупомянутый див?

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

Как использовать Инструмент исследования Google Chrome

Октябрь 10, 2020

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

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

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

Выберите кнопку меню Chrome в верхнем углу;

Выберите Больше инструментов (More Tools) > Инструменты (Tools) > Инструменты разработчика (Developer Tools):

Нажмите правой кнопкой мышки на элемент, который Вы хотите исследовать и выберите Исследовать (Inspect):

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

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

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

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

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

Откройте ваш Инструмент разработчика Chrome, используя один из методов, описанных ранее.

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

Обратите внимание! Изменения, внесённые в инструменте разработчика, не будут сохранены. Вы можете только узнать, как такие изменения повлияют на ваш сайт. Для того чтобы сохранить изменения, внесите изменения в файлы . HTML и .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.

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

Также, ознакомьтесь с нашей коллекцией новых html5 шаблонов для сайтов.

Изучите, как отладить JavaScript с помощью Chrome DevTools

Забудьте об отладке при помощи console.log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

Поиск и исправление ошибок может быть затруднительным. Вы можете поддаться соблазну бесконтрольно использовать console.log() , чтобы заставить ваш код работать правильно. С этим покончено!

Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

Шаг 1: Воспроизводим ошибку

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

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

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5 .
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51 .

Упс. Это неверный результат. Результат должен быть равен 6 . Это и есть ошибка, которую мы собираемся исправить.

Шаг 2: Приостанавливаем выполнение кода с помощью точки останова

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

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:

Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click . Когда происходит клик по любой ноде и эта нода имеет обработчик события click , DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.

Шаг 3: Исследуем код

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

  • На панели Sources в DevTools нажмите Step into next function call.

Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

  • Теперь нажмите кнопку Step over next function call.

Это говорит DevTools выполнить функцию inputAreEmpty() , не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false , поэтому блок кода оператора if не выполняется.

Это основная идея исследования кода. Если вы посмотрите на код get-started.js , вы увидите, что ошибка, вероятно, находится где-то в функции updateLabel() . Вместо того, чтобы исследовать каждую строку кода, вы можете использовать другой тип точки останова, чтобы приостановить код ближе к месту ошибки.

Шаг 4: Устанавливаем другую точку останова

Наиболее распространены точки останова, устанавливаемые на строках кода: когда у вас есть определенная строка кода, которую вы хотите приостановить. Попробуйте прямо сейчас:

  • Посмотрите на последнюю строку кода в updateLabel() :

Слева от кода вы можете увидеть номер этой конкретной строки: 32. Нажмите на него. DevTools поместит синюю иконку поверх номера. Это означает, что на этой строке есть точка останова. DevTools теперь всегда будет приостанавливаться до неё.

  • Нажмите кнопку Resume script execution:

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

  • Посмотрите на уже выполненные строки кода в updateLabel() . DevTools выводит значения addend1 , addend2 и sum .

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

Шаг 5: Проверяем значения переменных

Другая распространенная причина ошибок: переменная или функция генерируют значения, отличные от ожидаемых. Чтобы увидеть, как значения меняются со временем, многие разработчики используют console.log() , но console.log() может утомлять и быть неэффективным по двум причинам. Во-первых, вам может потребоваться вручную отредактировать код с большим количеством вызовов console.log() . Во-вторых, вы можете не знать точно, какая переменная связана с ошибкой, поэтому вам может потребоваться залогировать множество переменных.

Watch Expressions — альтернатива от DevTools для console.log() . Используйте Watch Expressions для отслеживания значения переменных во времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression. Попробуйте прямо сейчас:

  • На панели Sources DevTools нажмите Watch. Секция раскроется.
  • Нажмите Add Expression.

Как и предполагалось, sum расценивается в качестве строки, а должна быть числом. Это причина нашей ошибки в демо.

Вторая альтернатива в DevTools для console.log() — это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:

  • Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
  • В консоли введите parseInt(addend1) + parseInt(addend2) .
  • Нажмите Enter. DevTools вычислит команду и выведет 6 — ожидаемый результат.

Шаг 6: Исправляем

Мы определили потенциальное исправление ошибки. Осталось только проверить его, отредактировав код и перезапустив демо. Вам не нужно выходить из DevTools для применения исправления. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools. Попробуйте прямо сейчас:

  • В редакторе кода на панели Sources DevTools замените var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2); . Это на одну строку выше места вашей остановки.
  • Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
  • Нажмите Deactivate breakpoints.

Кнопка окрасится синим, указывая, что она активна: DevTools игнорирует любые точки останова.

  • Нажмите Resume script execution

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

Часть этой страницы — модификации, основанные на работе, созданной и распространяемой Google , и используются в соответствии с условиями, описанными в Creative Commons 3.0 Attribution License . Эта статья была адаптирована из Get Started with Debugging JavaScript in Chrome DevTools от Kayce Basques.

10 полезных функций браузера Google Chrome, о которых вы, возможно, не знали

По данным сайта StatCounter, в 2014-ом году интернет браузер Google Chrome был самым популярным браузером и одной из самых популярных программ в мире. Он не только прост в использовании, но и достаточно быстр и безопасен.

Топ-пост этого месяца:  Subscribe To Comments – быстрая подписка на комментарии

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

В нем скрыто множество секретов и полезных функций, о которых не все знают.

Скрытые настройки, разрешения и другие хитрости Google Chrome

Вот самые интересные функции Google Chrome, которые могут вам пригодятся:

1. Голосовой поиск в Google Chrome

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

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

Стоит также отметить, что голосовой поиск не только может дать нужные результаты поиска, но и ответить на некоторые ваши вопросы, например «Какая сегодня погода в Москве?». Возможно, понадобится в функциях поиска поставить галочку «язык: русский» (найти ее можно нажав самом внизу «Настройки» — «Настройки поиска» — «Языки»).

2. Как удалить историю в Google Chrome

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

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

3. Как использовать функцию блокнота в Chrome

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

Срочную запись можно сделать вот таким способом: в адресную строку введите data:text/html, — вы увидите новую вкладку, которую можно использовать как временный блокнот. Не обязательно запоминать данную функцию — просто сделайте закладку в вашем браузере.

4. Установите приложения, которые работают без интернета

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

Такие программы можно найти в Chrome Store и запускать их при помощи Chrome App Launcher для ПК или прямо из браузера Chrome. При нестабильном Интернете вы можете использовать такие программы, как Gmail, Google Drive и Google Calendar, например.

5. Горячие клавиши для нужных вам расширений

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

Чтобы их просмотреть вставьте в адресную строку chrome://extensions и прокрутите вниз до конца – там вы заметите ссылку «Быстрые клавиши». Всплывет окно, в котором вы сможете установить горячие клавиши, которые помогут работать с нужными вами расширениями.

6. Как сохранить любую веб-страницу как PDF

Иногда нужно сохранить веб-страницу в том виде, в каком вы ее видите. Чтобы это сделать, нужен формат PDF – он не только занимает мало места, но и отлично подходит для распечатки.

Чтобы сохранить любую страницу в этом формате нажмите Ctrl + P (если пользуетесь Windows) или Cmd + P (если пользуетесь MacOS), после чего выберете в списке принтеров «Сохранить как PDF».

7. Увеличьте скорость работы браузера, освободив его память

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

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

8. Как посмотреть сохраненные пароли

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

Для этого в адресную строку нужно ввести chrome://settings/passwords и, используя строку поиска, найти необходимый аккаунт. После того, как вы нажмете на аккаунт, вы увидите кнопку «Показать».

9. Как отправить письмо из адресной строки браузера

Если вы хотите написать письмо, то, как правило, вы открываете новую вкладку в браузере, заходите в Gmail, и создаете новое сообщение. Используя Chrome этого можно избежать и сберечь драгоценное время. Введите в адресную строку mailto:[email protected], и вы заметите, как всплывет окно, в котором вы можете создать новое письмо.

10. Как убрать сайты из подсказок в поисковой строке

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

Но если вы набираете другой сайт и не хотите, чтобы предлагались другие сайты, которые вы ранее посещали, то выделите предлагаемый браузером вариант и нажмите Shift + Delete.

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

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

Установите на каждом нужном вам компьютере приложение Chrome Remote Desktop от Google. Если человек хочет разрешить использовать свой компьютер удаленно, ему нужно нажать кнопку «share» (поделиться), чтобы сгенерировать код, который поможет удаленному знаковому пользователю использовать нужный компьютер.

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

Как закрепить часто посещаемые сайты

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

Для начала откройте сайт, кликните правой кнопкой мыши на вкладку и нажмите в всплывающем меню «закрепить вкладку».

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

Зарегистрироваться под разными профилями

Если у вас несколько аккаунтов в Gmail, Google Drive или другом сервисе Google вы можете выйти из одного (рабочий, например) и зайти в другой (домашний), пользуясь браузером Chrome. Можно войти в Chrome под любым аккаунтом, и при необходимости выйти из него и зайти в другой свой аккаунт.

Посмотреть как выглядит веб-сайт на мобильном устройстве

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

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

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

В помощь веб-разработчику: полезные проекты и инструменты для работы с Chrome DevTools

Работу современного веб-разработчика сложно представить без вспомогательных инструментов. Один из самых популярных — Chrome DevTools. Этот набор инструментов помогает тестировать, отлаживать, профилировать, проверять код на соответствие тем или иным стандартам и многое другое.

Подборка содержит ссылки на множество проектов, которые будут полезны тем, кто работает с инструментами разработчика Chrome. Думаете, что чего-то не хватает? Делитесь в комментариях.

Инструменты и экосистема

Форматирование объектов

  • immutable-devtools — настраиваемое форматирование для Immutable.js.

Проверка сети

  • betwixt — анализ трафика в отдельном окне вне браузера с использованием интерфейса, похожего на вкладку Network инструментов разработчика.

Профилирование процессора

  • call-trace — позволяет записать граф вызовов и (опционально) время, потраченное на выполнение каждой функции JS-файла. Есть возможность генерации файла .cpuprofile .
  • cpuprofilify — преобразует выходные данные разных профилировщиков в формат .cpuprofile .

Временные графики, трассировка и профилирование

  • DevTools Timeline Viewer — делитесь ссылками на записи временных графиков.
  • snapline — преобразует снимки временного графика в gif.

Интеграция отладчика Chrome с >

VS Code – Debugger for Chrome

  • Sublime Web Inspector — отладка JavaScript прямо в Sublime Text.
  • WebStorm & JetBrains Chrome Extension — позволяет WebStorm отлаживать JavaScript, просматривать дерево DOM и редактировать HTML, CSS и JS на лету.

Протокол Chrome DevTools

Протокол Chrome DevTools позволяет сторонним приложениям отслеживать, профилировать и отлаживать код в Chromium, Chrome и других Blink-based браузерах.

  • DevTools Protocol API Docs — документация по протоколу.
  • ChromeDevTools/devtools-protocol — багтрекер для проблем с протоколом.
  • Remote Debug Gateway — позволяет проводить отладку сразу в нескольких браузерах.
  • DevTools Backend — standalone-реализация бекенда инструментов разработчика Chrome для отладки произвольных веб-платформ вроде приложений HbbTV на Smart TV.
  • RemoteDebug — универсальные протоколы отладки для современных браузеров.
  • ChromeDriver — официальная реализация Selenium/WebDriver для Chrome, работающая на основе протокола инструментов разработчика.
  • Chrome Protocol Proxy — обратный прокси для отладки с помощью протокола инструментов разработчика.
  • Puppeteer — Node-библиотека, предоставляющая высокоуровневый API для управления Chrome или Chromium через протокол инструментов разработчика.

10 советов по использованию Chrome DevTools для SEO-аудита

Автор: Алейда Солис (Aleyda Solis) – консультант по международному SEO, основатель агентства интернет-маркетинга Orainti.

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

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

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

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

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

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

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

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

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

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

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

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

  • просмотреть версию страницы, сохранённую в кэше Google;
  • посмотреть, показывается ли текст в результатах поиска Google;
  • использовать «Сканер Google для сайтов» в Search Console и т.д.

2. Просмотр контента, скрытого при помощи CSS

Google не учитывает текстовый контент, который включен в HTML-код страницы, но при этом скрыт для пользователя под вкладками, пунктами меню или ссылками «Нажмите, чтобы прочитать».

Один из самых распространённых способов скрыть текст – использовать свойства CSS «display:none» или «visibility:hidden». Поэтому рекомендуется проверять, нет ли на страницах сайта важной информации, которая скрыта при помощи этих средств.

Сделать это можно с помощью функции «Search» на панели инструментов разработчика. Получить доступ к ней можно с помощью сочетания клавиш: Ctrl + Shift + F (для Windows) или Cmd + Opt + F (для Mac), когда панель DevTools открыта.

Эта функция позволяет выполнить поиск не только по файлу открытой страницы, но и по всем используемым ресурсам, включая CSS и JavaScript.

Чтобы найти скрытый текст, нужно ввести в строку поиска требуемые свойства. В данном случае – «hidden» или «display:none». Так вы сможете узнать, содержатся ли они в коде страницы.

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

3. Проверка альтернативного текста изображений

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

4. Проверка конфигурации тегов

Chrome DevTools также можно использовать для проверки технической конфигурации страниц. К примеру, тегов и атрибутов. Для этого нужно ввести в строку «Search» нужные теги и проверить, как они реализованы.

С помощью инструментов разработчика можно проверить конфигурацию тегов не только в блоке , но и в заголовках HTTP. Для этого нужно перейти на вкладку «Network» панели, выбрать нужную страницу или ресурс и проверить содержимое заголовка, включая наличие link rel=canonical в файле изображения:

5. Просмотр статуса HTTP в конфигурации заголовка

При проверке конфигурации заголовков страниц и ресурсов на вкладке «Network» вы также сможете посмотреть статуc HTTP, проверить наличие редиректов, узнать их тип, найти статусы ошибок и включения других конфигураций (X-Robots-Tag, hreflang или vary: user agent).

6. Проверка оптимизации для мобильных устройств

На сегодняшний день оптимизация сайта для мобильных устройств – неотъемлемая часть работы по поисковой оптимизации. Проверить мобильную конфигурацию страницы и контента можно, используя режим эмуляции мобильных устройств в DevTools – «Device Mode». Для перехода в него нужно нажать на иконку устройства в правом верхнем углу панели или же использовать сочетание клавиш: Command+Shift+M (Mac) или Ctrl+Shift+M (Windows, Linux), когда панель открыта.

В режиме «Device» можно выбрать адаптивный видовой экран или конкретное устройство для проверки страницы. Если нужное устройство отсутствует в списке, его можно будет добавить с помощью опции «Edit».

Топ-пост этого месяца:  Админка Wordpress вход, настройка и защита от взлома

7. Проверка времени загрузки страницы

Анализируйте время загрузки страницы, эмулируя условия сети и используемое устройство. Для этого перейдите в меню кастомизации DevTools, которое находится в правом верхнем углу панели, выберите пункт «More tools», а затем – «Network Conditions».

На открывшейся панели вы найдёте поля «Caching», «Network throttling» и «User agent».

Задав нужные настройки, перезагрузите страницу и перейдите на вкладку «Network». Здесь вы увидите не только полное время загрузки страницы, но и когда была загружена исходная разметка (DOMContentLoaded). Эта информация появится внизу окна. Вы также сможете посмотреть время загрузки и размеры каждого используемого ресурса и записать эту информацию, нажав на красную кнопку в левой части панели.

Чтобы получить рекомендации по ускорению загрузки страницы, перейдите на вкладку «Audits» и нажмите на кнопку «Run». В каждой рекомендации будут указаны конкретные ресурсы, вызывающие проблемы.

Кроме того, вы можете сделать скриншоты рендеринга страницы, используя опцию «Filmstrip». Нажав на иконку камеры и перезагрузив страницу, вы сможете просмотреть её скриншоты на разных стадиях процесса загрузки. Таким способом вы сможете узнать, что видят пользователи на каждом этапе.

8. Выявление ресурсов, блокирующих визуализацию

Вы также можете использовать данные по загрузке ресурсов на вкладке «Networks», чтобы узнать, какие JS и CSS-ресурсы загружаются перед DOM и, возможно, блокируют его. Это одна из самых распространённых проблем, влияющих на скорость загрузки страницы. Просмотреть CSS или JS-ресурсы можно, нажав на соответствующий переключатель:

9. Поиск небезопасных элементов на странице во время перехода на HTTPS

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

10. Проверка AMP

DevTools также можно использовать для проверки AMP-страниц. Для этого добавьте строку «#development=1» в URL страницы, а затем откройте вкладку «Console». Здесь вы сможете посмотреть есть ли какие-либо ошибки на странице. Вы также будете видеть, в каких элементах и строках кода они были найдены.

Бонус: персонализируйте настройки DevTools

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

Ещё один совет: сокращённый код нелегко разобрать. Чтобы просмотреть полную версию кода, нажмите кнопку «<>» в центре нижней области панели.

Вместо заключения

Автор надеется, что предложенные в статье советы сделают вашу жизнь проще.

Некоторые возможности инструмента разработчика в Chrome

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

Особенности DevTools

Здесь вы фактически можете тестировать отображение сайта на различных устройствах, редактировать HTML и CSS на лету, замерять производительность отдельных участков, дебажить JavaScript.

Также для работы с отдельными фишками возможно вы захотите использовать Google Chrome Canary – эксперементальную версию Chrome. Данная версия может быть легко запущена рядом с обычным Chrome.

Для использования и эксперемента с отдельными инструментами разработчика вам понадобится в адресной строке браузера ввести

и выбрать весь необходимый инструментарий.

С полным набором возможностей вы можете ознакомится на официальном сайте.

Как открыть инструмент разработчика?

Для этого можно воспользоваться одним из вариантов:

Через меню браузера

Войдите в меню, кликнув по иконке , кликните на “More tools” и выберите “Developer Tools.”

Через нажатие правой кнопки мыши

Нажмите на любом элементе страницы правой кнопкой мыши и выберите “Inspect element”.

С помощью горячих клавиш

Нажмите сочетание клавиш в зависимости от вашей операционной среды

  • Windows: F12 or also Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Советы и приёмы для работы с инструментами разработчика.

Здесь приведены лишь некоторые возможности из множества доступных. Для некоторых из них используется Canary.

Быстрый переход по файлам.

В открытой вкладке с исходными файлами нажмите сочетание Ctrl + P (Cmd + P) и ищите необходимые файлы.

Форматирование с помощью <>

Нажав на <> вы можете изменить форматирование исходного кода и вернуться к нормальному виду.

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

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

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

Аналогично как и HTML, точно так же вы можете редактировать и CSS.

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

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

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

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

Переход по номеру строки

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

Множество курсоров

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

Изменение положения окна

Окно DevTools имеет три положения: с одной из сторон, внизу и плавающее. Вы можете переключаться между ними с помощью Ctrl + Shift + D (Cmd + Shift + D) или через специальное меню в правом верхнем углу окна.

Очистка куки

Для работы со стороними плагинами иногда бывает необходимым очистить cookies. На вкладке “Resources” вы можете найти необходимы куки и удалить их через контекстное меню.

Проверка на различных устройствах

Если у вас адаптивный дизайн, то вы можете проверить своё приложение на различных устройствах. С помощью этого режима вы сможете проверить наличие проблем с вёрсткой на мобильных устройствах или при различных размерах браузера. Для входа в этот режим нажмите на или комбинацию клавиш Ctrl + Shift + M (Cmd + Shift + M). Там вы сможете выбрать нужное устройство, ориентацию экрана и его размер.

Цветовая паллета и пипетка

Нажав в css – стилях на нужный цвет в разметке вы сразу попадёте в цветовую паллету, где для любого элемента сможете выбрать более подходящий под ваш дизайн цвет. С помощью пипетки можно быстро посмотреть цвет любого элемента на странице.

Смена формата цвета

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

Эмуляция сенсорного экрана

Классная фича DevTools помогает симулировать тачскрин и акселерометр. Для этого перейдите по пути “Console -> Emulation -> Sensors”.

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

Часто необходимо проверить скрытый стиль, например, :hover атрибут. В Firefox местная среда разработки позволяет проверить его непосредственно, когда он вызван. Но в Chrome всё иначе. Здесь есть штука под названием “toggle element state”. Она позволяет посмотреть свойства аттрибута непосредственно в панели стилей.

Сохранение изображение как Data URI (base64 кодировка)

Можно сохранить изображение со страницы как Data URI или сконвертировать в base64. При этом не нужно использовать какие-либо сторонние сервисы. Для этого перейдите во вкладку “Network”, выберите нужное изображение, кликните правой кнопкой мыши по нему и нажмите на “Copy image as Data URL”.

Просмотр User Agent Shadow DOM

Когда вы работаете с контролами типа кнопки или строки ввода, браузер автоматически добавляет скрытые атрибуты. Чтобы их увидеть нажмите F1 (?) и выберите “Show user agent DOM”. Как показано на примере, в нашем DOM – дереве появился скрытый атрибут #shadow-root div. Теперь, при необходимости можно повесить на него какие-нибудь CSS – стили.

Выбор следующего вхождения

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

Рабочее окружение

По умолчанию когда вы что-то меняте в инструменте разработчика, то при перезагрузки страницы всё пропадает. С помощью рабочего окружения можно необходимые изменения сохранить на диск. Правой кнопкой мыши нажмите на папку и в меню нажмите на “Add folder to local workspace”, далее сделайте тоже самое для нужного файла, но в меню жмите на “Map to file system resource…”.

Диафильм прогрузки

Нельзя обойти стороной классную возможность создания диафильма из состояний при прогрузке вашего сайта. Чтобы проверить как рендориться ваш сайт в течении каждого этапа его прогрузки зайдите в панель “Network”, нажмите на картинку с камерой и потом нажмите Ctrl + R (Cmd + R), чтобы перезагрузить страницу. В итоге вы получите скриншоты загрузки вашей страницы в каждый момент времени.

Время загрузки DOM

Chrome DevTools позволяют проверить скорость загрузки DOM – структуры и общую скорость загрузки страницы. Для этого идём во вкладку “Network”, кликаем на “Show Overview” и жмём Ctrl + R (Cmd + R) для перезагрузки страницы. Синяя линия показывает время загрузки DOM – структуры, а красная – общее время. Всё что слева и на синей линии – это блокеры для загрузки DOM и являются причиной медленного рендеринга страницы.

Профили для скорости сети

Для тестирования загрузки приложения по мобильной сети или в условиях лимитированной скорости Интернета есть возможность создать специальный профиль, в котором будет указана нужная скорость загрузки. Для этого переходим в нисподающее меню “Throttling” на вкладке “Network” и кликаем на “Add a custom profile…” для создания своего профиля или выбираем один из предложенных.

Панель безопасности

С её помощью можно протестировать миграцию на HTTPS и быстро исправить возможные предупреждения. Идём в “Security” панель и жмём Ctrl + R (Cmd + R). Зелёным цветом будут помечены безопасные скрипты и красным вызывающие подозрение.

Валидация Google AMP HTML

Google Accelerated Mobile Pages (AMP) – опенсорсный проект для увеличения скорости загрузки приложения на мобильном устройстве за счёт использования легковесных HTML страниц. Чтобы Google проиндексировал AMP версию ваше страницы вы должны её провалидировать. Для этого кликните на панеле “Console”, далее необходимо добавить #development=1 к AMP версии в адрессной строке браузера. Жмём Ctrl + R (Cmd + R) для перезагрузки. В случае успешной валидации мы увидим нотификашку. Дальше можно более подробно прочитать ошибки при AMP валидации.

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

Если вдруг так случилось, что вам понадобился инструмент разработчика из Firefox, то можете попробовать Valence – эксперементальный плагин от команды Firefox. Он предназначен для дебага в различных браузерах. Требуется 37 версия хрома и выше.

Например, в OSX вы с помощью следующей команды можете запустить версию Chrome для дебага

Основные горячие клавиши Google Chrome

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

Список представлен в виде таблицы, слева горячие клавиши Chrome, а справа их значение. Более 40 различных сочетаний клавиш.

Открыть домашнюю страницу.

Переключение между окнами браузера. (И вообще окнами)

Backspace или Alt+Стрелка влево

Вернутся на страницу назад.

Перейти на страницу вперед.

Открыть браузер в полноэкранном режиме. Повторное нажатие – выход из него.

Увеличение или уменьшение масштаба страницы. Ctrl+0 сделает размер страницы по умолчанию.

Нажатие Ctrl и любой клавиши от 1 до 8, это выбор соответствующей вкладки на панели вкладок.

Переход к последней вкладке.

Сброс масштаба браузера до значения по умолчанию (100%).

Быстрое заполнение адреса. Например, если ввести в адресатной строке google и нажать Ctrl+Enter, то Вы получите адрес: http://www.google.com и перейдете на него.

Открыть окно очистки истории браузера Хром.

Скрыть/открыть панель закладок.

Выделить всё на странице.

Добавить текущую страницу в закладки.

Открыть панель поиска по странице.

Открыть файл в браузере.

Открыть диспетчер закладок Хром.

Открыть историю Хром в новой вкладке.

Открыть окно загрузок. (Скачанные файлы)

Ctrl+K или Ctrl+E

Выполнить поиск в Google. (с адресатной строки)

Перемещение курсора в адресатную строку и выделение её содержимого.

Открыть новое окно браузера.

Открыть новое окно в режиме инкогнито.

Печать текущей страницы.

Обновить текущую страницу.

Сохранить текущую страницу.

Открыть новую вкладку.

Просмотр исходного кода страницы.

Закрыть текущую вкладку.

Закрыть текущее окно.

Повторное открытие последней закрытой вкладки (до 10 вкладок)

Перемещение между открытыми вкладками вправо.

Перемещение между вкладками влево.

Открыть ссылку в новой вкладке в фоновом режиме.

Ctrl+Shift+щелчок левой кнопки мыши или Shift+клик колесом мыши.

Открыть ссылку в новой вкладке и перейти на нее.

Перемещение вниз на одну страницу за раз.

Перемещение вверх на одну страницу за раз.

Перейти к началу страницы.

Перейти в конец страницы.

Ctrl+Shift+I или F12

Выход из браузера.

На этом список основных горячих клавиш Хром завершен.

13 приёмов и уловок для работы с Chrome DevTools

На сегодняшний день Google Chrome является самым популярным браузером среди разработчиков. Благодаря шестинедельному циклу разработки и внушительному спектру возможностей, данный набор инструментов стал практически незаменим. Возможности о которых вы слышали: редактирование CSS в режиме реального времени, использование консоли и отладчика. В данной статье мы поделимся с вами и другими возможностями данного инструмента.

1. Быстрое переключение между файлами

Если вы пользуетесь Sublime Text, то наверняка не можете жить без функции перехода к любому файлу. Данный подход так же доступен и в инструментах для разработчика Google. Откройте DevTools, нажмите Ctrl + P для быстрого поиска нужного файла.

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

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

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

После открытия источника файла вы можете сразу же перейти к нужной строчке, воспользовавшись сочетанием клавиш Ctrl + G, а затем введя номер нужной строки.

4. Выборка элемента в консоли

В консоли DevTools есть возможность использования специальных переменных и функций для выборки DOM элементов:

  • $() – сокращение document.querySelector(). Возвращает первый элемент по искомому CSS селектору ( таким образом $(‘div’) вернёт первый div, который встретит на странице).
  • $$() — сокращение document.querySelectorAll(). Возвращает массив элементов по CSS селектору.
  • $0 – $4 – пятёрка DOM элементов, которые были выбраны, $0 последний.

Подробнее об этих командах можно почитать тут.

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

Ещё одна убойная фишка, которую вы могли встретить в Sublime Text. При редактировании файла вы можете создать несколько кареток для параллельного редактирования нескольких строк, зажав Ctrl и кликнув в нужных местах.

6. Отмена очистки лог-сообщений

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

7. Форматирование кода <>

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

8. Эмулятор использования сенсорного устройства

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

9. Выбор цвета из образца

При работе со стилями мы можем выбрать определённый цвет не только из представленной палитры, но так же и с самой страницы.

10. Изменение состояния кнопки

В DevTools есть возможность симуляции таких CSS событий как :hover и :focus. Данную фишку можно найти в CSS редакторе.

11. Отображение теневого DOM

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

12. Выборка следующего вхождения

Если вы находитесь в режиме просмотра исходного кода, то нажав Ctrl + D, будет выделено следующего вхождение того слова, которое сейчас выделено.

13. Переключение между форматами цвета

Используя Shift + Click вы можете переключаться между различными форматами цветов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/
Перевел: Станислав Протасевич
Урок создан: 18 Апреля 2015
Просмотров: 7089
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Frontender Magazine

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

  • в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
  • оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

Базовые операции

Открытие консоли

Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

Для того, чтобы открыть вкладку Console вы можете:

  • использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
  • выбрать пункт меню View > Developer > JavaScript Console.

Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

Очистка консоли

Для очистки консоли:

  • через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
  • Введите clear() — команду из Command Line API в консоли.
  • Вызовите console.clear() (команду из Console API) из скрипта.
  • Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).

По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

Настройки консоли

Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

  • Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
  • Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.

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

Использование API консоли

Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

Вывод в консоль

Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:

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

Ошибки и предупреждения

Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

Проверки

Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

Фильтрация вывода в консоли

Вы можете быстро фильтровать сообщения в консоли по их типу (уровню) — ошибки, предупреждения и стандартный лог — выбрав один из доступных опций внизу консоли:

  • All — без фильтрации.
  • Errors — сообщения console.error() .
  • Warnings — сообщения console.warn() .
  • Logs — сообщения console.log() , console.info() и console.debug() .
  • Debug — сообщения console.timeEnd() и остальных функций консольного вывода.

Группирование вывода

Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

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

Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :

Замена строк и их форматирование

Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

Результатом будет «Саша купил 100 бочонков мёда».

Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

Сочетание клавиш Значение
Модификатор форматирования Описание
%s Форматирует значение как строку.
%d или %i Форматирует значение как целое число (decimal и integer).
%f Форматирует объект как число с плавающей точкой.
%o Форматирует значение как DOM-элемент (также как в панели Elements).
%O Форматирует значение как JavaScript-объект.
%c Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке.

В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.

Представление DOM-элементов как JavaScript-объекты

По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :

Точно также вы можете использовать модификатор вывода %0 в методе console.log() :

Стилизация вывода консоли с помощью CSS

Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

Измерение временных затрат

Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

Корреляция с панелью Timeline

Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)

Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

  • жёлтая вертикальная линия в панели Timeline.
  • Запись добавлена в список записанных событий.

Создание точек останова

Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :

Использование Command Line API

Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

  • удобные функции для выделения DOM-элементов.
  • Методы управления CPU-профайлером.
  • Псевдонимы для некоторых методов Console API.
  • Отслеживание событий.
  • Просмотр обработчиков событий объекта.

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

Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.

Выделение элементов

Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:

И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы , являющиеся дочерними по отношению к элементу :

Инспектирование DOM-элементов и объектов

Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент
. Затем последнее исполненное выражение ($_) передаётся в inspect() , чтобы открыть этот элемент в панели Elements.

Доступ к недавно вызванным DOM-элементам или объектам

Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.

Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

Отслеживание событий

Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.

Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body :

Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

Контроль за CPU-профайлером

С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

Новый профиль появляется в панели Profiles с именем Profile 1:

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

Результат в панели Profiles:

Профили CPU могут быть вложенными, например:

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

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Топ-пост этого месяца:  Импорт и работа модуля Node js FS чтение и удаление файлов и директорий, выполнение других функций
Добавить комментарий