5 полезных функций в Chrome DevTools

5 полезных функций в Chrome DevTools

Прежде чем мы начнем, если вы хотите следовать этому руководству, убедитесь, что у вас в браузере открыты инструменты разработчика. Вы можете сделать это, нажав command+option+J на Mac и Control + Shift + J на windows. Без лишних слов, вот 5 потрясающих функций Chrome DevTools.

Отладчик

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

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

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

5 полезных функций в Chrome DevTools

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

5 полезных функций в Chrome DevTools

Я обычно использую оператор отладчика в любом месте, где использовал бы console.log(), но я считаю, что работать с отладчиком быстрее и проще. Вы согласны со мной?

Скрипт черного ящика

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

5 полезных функций в Chrome DevTools

Если вы решите, что больше не хотите или нуждаетесь в том, чтобы код поставщика был помещен в черный ящик, просто кликните правой кнопкой мыши файл на панели источников и выберите «Остановить черный ящик».

5 полезных функций в Chrome DevTools

Больше не нужно тратить время на просмотр кода поставщика!

Точки прерывания прослушивателя событий

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

5 полезных функций в Chrome DevTools

Как видите, мы можем выбрать прослушивание только события клика мыши или любое событие, связанное с мышью. Кроме того, мы не ограничены только событиями мыши. Мы можем захватить любое событие из любого объекта на странице. Супер полезно!

Точки прерывания DOM

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

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

5 полезных функций в Chrome DevTools

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

5 полезных функций в Chrome DevTools

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

5 полезных функций в Chrome DevTools

При срабатывании точки прерывания DevTools переходит в панель «Источники» и выделяет код, который модифицирует DOM.

Меню команд

При работе в DevTools или любой среде разработки вы должны держать руки на клавиатуре. Отводить руки от клавиатуры для манипулирования мышью неэффективно и тратит массу времени. Решение? Меню команд!

Чтобы открыть меню команд, после открытия DevTools нажмите control+shift+p на windows или command+shift+p на mac.
Давайте используем меню команд для переключения между панелями без использования мыши:

5 полезных функций в Chrome DevTools

Далее, давайте перейдем к боковому DevTools:

5 полезных функций в Chrome DevTools

Давайте сделаем скриншот, которым вы должны поделиться с коллегой.

5 полезных функций в Chrome DevTools

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

5 полезных функций в Chrome DevTools

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

И вот, у вас есть еще 5 потрясающих функций DevTools.

Ключевые моменты

Используйте оператор отладчика, чтобы остановить выполнение кода. Попробуйте устанавливать его там, где вы обычно используете console.log().

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

Используйте панель «Точка прерывания прослушивателя событий», чтобы с легкостью устанавливать и запускать точки прерывания для любого события на странице.

Используйте точки прерывания DOM, чтобы остановить выполнение при изменении элемента DOM.

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

Автор: Alex Ritzcovan

Источник webformyself.com