usamos - ¿Inyectar CSS con la herramienta de desarrollo de Chrome?

inspector de elementos css

Question

¿Dónde puedo agregar CSS a la página que estoy viendo? No quiero agregar estilo a un elemento directamente, quiero agregar un ''documento'' a una página para depurar los cambios antes de editar el style.css del sitio.

Tenga en cuenta que hay muchas preguntas aquí sobre ''inyectar CSS desde una extensión de Chrome'', pero específicamente quiero hacerlo a través de la cosa ''Chrome Developer Tools''.

Answer 1

Estas cosas pueden parecer complicadas, pero son muy fáciles

Primera forma, inspector-hoja de estilo:

Abrir el elemento de inspección ( F12 o Ctrl + Mayús + I )

Vaya a la pestaña Elementos , si aún no está allí, vea la pestaña Estilos , ahora vea en la esquina derecha, habría un ícono + , haga clic en él (o mantenga presionada esa ícono si no agrega automáticamente la hoja de estilo inspector ), agregará el selector del elemento resaltado actualmente, justo al lado del selector, habrá un enlace / botón inspector-hoja de estilo , haga clic en él, le llevará una ventana, donde puede agregar estilos.

Segunda forma, Fragmento:

Abrir el elemento de inspección ( F12 o Ctrl + Mayús + I )

Vaya a la pestaña Fuente , vaya a la pestaña Fragmentos , haga clic en el fragmento + Nuevo , asígnele el nombre que desee y agregue esto:

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

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

Guárdalo, ejecútalo ( Ctrl + Intro ).

En FireFox es aún más fácil:

Abrir el elemento de inspección ( F12 )

Vaya al Editor de estilos , haga clic en el ícono + y podrá editar el estilo; También puede, importar estilos, simplemente haciendo clic en el icono junto a + .

Answer 2

¿Es esto lo que está buscando ?: "Cómo editar archivos de origen directamente en Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

Answer 3

¿Por qué no un tipo de marco simple agnóstico de una sola línea como este?

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

Parece funcionar como un amuleto ...

Answer 4

Esto debería funcionar (pegar en la consola, editar los argumentos en la última línea según sea necesario):

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

Esto insertará un <link>

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

antes del cierre </head>

Si no hay una etiqueta de encabezado en el documento al que está intentando agregar un archivo css, intente body como el último argumento:

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

Answer 5

No estoy seguro de si funciona, pero tendrías que intentarlo.

Presionando F12 / ( Cmd + opt + I en Mac) para abrir la Consola de desarrollador y vaya a la pestaña Consola.

Copie y pegue el siguiente código (edite la ruta):

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

Alternativamente, puede editar una propiedad para que Chrome cree el inspector-stylesheet.css, y copiar allí su fuente CSS.

Answer 6

Para empezar, esta es una de las razones por las que uso Firefox para la enseñanza y mi propio trabajo de desarrollo. La respuesta está incorporada.

Como una variación de las respuestas anteriores, con el uso de JavaScript moderno, puede agregar un estilo codificado de la siguiente manera:

document.head.insertAdjacentHTML(''beforeend'',''<style> … </style>'');

o puede agregar una hoja de estilo externa de la siguiente manera:

document.head.insertAdjacentHTML(''beforeend'',''<link rel="styleshet" href="…">'');

El argumento anterior es ayudar al CSS inyectado a anular los estilos cargados previamente.

Si vas a hacer esto repetidamente, puedes agregarlo como bookmarklet, usando algo como Bookmarklet Crunchinator .

La técnica es similar a una que enseño en una clase de JavaScript, donde uso afterbegin para inyectar algunos CSS predeterminados, pero permite que las hojas de estilo del usuario anulen los valores predeterminados.

Answer 7

Vaya a la pestaña de fuentes en las herramientas de desarrollo y haga clic con el botón derecho en la columna izquierda, luego agregue una carpeta al área de trabajo y use el explorador de archivos para seleccionar la carpeta que contiene su archivo css. Deberá permitir que se realicen cambios. Una vez que haga esto, verá su carpeta en el árbol de fuentes (ASEGÚRESE DE SELECCIONAR LA PESTAÑA DEL SISTEMA DE ARCHIVOS BAJO LA PESTAÑA DE FUENTES), abra la carpeta, busque el archivo y haga clic con el botón derecho en el archivo css y seleccione mapa a la red de recursos. Una vez que haya asignado el archivo, puede abrirlo y verlo en el área de trabajo y, desde ese archivo, cualquier cambio realizado afectará a los estilos de página. Así que básicamente tus estilos superarán los estilos servidos.