Едва ли не каждому фронтенд-разработчику приходилось работать в браузере Google Chrome — просматривать сетевые запросы, анализировать производительность веб-страницы, делать отладку и прочее. Фронтенд-инженер из Alibaba поделилась приемами для быстрой и эффективной работы с этим инструментом в блоге на Medium.
Когда кода для проверки, объектов или случаев слишком много, нужны уже не стандартные, а условные брейкпоинты. Они избавят от необходимости прогонять через дебаггер каждый объект, а только выборку тех, которые вызывают наибольшие подозрения.
Так процесс разработки будет идти быстрее и эффективнее.
Если нужно использовать API, например, dayjs или lodash, необязательно идти на официальный сайт библиотеки. Можно использовать его прямо в консоли браузера:
Лайфхак для тех, кому часто приходится отлаживать интерфейс с back-end разработчиками — использование этой функции может повысить эффективность стыковки:
Если вы часто меняете светлую и темную темы в консоли Chrome в зависимости от настроения и освещения, то эта комбинация придет на помощь:
Для одного и того же запроса иногда необходимо изменить входные параметры и отправить его повторно. Вот как это можно сделать быстрее:
Отличная фишка, которая помогает скопировать сложные данные в буфер обмена. Для этого нужно использовать функцию Copy, предоставляемую браузером Chrome.
В панели «Элементы» выберите элемент DOM, атрибуты которого вам необходимы (ширина, высота, положение и прочее). Затем используйте $0 для доступа к элементу в консоли.
Если нужно сделать скриншот длинной страницы, состоящей из более чем одного экрана (то есть до конца страницы нужно еще прокручивать вниз), то:
Если вам нужна только часть скриншота страницы, тогда на третьем шаге введите Capture node screenshot.
Чтобы развернуть все дочерние узлы элемента DOM одновременно, а не по одному, используйте комбинацию клавиш Alt + click на панели «элементы».
Вы выполнили различные операции над строкой и хоте узнать результат. Наиболее простой способ это сделать — использовать $.
Использование document.querySelector и document.querySelectorAll для выбора элементов текущей страницы в консоли является наиболее распространенным требованием, но оно слишком длинное. Вместо этого попробуйте использовать $ и $$:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…