Мы вынуждены приостановить обучающую деятельность на территории России с 10 марта 2022 года

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

Содержание:

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

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

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

  • Функция быстрого доступа к DevTools;
  • Добавление обратных точек на вкладке «Элементы»;
  • Изменение формата цвета на вкладке «Стили элементов»;
  • Доступ к элементу Inspect;
  • MonitorEvents в консоли;
  • Функция debug;
  • Вкладка «Сеть»;
  • Добавление условных точек останова;
  • Средняя линия точки останова.Инструменты разработчика Chrome

Функция быстрого доступа к DevTools

Есть несколько способов получить доступ к DevTools. Первый — открыть меню в окне браузера, затем щелкнуть «Дополнительные инструменты», а затем «Инструменты разработчика». Более быстро это можно сделать, щелкнув правой кнопкой мыши в любом месте страницы (или щелкнуть с нажатой клавишей Command на Mac), и выбрать «Проверить», что приведет к отображению компонента, который вы щелкнули, на вкладке «Элементы» в DevTools.

Однако еще эффективнее будет, если вы нажмете сочетание клавиш: Control + Shift + I на ПК и Command + Option + I на Mac.

Добавление обратных точек на вкладке «Элементы»

Если вы отлаживаете страницу и подозреваете, что причиной является определенный элемент, первым делом можно перейти на вкладку «Источники». Но также возможно создать точку останова в обратном порядке, выбрав компонент, а не строку кода. Это может быть особенно полезно, если элемент исчезает или появляется, когда вы этого не ожидаете, а ваш код изменяет несколько частей DOM, из-за чего трудно понять, где именно что-то идет не так. Точка останова позволяет напрямую добраться до источника проблемы.

Чтобы ее создать, используйте инспектор элементов (значок стрелки в верхнем левом углу DevTools), чтобы щелкнуть или проверить часть страницы. После этого нажмите правой кнопкой мыши выделенную строку кода и выберите «Разрыв на…». Вы увидите три варианта.

Модификации поддерева активируются при удалении или добавлении дочернего элемента выбранного элемента или содержимого. Трансформации атрибутов подготавливаются к работе при изменении качества или значения.

Изменение формата цвета на вкладке «Стили элементов»

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

Если вы хотите использовать цвет из существующей гаммы страницы, Chrome упрощает это. Просто щелкните стрелки слева от цветовой палитры и используйте «Цвета страницы». Наконец, если вы хотите видеть другие форматы, например, переключаясь между шестнадцатеричным и RGBA, можно сделать это, удерживая нажатой клавишу «Shift» на цветном квадрате.

Доступ к элементу Inspect

Для того, чтобы выбрать функцию на вкладке консоли, и избежать путаницы с document.getElementByID, используйте инспектор атрибутов на вкладке «Элементы». Выбрав узел, перейдите на страницу «Консоль» и используйте временное звено $0. Вы также можете выбрать материнский компонент с помощью $1.

MonitorEvents в консоли

Для отслеживания событий на одном узле или элементе вы можете использовать консоль. Функция monitorEvents () принимает HTML-идентификатор, а также может подстраиваться под определенные типы событий.

Например, для отслеживания того, что происходит с телом документа, используйте monitorEvents (document.body). Чтобы проследить за щелчками по тексту документа, консоль регистрирует объект события. Таким образом, вы можете увидеть его свойства. Выбрав элемент с помощью инспектора атрибутов, можно объединить это с последним приемом, а затем набрать monitorEvents ($ 0).

Функция debug

Если вы хотите отладить определенный функционал, это можно сделать в самой консоли, что позволит сэкономить время. Чтобы не выслеживать панель «Источники», используйте функцию debug (), передав имя выбранной функции в качестве аргумента, например: debug (myFunctionName). Чтобы удалить точку останова, используйте undebug.

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

Вкладка «Сеть»

Чтобы увидеть инициаторов и зависимости конкретного запроса, используйте вкладку «Сеть». Там нажмите на запрос в таблице и удерживайте Shift; инициаторы выделяются зеленым цветом, а зависимости — красным.

Добавление условных точек останова

Можно создавать условные точки останова, которые срабатывают только при выполнении определенного условия. Для этого создайте ее, щелкнув номер строки, которую вы хотите прервать, на панели «Источники». Затем нажмите правой кнопкой мыши точку останова и выберите «Изменить». Напишите условие в появившемся поле, например myVar == true; она сработает только при выполнении этого условия.

Средняя линия точки останова

Иногда бывает полезно разорвать определенную часть линии, а не саму линию. Это может сэкономить время, которое было бы потрачено на переход к каждой детали кода в этой строке или, что более важно, на прерывание однострочных функций обратного вызова, таких как doSomething в следующей функции: setTimeout (() => {doSomething ( а, б);}, 1000).

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

Хотите улучшить навыки программирования? Регистрируйтесь на курсы от DevEducation.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!