The latest articles on DEV Community by Yann Morgan (@yann_morgan_d6d4668f65951). https://dev.to/yann_morgan_d6d4668f65951 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3758489%2F7d09099e-d3b3-4eed-9b1c-54cab7c0a0b4.jpg https://dev.to/yann_morgan_d6d4668f65951 en Yann Morgan Sat, 02 May 2026 15:39:02 +0000 https://dev.to/yann_morgan_d6d4668f65951/jai-perdu-3-heures-a-debugger-une-section-shopify-pour-une-virgule-2e0h https://dev.to/yann_morgan_d6d4668f65951/jai-perdu-3-heures-a-debugger-une-section-shopify-pour-une-virgule-2e0h <h1> J’ai passé 3 heures à débugger une section Shopify… pour une virgule manquante </h1> <p>Oui, une seule virgule.</p> <p>Pas une logique complexe.<br> Pas un bug JS.<br> Juste… une virgule oubliée dans un schema.</p> <p>Et la section ne s’affichait plus.</p> <h2> Si tu fais du Shopify, tu connais déjà cette histoire </h2> <p>Tu ajoutes une section.<br> Tu refresh.<br> 👉 Rien.</p> <p>Pas d’erreur claire.<br> Pas de stack trace.<br> Juste… du silence.</p> <p>Alors tu commences :</p> <ul> <li>tu inspectes le code</li> <li>tu regardes le schema</li> <li>tu commentes des blocs</li> <li>tu refresh encore</li> </ul> <p>Et au bout d’un moment :</p> <p>👉 <strong>tu trouves une petite erreur ridicule.</strong></p> <h2> Le vrai problème (que personne ne dit) </h2> <p>Shopify est puissant.</p> <p>Mais côté dev :</p> <p>👉 <strong>il est extrêmement fragile.</strong></p> <p>Un petit problème et :</p> <ul> <li>la section casse</li> <li>le rendu disparaît</li> <li>et tu dois jouer au détective</li> </ul> <h2> Et ça arrive tout le temps </h2> <p>Les bugs les plus fréquents :</p> <ul> <li>JSON invalide dans <code>{% schema %}</code> </li> <li>tag Liquid non fermé</li> <li>structure incohérente</li> <li>champ manquant</li> </ul> <p>👉 Rien de “complexe”… mais ultra coûteux en temps.</p> <h2> Le déclic </h2> <p>Après avoir corrigé ce genre d’erreur pour la 50e fois, je me suis dit :</p> <blockquote> <p>“Pourquoi je fais ça à la main ?”</p> </blockquote> <h2> J’ai donc construit un petit outil </h2> <p>Au départ, juste pour moi.</p> <p>Un CLI capable de :</p> <ul> <li>générer des sections Shopify</li> <li>les valider</li> <li>et surtout… les réparer automatiquement</li> </ul> <h2> Le moment où tout a changé </h2> <p>J’ai testé sur une section cassée.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx section-factory repair broken-section.liquid </code></pre> </div> <p>Résultat :</p> <ul> <li>JSON corrigé</li> <li>structure fixée</li> <li>section fonctionnelle</li> </ul> <p>👉 en quelques secondes.</p> <h2> Exemple réel </h2> <h3> ❌ Avant </h3> <div class="highlight js-code-highlight"> <pre class="highlight liquid"><code><span class="cp">{%</span><span class="w"> </span><span class="nt">schema</span><span class="w"> </span><span class="cp">%}</span> { "name": "Hero", "settings": [ { "type": "text", "id": "title" "label": "Title" } ] } <span class="cp">{%</span><span class="w"> </span><span class="nt">endschema</span><span class="w"> </span><span class="cp">%}</span> </code></pre> </div> <p>👉 Une virgule manquante → tout casse</p> <h3> ✅ Après </h3> <div class="highlight js-code-highlight"> <pre class="highlight liquid"><code><span class="cp">{%</span><span class="w"> </span><span class="nt">schema</span><span class="w"> </span><span class="cp">%}</span> { "name": "Hero", "settings": [ { "type": "text", "id": "title", "label": "Title" } ] } <span class="cp">{%</span><span class="w"> </span><span class="nt">endschema</span><span class="w"> </span><span class="cp">%}</span> </code></pre> </div> <p>✔ corrigé<br> ✔ valide<br> ✔ prêt à utiliser</p> <h2> Ce que fait vraiment cet outil </h2> <p>Ce n’est pas juste un générateur.</p> <p>C’est un <strong>pipeline</strong> :</p> <h3> 1. Génération </h3> <p>Créer des sections propres</p> <h3> 2. Validation </h3> <p>Détecter les erreurs avant qu’elles cassent tout</p> <h3> 3. Repair </h3> <p>Corriger automatiquement ce qui ne va pas</p> <h2> Pourquoi c’est important </h2> <p>Parce qu’aujourd’hui :</p> <p>👉 une grosse partie du dev Shopify =<br> <strong>debug de problèmes évitables</strong></p> <h2> Et si on arrêtait ça ? </h2> <p>Au lieu de :</p> <ul> <li>copier/coller</li> <li>tester à l’aveugle</li> <li>corriger à la main</li> </ul> <p>On pourrait :</p> <p>👉 générer → valider → réparer automatiquement</p> <h2> L’objectif </h2> <p>Pas remplacer les devs.</p> <p>Mais enlever :</p> <ul> <li>la frustration</li> <li>la répétition</li> <li>les bugs stupides</li> </ul> <h2> Aujourd’hui </h2> <p>Le projet est encore en cours.</p> <p>Mais le cœur fonctionne déjà :</p> <ul> <li>génération</li> <li>validation</li> <li>repair</li> </ul> <h2> J’ai besoin de toi </h2> <p>Si tu es dev Shopify :</p> <p>👉 dis-moi :</p> <ul> <li>c’est quoi ton bug le plus chiant ?</li> <li>qu’est-ce que tu répètes tout le temps ?</li> <li>qu’est-ce que tu automatiserais en premier ?</li> </ul> <h2> L’idée derrière tout ça </h2> <p>Rendre le dev Shopify :</p> <ul> <li>plus rapide</li> <li>plus fiable</li> <li>moins frustrant</li> </ul> <h2> Et toi ? </h2> <p>Tu as déjà perdu combien de temps pour… une virgule ?</p> <p>👉 <a href="https://github.com/morgan2023972/section-factory.git" rel="noopener noreferrer">https://github.com/morgan2023972/section-factory.git</a></p> shopify webdev javascript programming Yann Morgan Sat, 02 May 2026 14:44:53 +0000 https://dev.to/yann_morgan_d6d4668f65951/-2jia https://dev.to/yann_morgan_d6d4668f65951/-2jia