Viele Leute denken, dass ein Browser nur ein „Fenster zum Internet“ ist. Aber wenn du ein Frontender bist, ist es auch ein mächtiges Werkzeug, voller Geheimnisse. Einige von ihnen verändern wirklich deine Entwicklung, sparen Stunden und machen das Debuggen um ein Vielfaches effektiver.
Lassen Sie uns 10 versteckte (oder einfach unterschätzte) Browserfunktionen analysieren, die jeder Entwickler kennen sollte.
🧭 1. console.table() — Schild anstelle von Brei
console.table([
{ name: "Code", level: "pro" },
{ name: "JS", level: "ninja" }
]);👉 Schön, klar, bequem zu sortieren. Besonders nützlich beim Protokollieren von Arrays von Objekten.
🔍 2. $0, $1… in DevTools
In Chrome DevTools können Sie ein Element in Elements auswählen und dann $0 verwenden, um in der Konsole darauf zuzugreifen.
$0.style.backgroundColor = 'pink';💡 Spart Zeit, keine Notwendigkeit, document.querySelector() manuell zu schreiben.
📷 3. Leistungsaufnahmen in Performance
In der Registerkarte Performance Sie können Screenshots von Interaktionen, Scrollen, Animationen machen und genau sehen, wo die Probleme liegen. Dies ist ein Werkzeug für echte Perfektionisten 🔬
🖱 4. Ereignis beforeunload
window.addEventListener("beforeunload", (e) => {
e.preventDefault();
e.returnValue = '';
});⚠️ Übertreiben Sie es nicht: aufdringliche Bestätigungen sind ärgerlich.
🧼 5. navigator.clipboard — Kopieren und Einfügen ohne Krücken
await navigator.clipboard.writeText("Copied!");Kein execCommand mehr und keine versteckten Eingaben 🤯
🐾 6. :has() in CSS — die Pseudoklasse der Zukunft
.card:has(.active) {
border: 2px solid green;
}⚠️ Funktioniert noch nicht überall, wird aber bereits in den neuesten Chrome-Versionen unterstützt.
🛠 7. Gerätemodus: Emulation beliebiger Geräte
In der Registerkarte DevTools → Toggle Device Toolbar Sie können die Anpassungsfähigkeit auf Dutzenden von Geräten testen und sogar das Netzwerk verlangsamen, um das Verhalten der Website bei 3G zu überprüfen 🐢
🧪 8. Command Menu (Ctrl+Shift+P / Cmd+Shift+P)
Öffne DevTools und klicke auf:
⌘ + ⇧ + P (или Ctrl + Shift + P на Windows)🔧 Hier gibt es Hunderte von Funktionen: vom Screenshot der Seite bis zur Simulation von Farbenblindheit.
📡 9. Blockieren von Anfragen im Netzwerk
Registerkarte Netzwerk → Rechtsklick → Blockanforderungs-URL.
🔒 Nützlich beim Debuggen ohne zusätzliche externe APIs oder beim Testen von Fallbacks.
🧠 10. debugger; — Haltepunkt im Code
if (user.debugMode) {
debugger;
}🔥 Der Browser öffnet DevTools automatisch und hält an dieser Zeile an.
📲 Möchten Sie ein echter Frontend-Ninja werden?
Versuch es Kodik - ist eine App, mit der du Schritt für Schritt, ohne Wasser, mit Übung und einem lustigen Charakter das Programmieren lernst.
Hier mehr erfahren 👉 https://itcodik.com/