Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:debug [2023/03/20 01:13] – [Affichage source] jcheron
+++ web:html:debug [2023/03/20 01:30] (Version actuelle) – [Ecriture du code] jcheron
@@ Ligne 22: / Ligne 22: @@
 </ul>
 </sxh>
+<WRAP info>
+Votre IDE (Webstorm ou un autre) doit vous permettre de formater votre code automatiquement, et peut être configuré pour le faire sur enregistrement.
+</WRAP>
 ===== Débogage =====
 ==== Affichage source ====
-Pour afficher le code source produit côté client : <label>CTRL</label> + U
+Pour **afficher le code source de la page** produit côté client : <label>CTRL</label> + <label>U</label>
+<html><div class="imageB"></html>{{:web:html:pasted:20230320-011610.png}}<html></div></html>
+==== Affichage DOM ====
+Il est également possible de visualiser la structure du DOM créée par le navigateur, à partir du HTML interprété :
+Pour inspecter les éléments : <label>CTRL</label> + <label>MAJ</label> +<label>U</label>
+<html><div class="imageB"></html>{{:web:html:pasted:20230320-011910.png}}<html></div></html>
+==== Affichage réseau ====
+L'affichage du réseau peut également donner des indications sur un disfonctionnement (fichier CSS non chargé par exemple) :
+Activer l'onglet **Network** ou **Réseau** après avoir choisi **Inspecter** :
+<html><div class="imageB"></html>{{:web:html:pasted:20230320-012319.png}}<html></div></html>
+===== Validateur W3C =====
+Le validateur W3C peut également donner des indications sur une mauvaise interprétation du code :
+  * [[https://validator.w3.org/|Validateur HTML]]
+  * [[https://jigsaw.w3.org/css-validator/|Validateur CSS]]