12k
All articles

Wie man Chrome DevTools öffnet: 4 schnelle Methoden mit Tastenkombinationen

Chrome DevTools lässt sich schnell per Tastenkombination, Rechtsklick-Inspektion, Chrome-Menü oder permanentem Toolbar-Schalter für Einzel-Klick-Zugriff öffnen.

OpenReplay Team
OpenReplay Team
Wie man Chrome DevTools öffnet: 4 schnelle Methoden mit Tastenkombinationen

Warum verschwenden Entwickler 11 Sekunden pro Debugging-Sitzung damit, nach den DevTools zu suchen? Dieser Leitfaden zeigt vier zuverlässige Möglichkeiten, die Entwicklertools von Chrome zu öffnen, einschließlich Tastenkombinationen und permanentem Zugriff über die Symbolleiste, der Browser-Neustarts übersteht.

Kernpunkte

  • Verwenden Sie Strg+Umschalt+I (Windows/Linux) oder Cmd+Opt+I (Mac) für sofortigen Zugriff
  • Aktivieren Sie den permanenten Zugriff auf die Symbolleiste über die Chrome-Einstellungen
  • Öffnen Sie Tools direkt in bestimmten Panels wie Elements oder Console

Methode 1: Tastenkombinationen (am schnellsten)

Primäre Tastenkombination:

  • Windows/Linux: Strg + Umschalt + I oder F12
  • Mac: ⌘ + ⌥ + I

Panel-spezifische Tastenkombinationen:

  • Elements-Panel: Strg + Umschalt + C (Windows) / ⌘ + ⌥ + C (Mac)
  • Console-Panel: Strg + Umschalt + J (Windows) / ⌘ + ⌥ + J (Mac)

Methode 2: Rechtsklick-Inspektion

  1. Klicken Sie mit der rechten Maustaste auf ein beliebiges Seitenelement
  2. Wählen Sie im Kontextmenü ""Untersuchen"" aus

Methode 3: Navigation im Chrome-Menü

  1. Klicken Sie auf ⋮ (Weitere Tools)
  2. Navigieren Sie zu Weitere Tools > Entwicklertools

Nützlich, wenn keine Tastatur verfügbar ist

Methode 4: Permanenter Zugriff über die Symbolleiste

Aktivieren Sie DevTools in der Chrome-Symbolleiste für den Zugriff mit einem Klick:

  1. Öffnen Sie ein neues Fenster
  2. Klicken Sie in der unteren rechten Ecke auf die Schaltfläche ""Bearbeiten"" (Stiftsymbol)
  3. Wählen Sie im linken Menü ""Symbolleiste"" aus
  4. Scrollen Sie nach unten und schalten Sie ""Entwicklertools"" EIN

0

FAQs

Wie kann ich die DevTools immer sichtbar halten?

Verwenden Sie Methode 4, um das Symbolleistensymbol zu aktivieren - es bleibt über alle Tabs und Fenster hinweg erhalten, bis es deaktiviert wird.

Was ist, wenn die Tastenkombinationen nicht funktionieren?

Überprüfen Sie, ob Browser-Erweiterungen die Tastenkombinationen überschreiben oder setzen Sie die Zuordnungen in chrome://settings/shortcuts zurück.

Kann ich die DevTools öffnen, ohne das Seitenlayout zu beeinflussen?

Ja - drücken Sie Strg + Umschalt + J (Windows) oder ⌘ + ⌥ + J (Mac), um die Konsole im Drawer-Modus zu öffnen.

Funktioniert die Symbolleistenmethode auch im Inkognito-Modus?

Ja - die Symbolleisteneinstellungen gelten für alle Browsing-Modi.

Fazit

Beherrschen Sie diese vier Methoden zum Aktivieren der DevTools, um Ihren Debugging-Workflow zu optimieren. Die neue Symbolleistenumschaltung (Methode 4) bietet dauerhaften Zugriff für Benutzer, die häufig damit arbeiten, während Tastenkombinationen die schnellste Option für Power-User bleiben. Für elementspezifisches Debugging sollten Sie daran denken, dass Strg/Cmd+Umschalt+C das Elements-Panel direkt öffnet.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers

We use cookies to improve your experience. By using our site, you accept cookies.