Google Chrome Personnaliser Les Outils De Développeur De Thème / Schéma De Couleur
Comment changer le schéma de couleur sur les Outils de développement, la Console JavaScript de Google Chrome ?
Comme ceci:
Vous devez vous connecter pour publier un commentaire.
chrome://flags/#enable-devtools-experiments
, et de permettreDeveloper Tools experiments
.Relaunch Now
au bas de la page.Settings
, sélectionnezExperiments
onglet, et de vérifierAllow custom UI themes
.Le thème sombre est maintenant pris en charge nativement dans DevTools: https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools
Comme indiqué dans cette pile de dépassement de réponse: https://stackoverflow.com/a/21210882/933951, le fonctionnaire a recommandé la méthode de dépouillement Google Chrome Developer tools est par la création d'une extension pour remplacer la valeur par défaut des styles qui sont appliqués, à l'aide de la
chrome.devtools.panels.applyStyleSheet
.Le processus de création d'une extension Chrome pour cette fin peut être un peu fastidieux à la peau de chaque composante à la main à partir de zéro, j'ai donc créé un petit plugin qui propose une collection de thèmes intégrés et complémentaires de l'éditeur de paramètres de Chrome Developer Tools. Les extensions fournit également aux développeurs la possibilité de créer des thèmes personnalisés à l'aide d'un simple Sass système de template sans écrire votre propre extension.
drapeaux de prendre effet.
Cela fournira, hors de la boîte, les caractéristiques suivantes:
Si vous souhaitez contribuer à d'autres thèmes, vous pouvez suivre les étapes ci-dessous:
Fourche le dépôt GitHub puis suivez les étapes ci-dessous. Le Devtools Auteur Chrome extension est construite à l'aide de NodeJS et GruntJS.
Installation:
De développement:
Allow incognito
ci-dessous si vous le souhaitez).cmd + opt + I
tandis que le courant DevTools fenêtre qui a le focus) après que les modifications aient été enregistrés et grognement de la recharge de l'actif. Vous aurez alors besoin de recharger (fermez et rouvrez) des DevTools fenêtre après avoir apporté des modifications.La création de thèmes supplémentaires
app/styles/themes/templates/
et renommer le fichier de votre thème nom sans le trait de soulignement, c'est à dire. si votre thème est appelé aloha, à l'intérieur deapp/styles/themes/
, copietemplates/_theme-template.scss
et le renommer enaloha.scss
@include styles()
.themes.json
dansapp/scripts/
C'est lié à votre thème, veuillez jeter un oeil ici:
http://www.hongkiat.com/blog/chrome-devtools-theme/
ou
http://devthemez.com/