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 !