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, Schriftart und Akzentfarbe 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!
