🧠 Скрытые фичи браузера, которые помогут тебе стать фронтенд-ниндзя

Многие считают, что браузер — просто «окно в интернет». Но если ты фронтендер, это ещё и мощный инструментарий, полный секретов. Некоторые из них реально меняют твою разработку, экономят часы и делают отладку в разы эффективнее.

Разберём 10 скрытых (или просто недооценённых) возможностей браузера, которые стоит знать каждому разработчику.

🧭 1. console.table() — табличка вместо каши

console.table([
  { name: "Кодик", level: "pro" },
  { name: "JS", level: "ninja" }
]);

👉 Красиво, понятно, удобно сортировать. Особенно полезно при логировании массивов объектов.

🔍 2. $0, $1… в DevTools

В Chrome DevTools ты можешь выбрать элемент в Elements, а затем использовать $0, чтобы обратиться к нему в консоли.

$0.style.backgroundColor = 'pink';

💡 Экономит время, не надо писать document.querySelector() вручную.

📷 3. Снимки производительности в Performance

Во вкладке Performance можно делать снимки взаимодействия, скролла, анимаций и смотреть, где именно затыки. Это инструмент для настоящих перфекционистов 🔬

🖱 4. Событие beforeunload

window.addEventListener("beforeunload", (e) => {
  e.preventDefault();
  e.returnValue = '';
});

⚠️ Не злоупотребляй: навязчивые подтверждения раздражают.

🧼 5. navigator.clipboard — копипаста без костылей

await navigator.clipboard.writeText("Скопировано!");

Больше не нужно городить execCommand и прятать инпуты 🤯

🐾 6. :has() в CSS — псевдокласс будущего

.card:has(.active) {
  border: 2px solid green;
}

⚠️ Работает пока не везде, но уже поддерживается в последних версиях Chrome.

🛠 7. Device Mode: эмуляция любых устройств

Во вкладке DevTools → Toggle Device Toolbar можно тестить адаптив на десятках устройств и даже замедлить сеть, чтобы проверить поведение сайта на 3G 🐢

🧪 8. Command Menu (Ctrl+Shift+P / Cmd+Shift+P)

Открой DevTools и нажми:

⌘ + ⇧ + P (или Ctrl + Shift + P на Windows)

🔧 Здесь скрываются сотни функций: от скриншота страницы до включения симуляции цветовой слепоты.

📡 9. Блокировка запросов в Network

Вкладка Network → Правый клик → Block request URL.

🔒 Полезно при отладке без лишних внешних API или тестировании фоллбэков.

🧠 10. debugger; — точка останова в коде

if (user.debugMode) {
  debugger;
}

🔥 Браузер сам откроет DevTools и приостановит выполнение на этой строке.

📲 Хочешь стать настоящим фронтенд-ниндзя?

Попробуй Кодик — это приложение, в котором ты учишься программировать шаг за шагом, без воды, с практикой и весёлым персонажем.
Изучай тут 👉 https://itcodik.com/