Comment résoudre l'erreur "DevTools failed to load SourceMap: Could not load content for chrome-extension://..." ?

Si vous êtes développeur web, vous vous êtes rendu certainement compte que de nouveaux messages d'avertissement sont apparus dans les consoles des navigateurs basées sur Chromium (Google Chrome, Microsoft Edge, Opera…). Le message "DevTools failed to load SourceMap: Could not load content for chrome-extension://..." peut être présent lors de l'affichage de certains sites, mais aussi dans vos propres développements. Ce message est dû à l'absence de fichiers "source map" pour un ou plusieurs de vos fichiers JavaScript.

Depuis que le langage JavaScript a vu son utilisation exploser, les librairies sont devenues de plus en plus imposantes. Les fichiers JavaScript prennent donc plus de taille, et donc de temps à charger. Pour diminuer la taille des fichiers, un système de minification du code a été mis en place par la plupart des librairies. Minifier le code consiste à supprimer tous les espaces et commentaires dans le code pour en générer une version la plus compressée possible, qui tient donc dans une seule grande ligne. Le code prend ainsi moins de place et est plus rapide à charger. Il est par contre très difficile de détecter une erreur dans ces fichiers, car la console du navigateur ne va pas pouvoir se repérer. C'est pour cette raison que les fichiers "source map" existent. Ils permettent au navigateur de se retrouver dans les fichiers compressés et de pouvoir indiquer précisément les sources d'erreur quand un problème survient.

Si ce message d'erreur s'affiche et fait référence à une librairie externe que vous utilisez (Bootstrap, VueJS, React…), vous pouvez simplement vous rendre sur le site officiel de la librairie et récupérer le fichier en ".map". Il est fourni dans l'archive contenant les fichiers de codes de la librairie. Le fichier "source map" doit être placé dans le même dossier que le fichier JavaScript de la librairie. Le navigateur peut alors l'utiliser. Si vous utilisez un CDN, le fichier "source map" est systématiquement présent avec la librairie.

Si le message fait référence à une librairie que vous avez créée, il est possible de générer un fichier "source map". Les outils JavaScript en ligne de commande, comme Grunt, Gulp ou Google Closure, fournissent des plugins ou des paramètres pour créer un fichier "source map".

Si vous souhaitez juste ne pas afficher le message, la console de développeur a un paramètre dédié. Cliquez sur l'icône en forme d'engrenage pour afficher les paramètres. Dans la partie "Sources", décochez les cases "Activer les cartes sources JavaScript" et "Activer les cartes sources CSS" pour faire disparaître les messages d'avertissement.