Come sostituire Javascript del sito Web di produzione con Javascript locale?

Sul mio sito Web di produzione, ho compilato Javascript.Come sostituire Javascript del sito Web di produzione con Javascript locale?

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

Sarebbe molto comoda per il debug, se ho potuto fare il mio browser sostituire quello con

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

So che avrei potuto manipolare il DOM usando qualcosa come userscripts Greasemonkey, ma non riuscivo a venire con una soluzione che impedirebbe l'esecuzione di "mycode.min.js".

Qualche idea?

fonte

2010-10-14 Julius Eckert

Il modo in cui lo faccio:

Scaricare e installare Fiddler se siete su Windows.
Abilitarlo per catturare il traffico http [IE/Chrome lo fa per impostazione predefinita, Firefox - abilitarlo attraverso il componente aggiuntivo installato]
Caricare la pagina in questione.
Trovare il file che si desidera sostituire nell'elenco di traffico http a sinistra e fare clic su di esso.
Sulla destra c'è una scheda AutoResponder. cliccaci sopra.
Fare clic sulla casella di controllo per "abilitare le risposte automatiche"
fare clic su Aggiungi .. pulsante
La seconda discesa sulla destra, scegliere l'opzione che dice "trovare un file"
Individuare il file nella finestra di dialogo e Fare clic su salva
Ripetere i passaggi 4-9 fino a quando si sostituisce tutti i file che si desidera sostituire
aggiornare la finestra del browser e il vostro nuovo file js esegue

Inst Per sostituire il file js, è possibile sostituire il file html e modificare i collegamenti js nella pagina.

È possibile installare Charles se si è su un Mac/Linux. (non gratuito, ha una prova) I passaggi sono simili, ma non uguali.

Se si utilizza Google Closure per comprimere i file, è possibile installare il plug-in per eseguire lo source mapping.

fonte

2010-10-14 19:04:05 epascarello

Dovrebbe funzionare. Ma cercherò altre soluzioni proxy che siano più facili da programmare e gratis. Qualcuno può consigliarne uno buono per linux/osx? –

UPDATE: Mi sono scritto un piccolo proxy che inoltra tutto dal mio server di produzione e stringa sostituisce lo specifico

Che dire di utilizzare un sottodominio come http://static.example.com per file statici (ad esempio file .js) e la modifica del file host?

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

Aggiungere la seguente riga alla HostFile (/etc/hosts per Linux, C:\WINDOWS\System32\drivers\etc\host):

static.example.com 127.0.0.1

Naturalmente hai eseguire un server con i file dal http://static.example.com/ su 127.0.0.1.

Un'altra soluzione è l'utilizzo di un server proxy (locale) come Privoxy per il reindirizzamento di http://example.com/js/ a http://localhost/js/.

fonte

2010-10-14 18:56:45 Lekensteyn

Se solo i dipartimenti IT non si chiudeva l'accesso in modifica a tH è un file nei luoghi di lavoro dall'inferno per ragioni di 'sicurezza'. > :) – epascarello

Buona idea. Lo farò. Ma questa soluzione implica ancora avere tutto il codice JS in un unico file. Sarebbe perfetto per averli separati tutti. –

Assumendo che lo script sono semplicemente la versione grezza del file di produzione, si può semplicemente rompere aprire il vostro debugger preferito console JS e importare i vostri script:

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

In questo modo si sovrascrive le funzioni e le variabili originariamente definite . Dovrai rieseguire manualmente window.onload. Se hai uno script che viene eseguito immediatamente o caricato che cambia molto sulla pagina, potresti avere del lavoro da fare per riportarlo allo stato originale.

Buona fortuna!

fonte

2010-10-14 19:47:56 gilly3

Questa non è una grande soluzione se il codice originale manipola la pagina o aggiunge gestori di eventi. Finirai per causare più problemi. – epascarello

Certo ... Ho detto tanto nella mia risposta. Ma se tutto quello che devi fare è eseguire il debug del tuo codice, è sufficiente sostituire le funzioni con questa tecnica per poter impostare i punti di interruzione nel codice e eseguirne il debug. – gilly3

Sebbene la soluzione di epascarello funzioni, esiste una soluzione più rapida per il debugging dei file minificati. Prendi in considerazione l'utilizzo di JavaScript source maps. I moderni Firefox e Chrome li supportano.

L'idea della mappa sorgente è dire browser dove trovare la versione non ancora terminata. Quando avvii il debug negli strumenti di sviluppo del browser, il browser carica la versione non terminata dello script e mostra il codice JavaScript di facile lettura (o codice che hai compilato in JavaScript) nel debugger.

fonte

2013-09-27 07:09:19

Solo un rapido commento perché non mi era chiaro: la versione minificata è ciò che viene analizzato ed eseguito non nella versione non ancora terminata. –

@DanielSokolowski sì, hai ragione.Browser esegue la versione minificata, ma mostra quella originale (non ridotta) negli strumenti DEV, in modo da poter eseguire l'esecuzione passo passo e osservare le variabili. –

Per aggiungere un NUOVO file che si può usare qualcosa come uno di un altro post:

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

Questo script tampermonkey può sostituire qualsiasi file JS su una pagina web con la vostra abitudine uno da 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);

fonte

2016-05-10 21:11:31

Tentativo interessante. Quando eseguo questo codice non raggiunge lo stadio 3. Qualche idea sul perché? – Clone

Raggiunge lo stadio 2? –

Grazie per la risposta! Sì, lo fa davvero. In realtà ho creato una discussione su questo problema http://stackoverflow.com/q/43444796/6130540. – Clone

-3

Aggiungi qualcosa al tuo URL per distinguere tra il nostro contesto dev e prod; esempio: http://url_of_prod.com

http://url_of_dev.com?debug=true

e poi, utilizzare alcuni javascript per verificare se il GET variabile di debug è acceso o meno o controllare l'URL con
se (window.location.host.indexOf ('url_of_dev ')> -1) ...

utilizzare, quindi una funzione del carico per caricare o no il file, come in questo esempio: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

fonte

2016-11-22 15:19:31 Ademus

Problemi correlati