Substituer un fichier sur un server par un autre, sous Chrome (Network file forwarding)

Lors d'une phase de debug, notamment en PROD, on souhaite parfois modifier un fichier, par exemple JavaScript pour faire des tests.

Pour cela, il est possible de modifier les fichiers statiques téléchargés par le browser dans le panel "Source" du devtools de la plupart des navigateurs (dans cet article, il s'agira de Chrome).

Cependant, cette solution a des limites :

• Lors d'un rechargement, les modifications locales sont perdues
• Parfois, il est nécessaire de debugger un fichier chargé dès la homepage
• Lorsque l'on modifie des fichiers en local, dans certains cas le devtools peut planter et donc les modifications locales sont perdues

Une solution possible consiste à substituer de manière permanente (et non local) le fichier à modifier du serveur par une autre copie de ce fichier (contenant nos modifications), qui serait délivré par un autre serveur via un "proxy".

Au lieu de mettre en place un proxy, certaines extensions (Chrome) sont disponibles, et permettent de proxifier les requêtes, pour servir des fichiers provenant par exemple un serveur local.
Dans cet article, il s'agit de Ressource-override, qui utilise l'API webRequest, pour intercepter les requêtes HTTP, et replacer leur contenu.

Dans cet article, je souhaite servir substituer un fichier JS d'un site, par une copie que j'héberge sur un serveur local (http-server sous NodeJS).

1) Mise en place du serveur qui contiendra la version modifiée du fichier JS

npm install -g http-server

http-server directoryContainingJSFile -p 1337

2) Mise en place des règles de substitution avec l'extension Ressource-override

Debugger du JS exécuté avec eval()

Certaines librairies, dont les libraires de chargement comme RequireJS, chargent des scripts JS et les évaluent avec eval(). Le problème avec ce genre de chargement, est qu'il rend plus difficile le debug du JS avec les outils du navigateur. En effet, les points d'arrêt ne peuvent être posés que sur du code situé dans un fichier dont le nom a été défini par l'utilisateur.Cependant, dans le cas d'un code executé par eval, le contenu a été extrait hors de son fichier d'origine, puis est exécuté dans la VM de Chrome. Le plus souvent, le code est situé dans une source dont le nom est généré dynamiquement à chaque chargement, ex : "VM 7799".

"Breakpoints can be set in dynamic JavaScript only if it has a user supplied name." Sources

Cependant, il existe une solution alternative consistant à "dire à Chrome" de donner un nom spécifique et fixe au fichier lorsqu'il sera exécuté dans la VM, en utilisant les sourceURL.

Dans le fichier qui sera exécuté par eval, il faut placer à la fin l'instruction suivante :

//# sourceURL=dynamicScript.js

Cette instruction, destinée au navigateurs, aura pour effet de ne pas générer à chaque chargement, un nom de fichier différent dans la VM, mais d'utiliser celui définit via la sourceUrl.