web-dev-qa-db-fra.com

Custom.css a cessé de fonctionner dans 32.0.1700.76 m Google Chrome update

J'utilise certains thèmes pour Google Developer Tools à partir de ce site Web: http://devthemez.com/themes/chrome-developer-tools

Cependant, après la mise à jour 32.0.1700.76 m, tous les thèmes ont cessé de fonctionner.

Que dois-je faire pour les remettre au travail?

css3google-chromegoogle-chrome-devtoolsdeveloper-tools
50
user3130064

Soutien Custom.css a été supprimé de Chrome dans la version 32.
Cette réponse propose deux méthodes pour activer facilement les feuilles de style dans les outils de développement. La deuxième méthode est recommandée, mais ne fonctionne que pour Chrome 33+, la première méthode fonctionne également pour Chrome 32.

Les deux méthodes sont Chrome, pour utiliser les exemples ci-dessous, procédez comme suit:

  1. Créez un répertoire et placez-y les fichiers suivants.
  2. Aller à chrome://extensions
  3. Sélectionnez "Mode développeur"
  4. Cliquez sur "Charger l'extension décompressée"
  5. Sélectionnez le répertoire que vous venez de créer.

Véritable émulation de Custom.css

Cette section utilise l'une des deux techniques décrites dans Comment injecter du javascript dans Chrome DevTools lui-même . Cette extension peut facilement être généralisée pour émuler entièrement Custom.css, c'est-à-dire activer la feuille de style sur chaque page comme Custom.css.
Remarque: Si vous utilisez Chrome 33+, je recommande fortement la méthode de la section suivante par rapport à celle-ci.

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

CSS personnalisé

/* whatever you had in your Custom.css */

Méthode officielle (Chrome 33+ uniquement)

Si vous souhaitez personnaliser votre style devtools, chrome.devtools.panels.applyStyleSheet doit être utilisé. Cette fonctionnalité est actuellement cachée derrière un drapeau (--enable-devtools-experiments, nécessite la relance de Chrome) et une case à cocher (après avoir activé le drapeau, ouvrez les devtools, cliquez sur l'icône engrenages, allez dans Expériences et cochez "Autoriser les thèmes d'interface utilisateur").

manifest.json

{
  "name": "<name> DevTools Theme",
  "version": "1",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

devtools.html

 <script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() {
    chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

CSS personnalisé

/* whatever you had in your Custom.css */

Pour plus d'informations, voir https://code.google.com/p/chromium/issues/detail?id=318566

62
Rob W

Il existe désormais des thèmes pour développeurs dans Chrome Store for 33+

Ouvrez les indicateurs chrome: // et activez les outils Developer Tools. Ouvrez les paramètres des outils de développement, sélectionnez l'onglet Expériences et cochez Autoriser les thèmes d'interface utilisateur personnalisés. Installez n'importe quel thème, vous pouvez rechercher " thème devtools " sur la boutique en ligne Chrome. Il vous tiendra également à jour.

ref

19
Brian Ogden

Dans mon cas, je ne me soucie pas tant du thème devtools que du remplacement de CSS sur certains sites (à la greasemonkey). Selon l'homme lui-même (Paul Irish) le remplacement recommandé (pour ce cas d'utilisation au moins) est un Chrome appelée Control Freak . Je l'ai essayé et cela fonctionne très bien pour les remplacements JS/CSS uniques par site. Je ne suis pas sûr de la thématique en soi, mais cela devrait aider les gens qui cherchent simplement à remplacer la base Custom.css fonctionnalité comme je l'étais.

4
Brian Moeskau

Je ne pouvais pas vraiment tout comprendre de Rob W mais pour moi

manifest.json

{
  "name": "__something__",
  "version": "1",
  "content_scripts": [
    {
      "matches": ["__link_filter__"],
      "css": ["__filename__.css"]
    }
  ],
  "manifest_version": 2
}

et le fichier css dans le même dossier a fait ce que je voulais. Comment charger ce dossier est déjà répondu ici.

4
Ravana

Comme indiqué dans la réponse de @Rob W: https://stackoverflow.com/a/21210882/933951 , la méthode officielle recommandée pour habiller Google Chrome Developer Tools is en créant 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]:<username>/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 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!
1
micjamking

Le développeur mauricecruz a créé un bel outil pour créer des thèmes personnalisés Chrome DevTools.

https://github.com/mauricecruz/zero-base-themes

C'est beaucoup plus facile que d'écrire un fichier CSS (à mon avis).

0
GreenRaccoon23

J'ai utilisé les instructions pour Chrome 32, mais cela n'a pas fonctionné. Mon objectif était d'inverser les couleurs des outils de développement. J'ai créé un répertoire et y ai placé trois fichiers, Custom.css, Manifest.json, run_as_devtools.js.

Custon.css

#-webkit-web-inspector {
-webkit-filter: invert(1);
font-weight: bold !important;
}

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();
0
Jeffrey McFarland
  1. ouvrir devtools ⌘ + option/alt + i
  2. ouvrir l'outil de recherche ⌘ + shift + p (assurez-vous de cliquer sur les devtools avant de faire ce raccourci clavier)
  3. recherchez dark et vous verrez une option pour passer au thème sombre enter image description here

Vous pouvez également suivre les instructions ici

0
Alex Cory