javascript - poner - ¿hay una manera de guardar cambios de recursos remotos en css/js entre recargas de página o asignar recursos remotos a locales en devtools?

how debug js in chrome

Question

Sé sobre Workspaces recientemente introducido en DevTools pero eso no es lo que necesito. Por ejemplo: la página usa jquery que se carga desde CDN, modifico el código de la biblioteca de jquery, presiona ctrl-s, vuelve a cargar la página -> las modificaciones se pierden. O quiero depurar algún sitio del que no tenga la capacidad de cambiar archivos.

No solo quiero guardar los cambios al guardar CSS; mientras navego, ¿cómo puedo guardar los archivos css desde el interior de chrome dev o firebug en el directorio local? Quiero que persistan entre las recargas de página.

Answer 1

Consulte https://.com/a/31585725/52817 :

La extensión de reemplazo de recursos le permite hacer exactamente eso:

• crear una regla de archivo para la url que desea reemplazar
• Edita el js / css / etc en la extensión.
• recarga tantas veces como quieras :)

Incluso puedes agregar una pestaña a las herramientas de desarrollo.

Answer 2

Es posible, pero bastante complicado:

• abra recursos y haga clic derecho en la carpeta con styles / resources (para no olvidarse de hacer clic en "permitir" en el cuadro de diálogo que aparece debajo de la barra de dirección)
• luego haga clic con el botón derecho en el recurso concreto y elija "guardar como" (guárdelo en el directorio de trabajo que especificó en el paso anterior)
• luego haga clic con el botón derecho en el mismo recurso y elija "Asignar al recurso del sistema de archivos" (escriba el mismo nombre que en el paso anterior, por ejemplo, all.css pero no all.css? id = 234234234, por si acaso)
• Modificar los estilos en las herramientas de desarrollo.
• actualiza la página (y date cuenta de que todas las modificaciones no se aplican)
• abra recursos, encuentre su carpeta de espacio de trabajo y su recurso en ella (por ejemplo, all.css)
• haga clic derecho en ese recurso y elija "modificaciones locales"
• en la consola abierta, haga clic en "aplicar contenido original" y comprenda que se han aplicado sus estilos =) Se ha solucionado el problema y la mejor idea es usar algo como fiddler para reemplazar los recursos en los archivos locales.

Answer 3

No sé si esto califica como una respuesta, pero es lo que estoy haciendo, y cuanto más cerca esté de lo que quiero.

Cargo la página en el navegador y la guardo como en un archivo local. Tenga en cuenta que estoy guardando la página completa, con HTML, js y CSS.

Ahora, si quiero modificar un CSS, edito el HTML y dirijo estos archivos (o archivos) a mis archivos de desarrollo.

Recargo la página y ahora puedo trabajar como quieras (guardando y recargando lo que he guardado).

Por supuesto, eso significa que tiene acceso completo a los archivos, y lo más probable es que sean locales, pero no creo que esté realmente dispuesto a editar los archivos web reales en línea.

Cuando termino de modificar los archivos, es solo cuestión de sincronizar mis archivos dev con los archivos web.

Answer 4

Nota, utiliza la biblioteca jQuery (no es necesario)

Prueba, en la console

function restyle() {
  $("*").css("color", "blue"); /* development elements, css, js */
  $("head").append("<script>console.log(/"restyle/")</script>"); /* js */
  var t = document.querySelectorAll("*"); /* modified document */
  var outer = document.documentElement.outerHTML; /* modified document */
  var inner = document.documentElement.innerHTML; /* modified document */
  return $.ajax() /* `pseudo` `reload` */
  .done(function(data) { /* original document */
  document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */
  console.log(data, inner, outer, $(t)) /* options, `callbacks` */
  /* $.each($(t), function(index, value) { console.log(value) }); */
  })
};
restyle();

Answer 5

Podrías intentarlo de esta manera (para jquery):

-cargue la página por primera vez y en la pestaña de fuentes coloque un punto de interrupción en la línea número 1.- luego vuelva a cargar la página, modifique el archivo y guarde (puede ver que la página se ha detenido debido al punto de interrupción) - presione el botón de reproducción y la página comenzará a cargar. Las modificaciones que hiciste funcionarán. La desventaja de esta solución es que una vez que actualice la página nuevamente, las modificaciones se perderán.

¡Espero que ayude!

Answer 6

Por lo que puedo decir, no hay manera de hacer esto en DevTools de Chrome. Debe consultar la documentación sobre cómo saving y realizar cambios locales . Lo único que parece persistir a través de recargas es snippets ... pero no parece que eso sea lo que quieres.

Si alguna vez se hace una solución para esto ... lo quiero. Por ahora, parece que lo mejor que puedes hacer es contenido de scripts y similares.

Answer 7

Sólo un consejo, bajo Firefox utilizo Greasemonkey . No sé si conoce esta herramienta, pero permite ejecutar scripts de javascript en una página web para un sitio web. Luego, con un javascript adaptado puedes cambiar css dinámicamente.

Un poco de inicio para greasemonkey : http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/

Para Chrome es tampermonkey : http://tampermonkey.net/faq.php

Answer 8

Tienes la mayor parte, pero aquí está el ligero cambio:

Haga un cambio en el panel Estilos (o en Fuentes), luego haga clic en Fuentes y, cuando su archivo modificado esté abierto, presione ctrl-s .

Luego, puede hacer clic con el botón derecho en el recurso en la lista de Fuentes, pulsar Guardar como ... y guardar el nuevo archivo modificado en el disco.

No hay forma de guardar un archivo remoto modificado sin conservarlo en el disco y esperar que se modifique al volver a cargar.

Answer 9

Utilizo mi apache en modo de depuración con eclipse para que los nombres se reflejen en el sitio tan pronto como guardo la página.

Answer 10

Workspaces permiten editar archivos asignados a un directorio local, pero naturalmente, un requisito previo es la entrega de archivos locales.

Si estás jugando con archivos a los que no tienes acceso directo / conveniente (por cualquier motivo), te recomiendo configurar un proxy de manipulación como Burp . En pocas palabras, sería capaz de modificar la respuesta del servidor y realizar búsquedas sobre la marcha y reemplazar como cdn.example.com/jquery-library.js a localhost:8080/jquery-library.js en el cuerpo del html. Todo lo que tienes que hacer después es configurar un servidor local (trivial) y editar la instancia local del script.

Este es un patrón útil para previsualizar los cambios locales en el contenido de producción, siempre que no se use en lugar de un entorno de prueba.