меню

5 инструментов Chrome DevTools, упрощающие разработку

Chrome DevTools — лучший друг веб-разработчика. Этот набор инструментов содержит массу полезных свойств и не совсем очевидных функций, о которых не все знают.

Большинство разработчиков используют базовые функции, например исследование элементов на странице. Но Chrome DevTools скрывает куда более интересные возможности. Цель этой статьи — рассказать о некоторых из наиболее полезных малоизвестных функций и показать, как они помогают в разработке.

Ссылка на элементы HTML

Одна из самых малоизвестных функций Chrome DevTools — возможность ссылаться на элементы HTML. Это можно сделать в два простых шага.

- Откройте Chrome DevTools и перейдите к представлению Elements.

- Щелкните правой кнопкой мыши элемент, на который вы хотите сослаться, и выберите Store as global variable.

Ссылка на элементы HTMLM

Теперь у вас есть ссылка на HTML-элемент, к которому вы можете получить доступ и проверить его в консоли.

Логпоинты

Логпоинты — это способ предоставления отладочной информации в консоль без необходимости прибегать к console.log(). Эта функция позволяет очистить кодовую базу от мусора, который образуется в результате работы с console.log.

Логпоинты

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

Live expressions

Live expressions — это функция, которая показывает значение выражения по мере его изменения. Она пригодится для отслеживания проблем с затратными выражениями (например, используемыми в анимации) или теми, которые часто меняются (например, при итерации по массиву).

Все, что вам нужно сделать, — нажать на кнопку Create live expressions и указать выражение, которое вы хотите отслеживать. После этого будет автоматически показываться значение выражения по мере его изменения.

Live expressions

console.trace()

console.trace() — это утилита, которая позволяет узнать, где был сделан конкретный вызов определенной функции. Допустим, у вас есть внутренняя функция, которая используется в разных местах и вызывает проблему. Чтобы устранить эту проблему, необходимо сначала выяснить, где она вызывается.

console.trace

console.trace() предоставляет эту информацию. Достаточно просто вставить ее внутрь функции, которую нужно отследить.

console.trace

Обратите внимание: трассировка стека показывает, что вызову innerFunction предшествовал вызов outterFunction.

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

Консольные утилиты

Консольные утилиты являются неотъемлемой частью функций Chrome Dev Tools. Console Utilities API содержит набор удобных функций для выполнения распространенных задач. Более подробно о них можно прочитать здесь.

Утилиты $() и $$() заменяют document.querySelector() и document.querySelectorAll() соответственно.

Консольные утилиты

Они возвращают ожидаемый список узлов и приводят результаты к массивам, чтобы вы могли использовать map() и filter().

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


Возможно, вам будет интересно

Когда ждать Web 3.0 и его отличия от Web 2.0

О новой ступени развития интернета Web 3.0 начали говорить еще в начале двухтысячных, когда в полной мере удалось реализовать веб-пространство, которым мы пользуемся сейчас.

Конструктор сайтов, плюсы - минусы

Есть такое понятие, как конструкторы сайтов. Это такие отдельные сервисы, которые предоставляют услугу по созданию сайтов на уже готовом БЕСПЛАТНОМ Хостинге с уже готовыми шаблонами. Плюсом таких предложений является то, что создать свой сайт подобным способом сможет любой даже самый неопытный пользователь ПК и сможет в дальнейшем легко и непринужденно им управлять и, конечно, бесплатность такого проекта.

Как склеить домены. Способы склейки домена.

Некоторые из вас могли сталкиваться с довольно замороченной проблемой – необходимо склеить два домена. Склейка – это что-то вроде объединения двух или нескольких доменных имен, после чего все эти домены будут вести на один сайт. При этом у сайта появляется основной домен и его зеркала (остальные домены).

Этапы создания сайта. Рабочий процесс предполагает несколько основных этапов.

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту