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

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

Remarque, il y a beaucoup de questions à propos de 'l'injection de CSS à partir d'une extension chrome", mais plus précisément je veux le faire via le "Chrome Developer Tools' bidule.

source d'informationauteur Dan Bolser

  1. 3

    Est-ce que vous êtes après?: "Comment Modifier les Fichiers Source Directement dans Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

  2. 23

    Je ne suis pas sûr si cela fonctionne, mais vous devez essayer.

    Appuyant sur F12/(Cmd + opt + I sur Mac) pour ouvrir le Développeur de la Console et allez à l'onglet Console.

    Copier coller le code suivant (modifier le chemin d'accès):

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

    Alternativement, vous pouvez modifier une propriété de l'inspecteur de la feuille de style.css est créé par google Chrome, et copie de votre source de CSS.

  3. 1

    Cela devrait fonctionner (coller dans la console, de modifier des 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 permettra d'insérer un <link>

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

    avant la fermeture </head>

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

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

    Pourquoi pas une sorte de simple cadre agnostique one-liner comme ça?

    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...

  5. 0

    Allez à l'onglet sources dans les outils de dev et faites un clic droit dans la colonne de gauche, puis ajouter le dossier à l'espace de travail et l'utilisation de l'explorateur de fichiers pour sélectionner le dossier qui contient votre fichier css. Vous aurez pour permettre de faire des changements, une fois que vous faites cela, vous verrez que votre dossier dans les sources de l'arbre(ASSUREZ-vous que VOUS SÉLECTIONNEZ l'ONGLET système de fichiers en VERTU de l'ONGLET SOURCES), ouvrez votre dossier trouver le fichier et cliquez droit sur le fichier css et sélectionnez la carte réseau de ressources. Une fois que vous tracer le fichier que vous pouvez ouvrir et de voir dans l'espace de travail et à partir de ce fichier tout changement affectera les styles de page. Donc, fondamentalement, votre styles plus rouler les styles.