Les secrets des outils de développement du navigateur

1. La Console offre bien plus de fonctions que log()

• options de filtrage

• {} : afficher ensemble la valeur et le nom d’une variable

• warn()/info()/error() : niveaux de log

• assert() : afficher uniquement sous certaines conditions

• trace() : voir qui a effectué l’appel

• group() : regrouper les messages pour pouvoir les déplier/replier

• table() : afficher les informations sous forme de tableau

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

   return {url: a.href, text: a.innerText}

  })

2. Laisser des logs sans accès au code source

• Live Expressions : vérifier les valeurs de variables qui changent en temps réel

• logpoints : une forme spéciale de point d’arrêt qui affiche un log lorsque cette ligne est exécutée. Techniquement, cela revient à pouvoir ajouter console.log n’importe où sur la page web

3. Laisser des logs en dehors du navigateur

• Débogueur VS Code

4. Injecter du code sur n’importe quel site (navigateurs Chromium : Edge, Chrome, Brave..)

• Snippets : exécuter un script pour le site web actuel

• Overrides : enregistrer une copie d’un script distant, la modifier, puis la substituer au chargement de la page

5. Possibilité d’inspecter et de déboguer dans encore plus d’endroits (navigateurs Chromium)

• Toute la famille Electron est prise en charge : GitHub Desktop, VS Code, et même les Developer Tools du navigateur peuvent être débogués avec les Developer Tools eux-mêmes

• MS Edge Tools for VS Code

6. Des secrets moins reluisants

• Les gens n’utilisent qu’une partie des outils de développement. C’est probablement dû au manque de documentation ; beaucoup de temps a été investi pour en produire, mais cela ne semble pas être la solution

• Les outils de développement deviennent de plus en plus complexes et il est facile d’être submergé par la quantité de fonctions. N’y aurait-il pas un moyen de les améliorer ?

 → Edge souhaite introduire un Focus Mode. Au lieu de tout afficher, il ne montrerait que les outils nécessaires selon les cas d’usage

 → Des Informational Overlays sont également en cours de développement. L’idée est de fournir de l’aide directement visible dans les outils de développement

• Il existe encore une rupture entre l’écriture du code et le débogage du résultat final

 → Comment faire en sorte que les changements effectués dans les outils de développement soient répercutés dans le code ?

 → Une option consiste à remplacer les outils de développement par VSCode, afin que l’utilisation de l’outil modifie directement les fichiers sur le disque dur

 → Une autre consiste, via une extension VSCode, à permettre que les modifications faites avec les outils de développement puissent aussi être appliquées aux fichiers sur le disque

7. Vous êtes à la fois l’audience et le client des outils de développement

 → Donnez votre avis via Report a Bug / Request a Feature, etc.

[galadbran]

Sous un angle un peu différent, il y a aussi le fait que les utilisateurs et les développeurs disposent des mêmes outils. Les web apps doivent donc sans doute accorder beaucoup d’attention à la manière de se prémunir contre les utilisateurs malveillants qui recourent à des méthodes détournées.

[laeyoung]

Article sur console.log()

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

Même lorsqu’il existe de bonnes fonctionnalités, il me semble que la présence ou non de bons exemples dans la documentation pèse fortement dans la décision.