Blame : suivi de la dernière modification de chaque ligne d’un fichier

Quelles données fournies ?

Voici un exemple de ce qu’affiche la commande git blame :

44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  1) import { ApiMode, Widgets } from "@payment/widgets";
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  2) import { useEffect } from "react";
9703e6bc (Ada Lovelace    2026-07-03 09:55:14 +0200  3)
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  4) import "./PaymentWidget.css";
^11aa3d4 (Ada Lovelace    2026-07-03 09:45:14 +0200  5)
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  6) const WIDGET_ID = "payment-widget";
^11aa3d4 (Ada Lovelace    2026-07-03 09:45:14 +0200  7)
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  8) export default function PaymentWidget({ merchantId }) {
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200  9)   useEffect(() => {
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 10)     const mode = process.env.NODE_ENV === "production" ? "PRODUCTION" : "TEST";
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 11)     const widgets = Widgets.initialize(merchantId, ApiMode[mode]);
9703e6bc (Ada Lovelace    2026-07-03 09:55:14 +0200 12)
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 13)     widgets.add(Widgets.PaymentPlans, {
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 14)       container: `#${WIDGET_ID}`,
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 15)       purchaseAmount: cents,
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 16)       locale: "fr",
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 17)     });
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 18)   }, [merchantId, cents]);
9703e6bc (Ada Lovelace    2026-07-03 09:55:14 +0200 19)
44e0f450 (Charles Babbage 2026-07-03 09:59:14 +0200 20)   return <div style={\{ zoom: 0.9, maxWidth: "max-content" \}} id={WIDGET_ID} />;
^11aa3d4 (Ada Lovelace    2026-07-03 09:45:14 +0200 21) }

La lecture n’est pas toujours évidente selon la largeur d’écran. Certains outils permettent toutefois de faciliter l’exploitation de la commande. C’est le cas par exemple dans l’éditeur VSCode : l’information fournie au survol est interprétée de blame.

Que voit-on ici ?

• La première colonne correspond à l’identifiant du dernier commit ayant modifié la ligne ;
• La seconde donne l’identité du commiter et l’horodatage du commit ;
• Viennent ensuite le numéro de ligne et la ligne dans son état actuel.

Affiner l’affichage

On peut choisir différentes options pour obtenir un affichage plus digeste selon notre contexte. On peut par exemple :

• préciser l’intervalle des lignes à analyser dans un fichier : git blame -L 10,23 chemin-du-fichier ;
• retirer de l’affichage les informations d’auteur et de date : git blame -s ;
• préciser le format de date : git blame --date=format-local:"%d/%M/%Y" ;
• restreindre l’affichage aux commits vieux de 3 semaines et plus : git blame --since=3.weeks chemin-de-fichier ;
• restreindre l’affichage aux commits vieux de moins de 2 jours : git blame --until=2.days chemin-de-fichier ;
• et d’autres options pour des cas d’usage moins courants que je ne détaillerai pas ici.

Blame tuning

On peut pousser la personnalisation de l’affichage jusqu’à demander une coloration spéciale selon l’ancienneté des commits. Ceci n’est valable que dans les terminaux qui supportent la coloration.

Voici un exemple de configuration :

# On active la coloration en demandant la mise en évidence des commits les plus récents
git config --global blame.coloring highlightRecent
# On spécifie les couleurs selon l'âge des commits
git config --global color.blame.highlightRecent "237, 20 month ago, 238, 19 month ago, 239, 18 month ago, 240, 17 month ago, 241, 16 month ago, 242, 15 month ago, 243, 14 month ago, 244, 13 month ago, 245, 12 month ago, 246, 11 month ago, 247, 10 month ago, 248, 9 month ago, 249, 8 month ago, 250, 7 month ago, 251, 6 month ago, 252, 5 month ago, 253, 4 month ago, 254, 3 month ago, 231, 2 month ago, 230, 1 month ago, 229, 3 weeks ago, 228, 2 weeks ago, 227, 1 week ago, 226"

Pourquoi l’information donnée par blame peut-être erronée ?

Prenons un exemple à partir de l’affichage précédent. La ligne 10 représente la définition d’une fonction. Admettons que son état actuel soit défaillant : il manque un paramètre cents. On s’attend à la ligne suivante :

