Activation des SourceMaps JavaScript sur MediaWiki

De Wiki Valley - MediaWiki hosting and consulting
Aller à :navigation, rechercher

27 septembre 2023 à 16:20

Ce billet sera un peu technique et à destination des développeurs en JavaScript dans l’environnement MediaWiki, y compris les développeurs de gadgets.

Depuis peu, les source maps (cartographies du code source) du JavaScript sont disponibles sur MediaWiki grâce au travail de Tim Starling et Krinkle notamment (tâche Phabricator). En tant que développeur JavaScript, cela nous permet de visualiser la source non-minifiée des fichiers JavaScript, alors même que c’est la version minifiée qui est exécutée par le navigateur : cela permet de bénéficier, dans l’environnement de production, à la fois de la vitesse des fichiers minifiés et des sources originales JavaScript.

C’est pour l’instant disponible dans la version master de MediaWiki (1.41.0-alpha depuis le 26 septembre) et sur MediaWiki.org depuis le 13 septembre. Sauf problème, il est probable que ça sera disponible dans la future version 1.41.0 de MediaWiki.

Côté utilisateur-développeur, voilà comment faire :

  1. Aller sur une page où les source maps sont activés, par exemple la page Manual:FAQ de MediaWiki.org
  2. Ouvrir les outils Développeur (F12 sur Firefox et Chrome), sélectionner l’onglet Sources ou Débogueur pour afficher la visualisation des fichiers JavaScript
  3. Il devrait y avoir dans l’arborescence le dossier www.mediawiki.org > w > resources > src par exemple ; cela correspond directement aux sources de MediaWiki
    Outils Développeur sur Firefox avec l’arborescence des fichiers JavaScript grâce aux SourceMaps
  4. Si ce dossier d’exemple n’apparaît pas sous Firefox, c’est qu’il faut cocher dans les préférences de cet onglet Débogueur la case « Cartographies de code source »
    Dans Firefox, activer la case « Cartographies de code source » dans les préférences de l’onglet Débogueur
  5. Noter qu’il y a un dossier spécial www.mediawiki.org > w > virtual-resource : ce sont les fichiers JavaScript générés à la volée n’ayant pas de fichier réel correspondant, comme les gadgets
  6. Enfin, si une exception JavaScript est générée dans la console, il est possible de cliquer et d’arriver directement dans la source originale (alors que c’est bien dans la version minifiée que l’exception a été déclenchée).
    Localisation d’une exception JavaScript dans la source originale
Mots clés : Wiki, MediaWiki, JavaScript