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