Custom.css a cessé de fonctionner dans la mise à jour de Google Chrome 32.0.1700.76 m

Question

J'utilise certains thèmes pour les outils de développement Google 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?

Merci à l'avance

Answer 1

Soutien pour Custom.css a été supprimé à partir de Chrome en version 32.
Cette réponse fournit deux méthodes pour facilement activer 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 aussi pour Chrome 32.

Les deux méthodes sont les extensions de Chrome, d'utiliser les exemples ci-dessous, suivez les étapes suivantes:

1. Créer un dossier et y placer les fichiers suivants dans il.
2. Aller à l' chrome://extensions
3. Sélectionnez "mode Développeur"
4. Cliquez sur "Load déballé extension"
5. Sélectionnez le répertoire que vous venez de créer.

Véritable émulation Custom.css

Cette section utilise l'une des deux techniques décrites à la Façon d'injecter du code javascript dans Chrome DevTools lui-même. Cette extension peut être facilement généralisée à imiter Personnalisé.css, c'est à dire activer la feuille de style sur chaque page du "sur mesure".css.
Remarque: Si vous utilisez google Chrome 33+, alors je vous recommande fortement de la méthode dans la section suivante sur celui.

le manifeste.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);
})();

La coutume.css

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

---

La méthode officielle (Chrome 33+ uniquement)

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

le manifeste.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();

La coutume.css

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

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

Answer 2

Il existe désormais des thèmes de développement dans Chrome Store pour 33 ans et plus.

Ouvrez chrome: // flags et activez les expériences des outils de développement. Ouvrez les paramètres des outils de développement, sélectionnez l'onglet Expériences et cochez la case Autoriser les thèmes d'interface utilisateur personnalisés. Installez n’importe quel thème, vous pouvez rechercher " thème devtools " sur le Chrome Web Store. Cela vous tiendra également au courant.

ref

Answer 3

Dans mon cas, je ne se soucient pas tellement sur la thématisation devtools comme primordial CSS sur certains sites (la greasemonkey). Selon l'Homme Lui-même (Paul Irlandaise) le remplacement conseillé (pour ce cas d'utilisation au moins) est une extension Chrome appelé Control Freak. Je l'ai essayé et il fonctionne très bien pour les one-off JS/CSS remplace par site. Pas sûr au sujet de la thématique en soi, mais il devrait aider les gens qui cherchent à remplacer la base Custom.css fonctionnalités comme je l'ai été.

Answer 4

Je ne pouvais pas 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.

Answer 5

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);
})();