Beaucoup de gens pensent qu'un navigateur n'est qu'une « fenêtre sur Internet ». Mais si vous êtes un développeur front-end, c'est aussi un outil puissant plein de secrets. Certains d'entre eux changent vraiment votre développement, vous font gagner du temps et rendent le débogage beaucoup plus efficace.
Analysons 10 fonctionnalités cachées (ou simplement sous-estimées) du navigateur que chaque développeur devrait connaître.
🧭 1. console.table() — une assiette au lieu de porridge
console.table([
{ name: "Code", level: "pro" },
{ name: "JS", level: "ninja" }
]);👉 Beau, clair, facile à trier. C'est particulièrement utile lors de la journalisation de tableaux d'objets.
🔍 2. $0, $1… dans DevTools
Dans Chrome DevTools, vous pouvez sélectionner un élément dans Elements, puis utiliser $0 pour y accéder dans la console.
$0.style.backgroundColor = 'pink';💡 Cela permet de gagner du temps, pas besoin d'écrire document.querySelector() manuellement.
📷 3. Captures de performances dans Performance
Dans l'onglet Performance vous pouvez prendre des photos d'interactions, de défilement, d'animations et voir exactement où se trouvent les blocages. C'est un outil pour les vrais perfectionnistes 🔬
🖱 4. Événement beforeunload
window.addEventListener("beforeunload", (e) => {
e.preventDefault();
e.returnValue = '';
});⚠️ N'en abusez pas : les confirmations intrusives sont ennuyeuses.
🧼 5. navigator.clipboard — copier-coller sans béquilles
await navigator.clipboard.writeText("Copied!");Plus besoin de construire execCommand et de cacher les entrées 🤯
🐾 6. :has() dans CSS — la pseudo-classe du futur
.card:has(.active) {
border: 2px solid green;
}⚠️ Ne fonctionne pas encore partout, mais est déjà pris en charge dans les dernières versions de Chrome.
🛠 7. Mode appareil : émulation de n'importe quel appareil
Dans l'onglet DevTools → Toggle Device Toolbar vous pouvez tester l'adaptatif sur des dizaines d'appareils et même ralentir le réseau pour vérifier le comportement du site sur 3G 🐢
🧪 8. Command Menu (Ctrl+Shift+P / Cmd+Shift+P)
Ouvrez DevTools et appuyez sur :
⌘ + ⇧ + P (или Ctrl + Shift + P на Windows)🔧 Des centaines de fonctionnalités se cachent ici : de la capture d'écran de la page à l'activation de la simulation de daltonisme.
📡 9. Blocage des demandes dans Network
Onglet Réseau → Clic droit → Bloquer l'URL de la demande.
🔒 Utile lors du débogage sans API externes inutiles ou lors du test de sauvegarde.
🧠 10. debugger; — point d'arrêt dans le code
if (user.debugMode) {
debugger;
}🔥 Le navigateur ouvrira lui-même DevTools et suspendra l'exécution sur cette ligne.
📲 Voulez-vous devenir un vrai ninja du front-end ?
Essayez Code - c'est une application dans laquelle vous apprenez à programmer étape par étape, sans eau, avec de la pratique et un personnage amusant.
Étudiez ici 👉 https://itcodik.com/