DEV Community

Cover image for J’ai perdu 3 heures à débugger une section Shopify… pour une virgule
Yann Morgan
Yann Morgan

Posted on

J’ai perdu 3 heures à débugger une section Shopify… pour une virgule

J’ai passé 3 heures à débugger une section Shopify… pour une virgule manquante

Oui, une seule virgule.

Pas une logique complexe.
Pas un bug JS.
Juste… une virgule oubliée dans un schema.

Et la section ne s’affichait plus.


Si tu fais du Shopify, tu connais déjà cette histoire

Tu ajoutes une section.
Tu refresh.
👉 Rien.

Pas d’erreur claire.
Pas de stack trace.
Juste… du silence.

Alors tu commences :

  • tu inspectes le code
  • tu regardes le schema
  • tu commentes des blocs
  • tu refresh encore

Et au bout d’un moment :

👉 tu trouves une petite erreur ridicule.


Le vrai problème (que personne ne dit)

Shopify est puissant.

Mais côté dev :

👉 il est extrêmement fragile.

Un petit problème et :

  • la section casse
  • le rendu disparaît
  • et tu dois jouer au détective

Et ça arrive tout le temps

Les bugs les plus fréquents :

  • JSON invalide dans {% schema %}
  • tag Liquid non fermé
  • structure incohérente
  • champ manquant

👉 Rien de “complexe”… mais ultra coûteux en temps.


Le déclic

Après avoir corrigé ce genre d’erreur pour la 50e fois, je me suis dit :

“Pourquoi je fais ça à la main ?”


J’ai donc construit un petit outil

Au départ, juste pour moi.

Un CLI capable de :

  • générer des sections Shopify
  • les valider
  • et surtout… les réparer automatiquement

Le moment où tout a changé

J’ai testé sur une section cassée.

npx section-factory repair broken-section.liquid
Enter fullscreen mode Exit fullscreen mode

Résultat :

  • JSON corrigé
  • structure fixée
  • section fonctionnelle

👉 en quelques secondes.


Exemple réel

❌ Avant

{% schema %}
{
  "name": "Hero",
  "settings": [
    {
      "type": "text",
      "id": "title"
      "label": "Title"
    }
  ]
}
{% endschema %}
Enter fullscreen mode Exit fullscreen mode

👉 Une virgule manquante → tout casse


✅ Après

{% schema %}
{
  "name": "Hero",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title"
    }
  ]
}
{% endschema %}
Enter fullscreen mode Exit fullscreen mode

✔ corrigé
✔ valide
✔ prêt à utiliser


Ce que fait vraiment cet outil

Ce n’est pas juste un générateur.

C’est un pipeline :

1. Génération

Créer des sections propres

2. Validation

Détecter les erreurs avant qu’elles cassent tout

3. Repair

Corriger automatiquement ce qui ne va pas


Pourquoi c’est important

Parce qu’aujourd’hui :

👉 une grosse partie du dev Shopify =
debug de problèmes évitables


Et si on arrêtait ça ?

Au lieu de :

  • copier/coller
  • tester à l’aveugle
  • corriger à la main

On pourrait :

👉 générer → valider → réparer automatiquement


L’objectif

Pas remplacer les devs.

Mais enlever :

  • la frustration
  • la répétition
  • les bugs stupides

Aujourd’hui

Le projet est encore en cours.

Mais le cœur fonctionne déjà :

  • génération
  • validation
  • repair

J’ai besoin de toi

Si tu es dev Shopify :

👉 dis-moi :

  • c’est quoi ton bug le plus chiant ?
  • qu’est-ce que tu répètes tout le temps ?
  • qu’est-ce que tu automatiserais en premier ?

L’idée derrière tout ça

Rendre le dev Shopify :

  • plus rapide
  • plus fiable
  • moins frustrant

Et toi ?

Tu as déjà perdu combien de temps pour… une virgule ?


👉 https://github.com/morgan2023972/section-factory.git

Top comments (0)