Майже кожному фронтенд-розробнику доводилося працювати у браузері Google Chrome — переглядати мережеві запити, аналізувати продуктивність вебсторінки, робити відладку тощо. Фронтенд-інженер з Alibaba поділилася прийомами для швидкої та ефективної роботи з цим інструментом у блозі на Medium.
Коли коду для перевірки об’єктів або випадків занадто багато, потрібні вже не стандартні, а умовні брейкпоінти. Вони позбавлять необхідності проганяти через дебаггер кожен об’єкт, а лише вибірку тих, які викликають найбільші підозри.
Так процес розробки йтиме швидше та ефективніше.
Якщо потрібно використовувати API, наприклад dayjs або lodash, необов’язково йти на офіційний сайт бібліотеки. Можна використовувати його прямо в консолі браузера:
Лайфхак для тих, кому часто доводиться налагоджувати інтерфейс із back-end розробниками — використання цієї функції може підвищити ефективність стикування:
Якщо ви часто змінюєте темну і темну теми в консолі Chrome залежно від настрою та освітлення, то ця комбінація прийде на допомогу:
Для одного і того самого запиту іноді необхідно змінити вхідні параметри та відправити його повторно. Ось як це можна зробити швидше:
Відмінна фішка, яка допомагає скопіювати складні дані у буфер обміну. Для цього потрібно використовувати функцію Copy, яку надає браузер Chrome.
У панелі «Елементи» виберіть елемент DOM, атрибути якого вам необхідні (ширина, висота, положення та інше). Потім використовуйте $0 для доступу до елемента консолі.
Якщо потрібно зробити скриншот довгої сторінки, що складається з більш ніж одного екрана (тобто до кінця сторінки ще потрібно прокручувати вниз), то:
Якщо вам потрібна лише частина скриншота сторінки, на третьому кроці введіть Capture node screenshot.
Щоб розгорнути всі дочірні вузли елемента DOM одночасно, а не по одному, використовуйте комбінацію клавіш Alt + click на панелі елементів.
Ви виконали різні операції над рядком і бажаєте дізнатися результат. Найпростіший спосіб це зробити – використовувати $.
Використання document.querySelector і document.querySelectorAll для вибору елементів поточної сторінки в консолі є найпоширенішою вимогою, але вона занадто довга. Натомість спробуйте використовувати $ і $$:
32-річний розробник безпеки інформаційних систем Агентства національної безпеки Джарех Себастьян Далке отримав 22 роки в'язниці…
Українська компанія Flytech представила розвідувальний безпілотний літальний апарат ARES. Основні його переваги — недорога ціна…
MC.today разом з Асоціацією IT Ukraine і сервісом моніторингу та аналітики згадок у ЗМІ та…
Україна не буде примусово повертати чоловіків призовного віку з-за кордону. Про це повідомила у Брюсселі…
В Збройних Силах України з'явився жіночий підрозділ з БПЛА. І вже проводиться конкурсний відбір до…
GitHub анонсував Copilot Workspace, середовище розробки з використанням «агентів на базі Copilot». За задумкою, вони…