J'en parlais dans mon dernier article sur la sortie d'Angular 12, une nouvelle extension Angular DevTools vient remplacer feux Augury. Malheureusement celle-ci n'est pas compatible Firefox. Enfin presque.
Un utilisateur de Firefox a testé l'installation de l'extension sur Firefox et elle fonctionne. J'ai testé de mon côté, en effet aucun souci en vu pour l'instant 😎 Par contre c'est moins pratique sur pour Chrome, il faut l'avouer…
Compiler l'extension
Comme l'extension n'est pas distribué pour Firefox, il va falloir la compiler. Donc les étapes :
git clone https://github.com/rangle/angular-devtools.git
cd angular-devtools
npx yarn install
# ou npx yarn install --ignore-engines (si comme moi vous avez un node > 14
npx yarn build:chrome
Normalement, tout devrait s'être compilé et vous devriez avoir un dossier dist/shell-chrome qui contient l'extension non bundlé.
Ajouter une extension à Firefox via source
À la base cette technique est plutôt pensée pour faire du développement d'application, mais on peut tout à fait l'utiliser pour tester des extensions.
Les étapes :
- se rendre sur la page about:debugging
- cliquer sur "Charger un module complémentaire temporaire…"
- aller dans le dossier dist/shell-chrome qu'on a généré précédemment et choisir manifest.json
- l'extension devrait être chargée
Ensuite on peut aller sur une application Angular en mode développement, et dans les outils développeur on peut aller dans l'onglet Angular et explorer l'application !
C'est bon ça marche ?
Du coup en effet on peut utiliser Angular DevTools sur Firefox, mais c'est une extension temporaire. Du coup à chaque redémarrage de Firefox il faut charger de nouveau l'extension.
Ensuite à chaque mise à jour de l'extension, il faut mettre à jour le dépôt qu'on a cloné et recompiler l'extension.
Mais en attendant que le support officiel de Firefox soit effectif, on peut l'utiliser comme ça !
Source :
Crédit photo : https://pixabay.com/photos/rabbit-cartoon-beach-sand-drawing-1664927/