web-dev-qa-db-fra.com

Google Chrome Personnaliser le thème / le schéma de couleurs des outils de développement

Comment changer le schéma de couleurs sur les outils de développement, la console JavaScript dans Google Chrome?

Comme ça:

enter image description here

javascriptcssgoogle-chrome-extensiongoogle-chrome-devtoolsgoogle-chrome-theme
34
Anton Dozortsev
  1. Installez un thème DevTools comme Zero Dark Matrix
  2. Aller à chrome://flags/#enable-devtools-experiments, et activez Developer Tools experiments.
  3. Sélectionnez Relaunch Now au bas de la page.
  4. F12 pour ouvrir les outils de développement, accédez à Settings, sélectionnez l'onglet Experiments et cochez Allow custom UI themes.
  5. F12, Rechargez DevTools.
37
Jaskey

Le thème sombre est désormais pris en charge nativement dans DevTools: https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools

enter image description here

27
Will

Comme indiqué dans cette réponse de débordement de pile: https://stackoverflow.com/a/21210882/933951 , la méthode officielle recommandée pour habiller Google Chrome Outils de développement consiste à créer une extension pour remplacer les styles par défaut qui sont appliqués, en utilisant le chrome.devtools.panels.applyStyleSheet.

Le processus de création d'une extension Chrome à cet effet peut être un peu fastidieux pour habiller chaque composant à la main à partir de zéro, j'ai donc créé un petit plugin qui fournit une collection de thèmes intégrés et des paramètres d'éditeur supplémentaires pour Chrome Outils de développement. Les extensions offrent également aux développeurs la possibilité de créer des thèmes personnalisés supplémentaires à l'aide d'un système de modèles Sass simple sans écrire votre propre extension .

  1. Installer DevTools Author Chrome extension from Chrome Web Store
  2. Activez les expériences des outils de développement dans chrome: // flags/# enable-devtools-experiences. Redémarrez Chrome pour que les indicateurs prennent effet.
  3. Ouvrez DevTools (cmd + opt + I); Paramètres> Expériences> cochez Autoriser les thèmes d'interface utilisateur personnalisés.

Cela fournira, hors de la boîte, les fonctionnalités suivantes:

  • La possibilité de choisir parmi +25 thèmes d'éditeur personnalisés
  • Prise en charge des polices personnalisées via les polices système activées
  • Contrôle incrémentiel de la taille de la police, de 10px à 22px

Si vous souhaitez contribuer des thèmes supplémentaires, vous pouvez suivre les étapes ci-dessous:

Forkez le référentiel GitHub puis suivez les étapes ci-dessous. L'extension Devtools Author Chrome est construite en utilisant NodeJS et GruntJS .

Installation:

$ git clone [email protected]:micjamking/devtools-author.git
$ cd devtools-author
$ npm install

Développement:

$ grunt serve
  1. Une fois que grunt est en cours d'exécution, pour installer l'extension de développement dans Chrome, ouvrez Paramètres> Plus d'outils> Extensions et cliquez sur Charger l'extension non compressée ... bouton. (activez également Allow incognito ci-dessous si vous le souhaitez).
    • (Désactivez DevTools Author si l'extension est installée depuis le Chrome Web Store.)
    • Assurez-vous que les tests des outils de développement sont activés et que les thèmes d'interface utilisateur personnalisés sont autorisés.
  2. Redémarrez DevTools. Je trouve que le moyen le plus rapide de voir les changements prendre effet est de désancrer DevTools dans une fenêtre séparée, puis d'ouvrir une fenêtre DevTools suivante (cmd + opt + I Tandis que la fenêtre DevTools actuelle est concentrée) après que les modifications ont été enregistrées et que grunt recharge les actifs . Vous devrez ensuite recharger (fermer et rouvrir) la fenêtre DevTools suivante après avoir apporté des modifications.
  1. Faites une copie de l'un des modèles à partir de app/styles/themes/templates/ Et renommez le fichier en nom de thème sans le trait de soulignement , c'est-à-dire. si votre thème s'appelle aloha, à l'intérieur de app/styles/themes/, copiez templates/_theme-template.scss et renommez-le en aloha.scss
  2. Ajoutez des valeurs de couleur pour la palette en fonction des variables de surligneur de syntaxe de code dans votre fichier scss.
    • Si vous souhaitez un ciblage plus spécifique pour votre thème que ce qui est pris en charge, vous pouvez ajouter ces styles à la fin de votre fichier de thème, après la @include styles().
  3. Ajoutez votre objet de palette de couleurs (nom et tableau de couleurs) au themes.json Dans app/scripts/
  4. Dans DevTools, sélectionnez votre palette de thèmes dans le panneau Paramètres d'auteur.
  5. Prévisualisez et ajustez vos couleurs selon vos besoins. Voir Développement - Étape 2 .
  6. Validez et transférez vos modifications dans votre référentiel, puis créez un pull request pour votre nouveau thème une fois qu'il est prêt!
8
micjamking

C'est lié à votre thème, jetez un œil ici: http://www.hongkiat.com/blog/chrome-devtools-theme/

ou

http://devthemez.com/

5
pna

enter image description here

  1. ouvrir chrome navigateur
  2. appuyez sur la touche F12. maintenant la fenêtre de l'outil développeur apparaît à l'écran
  3. sélectionnez les points ou appuyez sur F1
  4. sélectionnez -> préférence -> Apparence -> Thème.
  5. sélectionnez Foncé ou clair
3
Shijo Rs