🧠 Hidden browser features that will help you become a front-end ninja

Many people think that a browser is just a "window to the Internet." But if you are a front-end developer, it is also a powerful toolkit full of secrets. Some of them really change your development, save hours and make debugging much more efficient.

Let's take a look at 10 hidden (or simply underestimated) browser features that every developer should know.

🧭 1. console.table() — a plate instead of porridge

console.table([
  { name: "Code", level: "pro" },
  { name: "JS", level: "ninja" }
]);

👉 Beautiful, clear, easy to sort. It is especially useful when logging arrays of objects.

🔍 2. $0, $1… in DevTools

In Chrome DevTools, you can select an element in Elements and then use $0 to refer to it in the console.

$0.style.backgroundColor = 'pink';

💡 Saves time, no need to write document.querySelector() manually.

📷 3. Performance snapshots in Performance

In the tab Performance You can take snapshots of interactions, scrolling, animations, and see exactly where the bottlenecks are. This is a tool for true perfectionists 🔬

🖱 4. Event beforeunload

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

⚠️ Don't overdo it: intrusive confirmations are annoying.

🧼 5. navigator.clipboard — copy-paste without crutches

await navigator.clipboard.writeText("Copied!");

No more need to build execCommand and hide inputs 🤯

🐾 6. :has() in CSS — the pseudo-class of the future

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

⚠️ It doesn't work everywhere yet, but it is already supported in the latest versions of Chrome.

🛠 7. Device Mode: emulation of any devices

In the tab DevTools → Toggle Device Toolbar you can test the adaptive on dozens of devices and even slow down the network to check the behavior of the site on 3G 🐢

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

Open DevTools and click:

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

🔧 Hundreds of functions are hidden here: from a screenshot of the page to the inclusion of color blindness simulation.

📡 9. Blocking requests in the Network

Tab Network → Right click → Block request URL.

🔒 Useful when debugging without unnecessary external APIs or testing fallbacks.

🧠 10. debugger; — breakpoint in the code

if (user.debugMode) {
  debugger;
}

🔥 The browser will open DevTools and pause execution on this line.

📲 Do you want to become a real front-end ninja?

Try it Code is an application in which you learn to program step by step, without water, with practice and a cheerful character.
Learn here 👉 https://itcodik.com/