export default function PaymentWidget({ merchantId, cents }) {

La lecture naïve de blame pourrait nous faire croire que Charles Babbage serait l’auteur de cette erreur. La commande ne nous renseigne pourtant pas sur la modification qu’il a effectué sur la ligne. Il se peut qu’il ait modifié autre chose. Dans notre exemple, c’est le cas. Charles a passé un outil de nettoyage du code qui a simplement retiré un espace en fin de ligne. Il n’est donc pas l’auteur de l’erreur.

Comment repérer plus finement l’origine de l’erreur

Avant toute chose, cette démarche ne devrait pas être entamée avec pour objet de punir l’auteur d’un bug. Dans le cas contraire, peut-être serait-il utile de revoir votre méthode de management 😉.

Revenons à Git : il propose une commande permettant de suivre les évolutions au sein d’un fichier, au sein d’une méthode/function ou en définissant l’intervalle des lignes qui nous intéresse. Je privilégie généralement cette seconde option que je trouve plus passe-partout. Cette commande, vous la connaissez probablement déjà, c’est git lg mais avec une option particulière : -L.

Pour notre cas d’exemple, nous pouvons analyser les lignes entourant la définition de notre déclaration de fonction :

git log -L 8,9:src/components/PaymentWidget.js

On obtiendra un résultat équivalent à ce qui suit :

commit 44e0f45
Author: Charles Babbage <charles@comprendre-git.com>
Date:   Fri Jul 3 09:59:14 2026 +0200

    refactor(js): format code, remove trailing spaces

diff --git a/PaymentWidget.js b/PaymentWidget.js
index 3cae6d5..7730a1d 100644
--- a/PaymentWidget.js
+++ b/PaymentWidget.js
@@ -8,7 +8,2 @@
-export default function PaymentWidget({ merchantId }) {
-  useEffect(() =>
-    {
-    const mode = process.env.NODE_ENV === 'production' ?
-    'PRODUCTION' :
-    'TEST'
-    const widgets = Widgets.initialize(merchantId, ApiMode[mode])
+export default function PaymentWidget({ merchantId }) {
+  useEffect(() => {

commit 73a775e
Author: Jean Bon <jean@comprendre-git.com>
Date:   Fri Jul 3 09:56:11 2026 +0200

    feat(payment): change API mode for production env

diff --git a/PaymentWidget.js b/PaymentWidget.js
index e094114..3cae6d5 100644
--- a/PaymentWidget.js
+++ b/PaymentWidget.js
@@ -8,4 +8,7 @@
-export default function PaymentWidget({ merchantId, cents }) {
-  useEffect(() => {
-    const mode = process.env.NODE_ENV === 'production' ? 'LIVE' : 'TEST'
-    const widgets = Widgets.initialize(merchantId, ApiMode[mode])
+export default function PaymentWidget({ merchantId }) {
+  useEffect(() =>
+    {
+    const mode = process.env.NODE_ENV === 'production' ?
+    'PRODUCTION' :
+    'TEST'
+    const widgets = Widgets.initialize(merchantId, ApiMode[mode])

commit 9703e6b
Author: Ada Lovelace <ada@comprendre-git.com>
Date:   Fri Jul 3 09:55:14 2026 +0200

    feat(payment): initialize widget from API

diff --git a/PaymentWidget.js b/PaymentWidget.js
index b109715..e094114 100644
--- a/PaymentWidget.js
+++ b/PaymentWidget.js
@@ -5,1 +8,4 @@
-export default function PaymentWidget() {
+export default function PaymentWidget({ merchantId, cents }) {
+  useEffect(() => {
+    const mode = process.env.NODE_ENV === 'production' ? 'LIVE' : 'TEST'
+    const widgets = Widgets.initialize(merchantId, ApiMode[mode])

commit 11aa3d4
Author: Ada Lovelace <ada@comprendre-git.com>
Date:   Fri Jul 3 09:45:14 2026 +0200

    feat(payment): create PaymentWidget component

diff --git a/PaymentWidget.js b/PaymentWidget.js
new file mode 100644
index 0000000..b109715
--- /dev/null
+++ b/PaymentWidget.js
@@ -0,0 +5,1 @@
+export default function PaymentWidget() {

Une analyse rapide nous permet de comprendre que le commit 73a775e réalisé par Jean Bon à retiré par erreur l’argument cents à la fonction.

Je le reprécise : cette option de commande ne permet de cibler qu’un fichier à la fois.

Je ne m’étends pas sur le sujet ici. Nous avons un article qui explique plus en détail la manière de procéder : git log : qui suis-je ? D’où viens-je ? Où vais-je ?.