web-dev-qa-db-fra.com

Injecter CSS avec l'outil de développement Chrome?

Où puis-je ajouter du CSS à la page que je regarde? Je ne souhaite pas ajouter directement de style à un élément, je souhaite ajouter un "document" à une page pour déboguer les modifications avant de modifier le fichier style.css du site.

Notez qu'il y a beaucoup de questions ici sur "l'injection de CSS à partir d'une extension chrome", mais je souhaite spécifiquement le faire via l'outil "Outils de développement Chrome".

cssgoogle-chromedeveloper-tools
18
Dan Bolser

"Comment modifier les fichiers source directement dans Chrome" http://www.sitepoint.com/edit-fichiers-in-chrome/

1
simonbell

Je ne sais pas si cela fonctionne, mais vous devrez essayer.

Pressage F12/ (Cmd + opt + I Mac) pour ouvrir la console du développeur et accéder à l’onglet Console.

Copier coller le code suivant (éditer le chemin):

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

Vous pouvez également modifier une propriété de sorte que l'inspector-stylesheet.css soit créé par Chrome et y copier votre source CSS.

28
larssy1

Pourquoi pas une sorte de simple cadre agnostique comme celui-ci?

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('ref', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

Semble fonctionner comme un charme ...

3
Jonas Carlbaum

Cela devrait fonctionner (coller dans la console, éditer les arguments dans la dernière ligne si nécessaire):

(function(i,n,j,e,c,t,css){
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

Cela va insérer un <link>

avec un href //fonts.googleapis.com/css?family=Roboto

avant le </head> de clôture

S'il n'y a pas de balise head dans le document auquel vous essayez d'ajouter un fichier CSS, essayez body comme dernier argument:

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
2
stereobird

Ces choses peuvent sembler compliquées, mais elles sont très faciles-

Première manière, inspector-stylesheet:

Élément d'inspection ouvert (F12 Ou Cntrl+ Shift+I)

Allez dans l'onglet Eléments, si vous n'y êtes pas déjà, voir l'onglet Styles, voyez maintenant dans le coin droit, il y aurait une icône + , cliquez dessus (ou appuyez longuement sur cette icône si elle n’ajoute pas automatiquement inspector-stylesheet ), le sélecteur sera ajouté. de l’élément actuellement sélectionné, juste à côté du sélecteur, un lien/bouton inspector-stylesheet , cliquez dessus, il vous mènera une fenêtre, où vous pouvez ajouter des styles.

Deuxième manière, extrait:

Élément d'inspection ouvert (F12 Ou Cntrl+ Shift+I)

Allez dans l'onglet Source, allez dans l'onglet Extraits de code, cliquez sur l'onglet + Nouvel extrait, nommez-le comme vous voulez et ajoutez ceci:

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

sauvez-le, lancez-le (Cntrl+Enter).

Dans FireFox c'est encore plus facile:

Élément d'inspection ouvert (F12)

Allez dans Style Editor, cliquez sur l'icône + et vous pourrez éditer le style. Vous pouvez également importer des styles en cliquant simplement sur l'icône à côté de +.

0
Harry

Accédez à l'onglet Sources dans les outils de développement, cliquez avec le bouton droit de la souris dans la colonne de gauche, puis ajoutez un dossier à l'espace de travail et utilisez l'explorateur de fichiers pour sélectionner le dossier contenant votre fichier css. Vous devrez autoriser les modifications. Une fois que cela sera fait, vous verrez votre dossier dans l’arborescence des sources (VÉRIFIEZ QUE VOUS SÉLECTIONNEZ ONGLET FILESYSTEM SOUS ONGLET SOURCES). mapper sur une ressource réseau. Une fois que vous avez mappé le fichier, vous pouvez l'ouvrir et le voir dans l'espace de travail. À partir de ce fichier, toute modification apportée affectera les styles de page. Donc, fondamentalement, vos styles surpasseront les styles servis.

0
Mike Baker