Mozilla a annoncé cette semaine de nouvelles mises à jour dans Firefox DevTools, son outil de développement permettant d’examiner, de modifier et de déboguer du code HTML, CSS et JavaScript sur ordinateur ou sur mobile. Les mises à jour, a annoncé l'équipe de Firefox DevTools, concernent essentiellement le débogage avec Firefox DevTools et visent à apporter plus de fiabilité et de performance aux développeurs, surtout dans la construction des applications Web modernes. Avec cette nouvelle à jour, Mozilla a promis aux utilisateurs de Firefox 67 et les versions supérieures, une expérience de débogage solide.Le débogage de script est l’une des fonctionnalités de productivité les plus puissantes et les plus complexes de la boîte à outils d’un développeur Web. La mise à jour de Firefox DevTools pour Firefox 67 permet aux développeurs de bénéficier de plus de rapidité et de fiabilité dans leur processus de débogage et ainsi améliorer leur performance. D’après les explications de l’équipe de Firefox DevTools, les nouveautés dans DevTools tournent autour de quatre points essentiels notamment un temps de chargement désormais plus rapide, un support remodelé pour source map, une réduction des frais généraux lorsque le débogueur n’est pas ciblé et des correctifs pour corriger certains problèmes liés aux points d’arrêt perdus, aux pauses dans le mauvais script et bien d'autres encore.
Le temps d’ouverture du débogueur est désormais de 30 % fois plus rapide que dans les versions antérieures. L’équipe de Firefox DevTools a expliqué avoir éliminé les pires performances qui ont rendu le débogueur lent à s’ouvrir, ce qui a permis de constater après des tests de performance que le débogueur est maintenant 30 % fois plus rapide. Ensuite, l’équipe a indiqué qu’un back-source source map remodelé et plus rapide donne l’illusion que vous déboguez votre code, pas la sortie compilée de Babel, Webpack, TypeScript, vue.js, etc.
Notons qu’une source map est un fichier grâce auquel le débogueur peut faire le lien entre le code exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur. La génération de sources map correctes pouvant être difficile, l’équipe a expliqué avoir mis au point des outils (Babel, Vue.js, etc.) au profit de l’ensemble de l’écosystème. Grâce au support source map plus rapide (et à d’autres travaux supplémentaires), les prévisualisations sont maintenant affichées beaucoup plus rapidement lorsque vous passez la souris sur une variable pendant que l'exécution est suspendue.
D’un autre côté, en combinant les sources map avec l'analyseur Babel, le débogueur de Firefox peut désormais prévisualiser les variables d'origine qui vous intéressent et masquer les informations inutiles des compilateurs et des bundles. Cela peut même fonctionner dans la console, en résolvant automatiquement les identifiants conviviaux en leurs noms réels et détaillés en arrière-plan. En raison de ses performances, vous devez activer cette fonctionnalité séparément en cochant la case “Map” dans le panneau “Scopes” du débogueur.
À part cela, dans cette mise à jour de Firefox DevTools, de nombreux bogues de longue date au sein de l'architecture du débogueur ont été corrigés en résolvant certains des problèmes les plus courants et les plus frustrants liés aux points d'arrêt perdus et aux pauses dans le mauvais script. L’outil est également amélioré pour permettre aux développeurs JavaScript de déboguer de façon plus transparente.
De même, a expliqué l’équipe de Firefox DevTools, les développeurs Web utilisent aujourd’hui le Web moderne et doivent être en mesure de bénéficier des concepts de premier ordre dans DevTools. À l'aide du nouveau panneau Threads, vous pouvez basculer entre différents contextes d'exécution et les suspendre indépendamment. Cela permet aux scripts d'être débogués dans le même panneau Debugger, de la même manière que d'autres navigateurs modernes.
Tout ceci dit, certains estiment que l’outil de développement Web de Firefox a encore du retard à rattraper sur celui de Chrome. Selon eux, ils manquent encore certaines fonctionnalités à Firefox DevTools qu’on observe dans Chrome DevTools comme le débogage des sockets Web. « Corrigez-moi si je me trompe, mais je crois que le débogage de socket Web n'est pas pris en charge par Firefox DevTools. Je me suis heurté à cela au cours d’un de mes travaux. Chrome me montre quelles requêtes sont envoyées sur des websockets, mais pas Firefox non », a déclaré l’un d’entre eux.
Chrome DevTools, rappelons-le, est un ensemble d’outils de développement Web directement intégrés au navigateur Google Chrome. Chrome DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui vous aide finalement à créer de meilleurs sites Web, plus rapidement.
Source : Mozilla
Et vous ?
Qu'en pensez-vous ? Quelle est votre préférence entre Chrome DevTools et Firefox DevTools ? Pourquoi ?Voir aussi
Firefox 67 : Mozilla prévoit d'ajouter une nouvelle technique anti-fingerprinting appelée letterboxing, empruntée au navigateur Tor Firefox 68 Nightly et Firefox Bêta 67 débarquent avec des protections intégrées contre le fingerprinting et le cryptojacking La part de marché de Firefox augmente pour la deuxième fois consécutive en 2 mois. Le navigateur libre pourrait-il survivre auprès de Chrome ? 
