La page d'exception de Symfony a été repensée avec une timeline cliquable remplaçant l'affichage empilé des exceptions, facilitant la navigation vers la cause racine. Un bouton « Copy as text » a également été ajouté pour formater automatiquement la stack trace et les logs en texte structuré, optimisé pour être collé directement dans un assistant IA, reflétant l'évolution des habitudes de débogage.
Cette refonte marque un changement de cible pour la page d'erreur, passant d'un outil conçu pour l'œil humain à une interface adaptée aux machines. Le texte copié est organisé en sections claires (stack trace et logs), avec une hiérarchie préservée, évitant les manipulations manuelles souvent nécessaires auparavant.
La discussion publique autour de cette PR a déjà permis des ajustements, comme la modification de la couleur du header, illustrant une approche collaborative dans l'itération du design. Cette évolution soulève aussi des questions sur la standardisation des formats d'erreur comme contrats d'API.
Les sourcemaps sont des fichiers JSON qui permettent de faire le lien entre le code minifié et exécuté par le navigateur et le code source original, facilitant ainsi le débogage en production. Elles contiennent des informations comme les chemins des fichiers sources, les noms des variables et fonctions d'origine, ainsi que des mappings précis pour retrouver la position exacte dans le code original. Ces outils sont essentiels pour les développeurs, mais ils exposent aussi la structure et le contenu du code source, posant des risques de sécurité.
L'auteur explique leur fonctionnement technique, notamment les champs clés comme sources, names et mappings, qui assurent la correspondance entre le code minifié et le code original. Les sourcemaps peuvent inclure même le contenu complet des fichiers sources (sourcesContent), ce qui simplifie le débogage mais augmente l'exposition des données. Leur format compact (base64 VLQ) optimise leur taille pour le transfert.
Enfin, l'article souligne l'importance de bien configurer les sourcemaps pour éviter de divulguer des informations sensibles, tout en profitant de leurs avantages pour le développement et le diagnostic d'erreurs. Une gestion prudente est recommandée pour concilier observabilité et sécurité.
L’article d’Alan Norbauer présente 67 astuces méconnues pour exploiter pleinement les outils de débogage des navigateurs, destinées aux développeurs intermédiaires ou avancés. Il met en avant des techniques comme les logpoints (points de trace) pour afficher des logs sans interrompre l’exécution, ou l’utilisation de conditional breakpoints (points d’arrêt conditionnels) avec des expressions à effets de bord pour modifier le comportement du programme en temps réel.
Parmi les méthodes détaillées, on trouve le profilage de performance rapide via console.time et console.timeEnd, ou encore le traçage des appels de fonctions pour identifier des anomalies comme des appels non appariés. L’auteur explique aussi comment exploiter le watch pane pour surveiller des variables ou des états du DOM, ou encore contourner des chargements de page pour gagner du temps lors du débogage.
Enfin, l’article couvre des astuces spécifiques comme la pause sur changement d’URL, l’inspection du DOM avec JavaScript désactivé, ou la surveillance d’événements pour des éléments précis. Ces techniques permettent d’optimiser le débogage en exploitant des fonctionnalités souvent sous-utilisées des outils de développement.
Cet article propose des habitudes de productivité concrètes pour les ingénieurs. Il aborde trois stratégies principales : rester débloqué en parallélisant les implémentations (backend vs frontend par exemple) pour minimiser les temps d'inactivité, réduire le temps de débogage en comprenant la structure du code et en investissant dans la journalisation, et investir dans l'outillage, notamment dans le domaine de l'IA, pour automatiser les tâches répétitives. Ces habitudes visent à améliorer l'efficacité et à surmonter les défis courants dans le développement logiciel.
Personnaliser l'emplacement de ses logs Symfony2 - par défaut, tout est regroupé dans un seul fichier ce qui rend leur lecture difficile
Super astuce
Une feuille de style pouvant mettre en valeur les erreurs de balisage HTML5 !