javascript - jquery replace all

¿Cómo reemplazar Javascript del sitio web de producción con Javascript local?

Question

En mi sitio web de producción, he compilado Javascript.

<script src="/js/mycode.min.js"></script>

Sería muy conveniente para la depuración si pudiera hacer que mi navegador reemplace eso con

<script src="http://localhost/js/mycode1.js"></script>
<script src="http://localhost/js/mycode2.js"></script>
...

Sé que podría manipular el DOM utilizando algo así como las letras de usuario de Greasemonkey, pero no pude encontrar una solución que impidiera la ejecución de "mycode.min.js".

¿Algunas ideas?

Answer 1

¿Qué hay de usar un subdominio como http://static.example.com para archivos estáticos (por ejemplo, archivos .js) y cambiar el archivo host?

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>

Agregue la siguiente línea al hostfile ( /etc/hosts para Linux, C:/WINDOWS/System32/drivers/etc/host ):

static.example.com 127.0.0.1

Por supuesto, debe ejecutar un servidor con los archivos de http://static.example.com/ en 127.0.0.1 .

Otra solución es usar un servidor proxy (local) como Privoxy para redireccionar http://example.com/js/ a http://localhost/js/ .

Answer 2

Agregue algo a su URL para distinguir entre su contexto dev y prod; ejemplo: http://url_of_prod.com

http://url_of_dev.com?debug=true

y luego, use algunos javascript para verificar si la depuración de la variable GET está activada o no o revise la URL con
if (window.location.host.indexOf (''url_of_dev'')> -1) ...

LUEGO USE una función de carga para cargar o no su archivo, como en este ejemplo: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

Answer 3

Aunque la solución de epascarello funciona, existe una solución más rápida para la depuración de archivos minificados. Considere usar los mapas fuente de JavaScript . Los modernos Firefox y Chrome los admiten.

La idea del mapa fuente es decir navegador donde encontrar la versión no miniaturizada. Cuando inicia la depuración en las herramientas de desarrollo de su navegador, el navegador carga una versión no miniaturizada del script y le muestra el código JavaScript fácil de leer (o el código que compiló en JavaScript) en el depurador.

Answer 4

La forma en que lo hago:

1. Descargue e instale Fiddler si está en Windows.
2. Habilítalo para atrapar tráfico http [IE / Chrome lo hace de manera predeterminada, Firefox - habilítalo mediante las instalaciones agregadas]
3. Cargue la página en cuestión.
4. Busque el archivo que desea reemplazar en la lista de tráfico http a la izquierda y haga clic en él.
5. A la derecha hay una pestaña AutoResponder. Haz click en eso.
6. Haga clic en la casilla de verificación para "habilitar respuestas automáticas"
7. Haga clic en el botón Agregar ...
8. El segundo menú desplegable a la derecha, elija la opción que dice "buscar un archivo"
9. Ubique el archivo en el cuadro de diálogo y haga clic en guardar
10. Repita los pasos 4 a 9 hasta que reemplace todos los archivos que desea reemplazar
11. Actualiza la ventana del navegador y tus nuevos archivos js se están ejecutando

En lugar de reemplazar el archivo js, ​​puede reemplazar el archivo html y cambiar los enlaces js en la página.

Puede instalar Charles si está en un mac / linux. (no gratis, tiene prueba) Los pasos son similares, pero no son lo mismo.

Si está utilizando Google Closure para comprimir archivos, puede instalar su complemento para realizar la asignación de origen .

Answer 5

Para agregar un archivo NUEVO , puede usar algo como uno de la otra publicación:

document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js");

Esta secuencia de comandos tampermonkey puede reemplazar cualquier archivo JS en una página web con la personalizada de un dominio:

// ==UserScript==
// @name         ReplaceJS
// @namespace    http://example.com/
// @version      1.0.0
// @description  Replace javascript files on any webpage!
// @author       Mr.Sonic Master
// @match        *
// @run-at       document-start
// ==/UserScript==

var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file

var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same)

var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive

function injectScript(originalPage) { //Function injectScript replaces the file
    console.log(''Replace stage 2: Replace text matching'', oldJSFile, ''with'', newJSFile);
    var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one
    document.open();
    console.log(''Replace stage 3: Write new HTML to page...'');
    document.write(moddedPage); //Write to the page the new HTML code
    document.close();
}

setTimeout(function() { //Wait a bit for the page''s HTML to load...
    console.log(''Replace stage 1: target HTML'');
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page''s HTML as oldPage in the function
}, 1111);

Answer 6

Suponiendo que sus scripts son simplemente la versión en bruto del archivo de producción, puede abrir su depurador favorito o consola JS e importar sus scripts:

document.body.appendChild(document.createElement("script")).src = 
    "http://localhost/js/mycode1.js";

Hacerlo sobrescribirá las funciones y variables originalmente definidas. Tendrá que volver a ejecutar manualmente window.onload . Si tiene una secuencia de comandos que se ejecuta inmediatamente o en la carga que cambia mucho en la página, es posible que tenga algo que hacer para volver al estado original.

¡Buena suerte!