Les secrets des outils de développement du navigateur

<p>1. La Console offre bien plus de fonctions que `log()`<br /> - options de filtrage<br /> - `{}` : afficher ensemble la valeur et le nom d’une variable<br /> - `warn()/info()/error()` : niveaux de log<br /> - `assert()` : afficher uniquement sous certaines conditions<br /> - `trace()` : voir qui a effectué l’appel <br /> - `group()` : regrouper les messages pour pouvoir les déplier/replier <br /> - `table()` : afficher les informations sous forme de tableau <br /> - `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br /> &nbsp;&nbsp;`$$('a').map(a =&gt; {`<br /> &nbsp;&nbsp;&nbsp;`return {url: a.href, text: a.innerText}`<br /> &nbsp;&nbsp;`})`<br /> <br /> 2. Laisser des logs sans accès au code source<br /> - Live Expressions : vérifier les valeurs de variables qui changent en temps réel<br /> - 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<br /> <br /> 3. Laisser des logs en dehors du navigateur <br /> - Débogueur VS Code<br /> <br /> 4. Injecter du code sur n’importe quel site (navigateurs Chromium : Edge, Chrome, Brave..)<br /> - Snippets : exécuter un script pour le site web actuel <br /> - Overrides : enregistrer une copie d’un script distant, la modifier, puis la substituer au chargement de la page <br /> <br /> 5. Possibilité d’inspecter et de déboguer dans encore plus d’endroits (navigateurs Chromium)<br /> - 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<br /> - MS Edge Tools for VS Code <br /> <br /> 6. Des secrets moins reluisants<br /> - 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 <br /> - 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 ?<br /> &nbsp;→ Edge souhaite introduire un Focus Mode. Au lieu de tout afficher, il ne montrerait que les outils nécessaires selon les cas d’usage <br /> &nbsp;→ 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 <br /> - Il existe encore une rupture entre l’écriture du code et le débogage du résultat final <br /> &nbsp;→ Comment faire en sorte que les changements effectués dans les outils de développement soient répercutés dans le code ?<br /> &nbsp;→ 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<br /> &nbsp;→ 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<br /> <br /> 7. Vous êtes à la fois l’audience et le client des outils de développement <br /> &nbsp;→ Donnez votre avis via Report a Bug / Request a Feature, etc. </p>

[galadbran]

<p>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.</p>

[laeyoung]

<p>Article sur `console.log()`<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

<p>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.</p>