Tutorial Hübsche Developer Tools? Das geht?!

  • Hallo Gast,

    um unseren Lesern und Nutzern das best mögliche Seitenerlebnis bieten zu können nutzen wir Google Analytics.
    Um mehr über unsere Nutzung von Google Analytics zu erfahren, kannst du in unserer Datenschutzerklärung unter dem Punkt "Datenschutzerklärung für die Nutzung von Google Analytics" mehr erfahren und, wenn gewünscht, die Nutzung von Google Analytics via Klick auf den Link "Google Analytics deaktivieren" unterbinden.

    Wir verwenden für Google Analytics ein Opt-In Verfahren.
    Solltest du die Nutzung Cookies nicht aktzeptieren, wirst du weder getracked noch werden Cookies von Google Analytics gesetzt.
    (Das Deaktivieren steht dir allerdings immer zur Verfügung)

Wusstet ihr bereits vorher, dass man die Developer Tools nach seinen Wünschen gestalten kann?

  • Ja, das ganze kannte ich bereits.

    Stimmen: 0 0,0%
  • Nein, das ganze ist mir vollkommen neu!

    Stimmen: 1 100,0%

  • Anzahl der Umfrageteilnehmer
    1

Taminoful

Original poster
Administrator
Mitglied seit
Okt 28, 2017
Beiträge
9
HINWEIS


Dieses Tutorial ist auf alle Browser anwendbar, welche auf Chromium basieren. Getestet wurde dies in Google Chrome und in Chromium. Eine Lösung für Firefox oder andere, nicht Chromium-basierte, Browser ist dem Autor derzeit nicht bekannt.



Alltagstrott..
Man kennt es, Webentwicklung und die Developer Tools. Ein stätiges Hin und Her, die fast schon religiöse Entscheidung zwischen Dark und Light Theme in der IDE und natürlich den Entwicklungstools im Browser. Doch irgendwie kommt sowohl im Dark als auch im Light Theme für die Entwicklungstools in Google's Chrome Browser etwas Eintönigkeit und Langeweile auf. Was also unternehmen? Gute Frage! Dieser Beitrag soll Abhilfe schaffen.

"Abhilfe schaffen? Wie das?" - fragt sich nun sicherlich so manch einer von euch.
Ganz einfach! Folgt dieser kurzen aber präzisen Anleitung und ihr kommt ganz fix an Developer Tools, welche eine Augenweide sind!

Was ihr dafür tun müsst..
Zunächst müsst ihr in den Chrome Flags, welche ihr unter chrome://flags/ findet, das Feature "Developer Tools experiments" finden und aktivieren. Das ganze erfordert einen Neustart des Browsers. Dies könnt ihr mit einem Klick auf den eingeblendeten Button ganz einfach tun, keine Sorge, eure geöffneten Tabs öffnen sich nach dem Neustart direkt wieder.

Nun öffnet ihr eure Developer Tools, die Shortcuts dürftet ihr sicherlich kennen. Falls nicht, diese sind F12 oder alternativ STRG + SHIFT + I.
Navigiert nun in die Developer Tools Settings (Shortcut ist F1). Hier findet ihr nun einen neuen Menüpunkt namens "Experiments". Hier findet ihr eine Reihe an coolen Features. Wir konzentrieren uns allerdings auf den Punkt "Allow custom UI themes". Diesen aktivieren wir, schließen die Entwicklertools und geben in unsere Adressleiste folgende Chrome URL ein um den Browser erneut einmal neuzustarten chrome://restart. Wie auch beim letzten Neustart bleiben eure geöffneten Tabs erhalten.

Und schon sind wir beim letzten Schritt angekommen. Nun suchen wir uns ein nettes Theme für unsere Developer Tools aus. Hierfür durchforsten wir einfach den Chrome Webstore (Ein Direktlink auf die entsprechend zur Verfügung stehenden Themes, alternativ nach "DevTools" suchen und explizit nach Extensions filtern). Hier könnt ihr nach etwas scrollen verschiedene Themes finden. Persönlich empfehle ich folgende Theme Collection im Material Design. Diese bringt nicht nur direkt mehrere Variationen zur Auswahl mit, sondern erlaubt es euch auch die Schriftgröße und Schriftart anzupassen! Die von mir empfohlene Theme Collection hat sowohl Dark als auch Light Themes zur Auswahl. Wichtig hierbei ist allerdings, dass ihr das Grundtheme der Developer Tools auf der Startseite der Developer Tools Settings entsprechend auf Dark oder Light setzt! Wenn ihr die Erweiterung installiert habt, müsst ihr gegebenenfalls einmal die Developer Tools schließen und erneut öffnen, um die Änderungen wirksam werden zu lassen.

Warte, so einfach ist das?!
Ja tatsächlich! Das war es auch schon! Nun habt ihr die coolsten Developer Tools in eurem Freundeskreis oder innerhalb eurer Firma! Wenn ihr euren Kollegen einen riesigen Gefallen tun möchtet, dann schickt ihnen doch einfach den Link zu diesem Beitrag. Das würde uns sehr freuen!

chrome_2019-09-10_22-41-52.png
 
  • Like
Reaktionen: Adwirawien

Adwirawien

Neuling
Mitglied seit
Jan 16, 2019
Beiträge
1
Endlich dem Alltagstrott entkommen

Vor einiger Weile las ich diesen Beitrag, war zu diesem Zeitpunkt aber noch recht zufrieden mit dem Dark Theme meiner DevTools und hielt das ändern des Themes für eine unnötige langwierige Abfolge komplizierter Schritte. Mittlerweile hat sich dies aber geändert. Nach den vergangenen paar Stunden in diesem Fensterchen konnte ich das normale Theme einfach nicht mehr ausstehen. Da erinnerte ich mich an diesen Beitrag und tatsächlich! Nach ein paar Sekunden und sehr einfach zu befolgenden Schritten hatte ich einen neuen, frischen Look und nutze die DevTools jetzt wieder mit vergnügen. Bitte mehr von diesen Produktivitätsboostertipps.
 
  • Love
Reaktionen: Taminoful

Users Who Are Viewing This Thema (Users: 0, Guests: 1)