🧠 Funciones ocultas del navegador que te ayudarán a convertirte en un ninja del front-end

Mucha gente piensa que un navegador es solo una «ventana a Internet». Pero si eres un desarrollador de front-end, también es una herramienta poderosa llena de secretos. Algunos de ellos realmente cambian tu desarrollo, ahorran horas y hacen que la depuración sea mucho más eficiente.

Analicemos 10 posibilidades ocultas (o simplemente subestimadas) del navegador que todo desarrollador debería conocer.

🧭 1. console.table() — una placa en lugar de gachas

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

👉 Bonito, claro, fácil de ordenar. Es especialmente útil para registrar matrices de objetos.

🔍 2. $0, $1… en DevTools

En Chrome DevTools, puedes seleccionar un elemento en Elements y luego usar $0 para referirte a él en la consola.

$0.style.backgroundColor = 'pink';

💡 Ahorra tiempo, no es necesario escribir document.querySelector() manualmente.

📷 3. Capturas de rendimiento en Performance

En la pestaña Performance puedes tomar instantáneas de interacciones, desplazamientos, animaciones y ver exactamente dónde se atascan. Es una herramienta para perfeccionistas de verdad 🔬

🖱 4. Evento beforeunload

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

⚠️ No abuses: las confirmaciones obsesivas son molestas.

🧼 5. navigator.clipboard — copiar y pegar sin muletas

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

Ya no es necesario construir execCommand y ocultar las entradas 🤯

🐾 6. :has() en CSS: la pseudoclase del futuro

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

⚠️ Todavía no funciona en todas partes, pero ya es compatible con las últimas versiones de Chrome.

🛠 7. Modo de dispositivo: emulación de cualquier dispositivo

En la pestaña DevTools → Toggle Device Toolbar puedes probar la capacidad de adaptación en decenas de dispositivos e incluso ralentizar la red para comprobar el comportamiento del sitio en 3G 🐢

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

Abre DevTools y haz clic en:

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

🔧 Aquí se esconden cientos de funciones: desde la captura de pantalla de la página hasta la activación de la simulación de daltonismo.

📡 9. Bloqueo de solicitudes en la red

Pestaña Red → Clic derecho → Bloquear URL de solicitud.

🔒 Útil para depurar sin API externas innecesarias o para probar fallbacks.

🧠 10. debugger; — punto de interrupción en el código

if (user.debugMode) {
  debugger;
}

🔥 El navegador abrirá DevTools y pausará la ejecución en esta línea.

📲 ¿Quieres convertirte en un verdadero ninja del front-end?

Prueba Kodik - es una aplicación en la que aprendes a programar paso a paso, sin agua, con práctica y un personaje divertido.
Aprende aquí 👉 https://itcodik.com/