Comment remplacer site Javascript de production avec Javascript local?

Sur mon site de production, j'ai compilé Javascript.Comment remplacer site Javascript de production avec Javascript local?

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

Il serait pour le débogage très convient si je pouvais faire mon navigateur remplacer par

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

Je sais que je pouvais manipuler le DOM en utilisant quelque chose comme userscripts Greasemonkey, mais je ne pouvais pas venir avec une solution qui empêcherait l'exécution de "mycode.min.js".

Des idées?

Source

2010-10-14 Julius Eckert

La façon dont je le fais:

Téléchargez et installez Fiddler si vous êtes sur Windows.
Activez-le pour intercepter le trafic http [IE/Chrome le fait par défaut, Firefox - activez-le par le biais des installations supplémentaires]
Chargez la page en question.
Recherchez le fichier que vous souhaitez remplacer dans la liste de trafic http à gauche et cliquez dessus.
Sur la droite, il y a un onglet AutoResponder. Clique dessus.
Cliquez sur la case pour « activer les réponses automatiques »
Cliquez sur Ajouter .. bouton
Le 2ème menu déroulant à droite, choisissez l'option qui dit « trouver un fichier »
Localisez le fichier dans la boîte de dialogue et cliquez sur enregistrer
Répétez les étapes 4-9 jusqu'à ce que vous remplacez tous les fichiers que vous souhaitez remplacer
actualisez la fenêtre du navigateur et de vos nouveaux fichiers js exécutez

Inst Si vous remplacez le fichier js, vous pouvez remplacer le fichier html et modifier les liens js sur la page. Vous pouvez installer Charles si vous utilisez un Mac/Linux. (Pas libre, a un procès) Les étapes sont similaires, mais pas les mêmes.

Si vous utilisez Google Closure pour compresser des fichiers, vous pouvez installer leur plug-in pour créer le source mapping.

Source

2010-10-14 19:04:05 epascarello

Devrait fonctionner. Mais je vais chercher d'autres solutions proxy qui sont plus faciles à scripter et gratuit. Quelqu'un peut-il recommander un bon pour linux/osx? –

MISE À JOUR: Je me suis écrit un petit proxy qui transmet tout de mon serveur de production et la chaîne remplace le

Qu'en est-il de l'utilisation d'un sous-domaine comme http://static.example.com pour les fichiers statiques (par exemple les fichiers .js) et la modification du fichier hôte?

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

Ajoutez la ligne suivante à la hostfile (/etc/hosts pour Linux, C:\WINDOWS\System32\drivers\etc\host):

static.example.com 127.0.0.1

Bien sûr, vous avez à lancer un serveur avec les fichiers de http://static.example.com/ sur 127.0.0.1.

Une autre solution utilise un serveur proxy (local) comme Privoxy pour rediriger http://example.com/js/ vers http://localhost/js/.

Source

2010-10-14 18:56:45 Lekensteyn

Si seulement les services informatiques n'a pas de verrouiller l'accès d'édition à th est classé dans les lieux de travail de l'enfer pour des raisons de «sécurité». > :) – epascarello

Bonne idée. Je le ferai. Mais cette solution implique toujours d'avoir tout le code JS dans un fichier. Serait parfait pour les avoir tous séparés. –

En supposant vos scripts sont tout simplement la version brute du fichier de production, vous pouvez simplement se fissurer ouvrir votre débogueur ou console JS et importer vos scripts préférés:

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

Ce faisant, remplacera les fonctions définies à l'origine et les variables . Vous devrez ré-exécuter manuellement window.onload. Si vous avez un script qui s'exécute immédiatement ou en charge qui change beaucoup sur la page, vous pouvez avoir du travail à faire pour revenir à l'état d'origine.

Bonne chance!

Source

2010-10-14 19:47:56 gilly3

Ce n'est pas une bonne solution si le code original manipule la page ou ajoute des gestionnaires d'événements. Vous finirez par causer plus de problèmes. – epascarello

Bien sûr ... j'en ai dit autant dans ma réponse. Mais si tout ce que vous avez à faire est de déboguer votre code, il suffit de remplacer les fonctions par cette technique pour pouvoir définir des points d'arrêt dans votre code et le déboguer. – gilly3

Bien que la solution d'epascarello fonctionne, il existe une solution plus rapide pour le débogage de fichiers minifiés. Envisagez d'utiliser JavaScript source maps. Firefox et Chrome modernes les prennent en charge. L'idée de la carte source est de dire le navigateur où trouver la version non-vérifiée. Lorsque vous démarrez le débogage dans les outils de développement de votre navigateur, le navigateur charge une version non-modifiée du script et vous montre le code JavaScript facile à lire (ou quel que soit le code que vous avez compilé en JavaScript) dans le débogueur.

Source

2013-09-27 07:09:19

Juste un petit commentaire car il n'était pas clair pour moi: la version minifiée est ce qui est analysé et exécuté pas la version non-vérifiée. –

@DanielSokolowski oui, vous avez raison.Le navigateur exécute la version minifiée, mais vous montre l'original (non réduit) dans les outils DEV, de sorte que vous pouvez exécuter l'exécution étape par étape et regarder les variables. –

Pour ajouter un NOUVEAU fichier vous pouvez utiliser quelque chose comme l'un de l'autre poste:

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

Ce script tampermonkey peut remplacer un fichier JS sur une page Web avec votre commande un d'un domaine:

// ==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);

Source

2016-05-10 21:11:31

Tentative intéressante. Quand je cours ce code, il n'atteint pas le stade 3. Des idées sur pourquoi? – Clone

At-il atteindre le stade 2? –

Merci d'avoir répondu! Oui, en effet. J'ai en fait créé un fil sur ce problème http://stackoverflow.com/q/43444796/6130540. – Clone

-3

Ajoutez quelque chose à votre URL pour faire la distinction entre y notre contexte de développement et de production; exemple: http://url_of_prod.com

http://url_of_dev.com?debug=true

puis, utilisez javascript pour vérifier si l'EEG variable de débogage est activée ou non, ou vérifier l'URL avec
si (window.location.host.indexOf ('url_of_dev «)> -1) ...

Utilisez ensuite une fonction de charge pour charger ou non votre fichier, comme dans cet exemple: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

Source

2016-11-22 15:19:31 Ademus

Questions connexes

Comment remplacer site Javascript de production avec Javascript local?

Répondre

Questions connexes