Le débogage de code CSS dans Google Chrome
Je suis en train d'écrire un peu de CSS fichiers, mais quand je fais une erreur, Chrome semble juste silencieusement ignorer les pièces que je vis en place, et rend le reste.
De ce fait, il est gênant pour déboguer puisque je ne peux pas comprendre ce qui ne va pas.
Alors, est-il un moyen d'obtenir de google Chrome pour "crier à m'en grosses lettres rouges," afin que je puisse passer moins de temps à trouver l'erreur et plus de temps à corriger?
Vous pouvez utiliser l'élément de l'inspecteur de chrome pour voir le CSS appliqué à un élément et annulé/ignoré les règles CSS. Pour ouvrir l'élément inspecteur, vous pouvez utiliser la touche f12 ou ctrl+maj+j.
OriginalL'auteur user1383359 | 2012-06-16
Vous devez vous connecter pour publier un commentaire.
Que CSS n'est pas un langage de script, vous ne pouvez pas déboguer correctement. De toute façon, si vous savez où ça se passe mal, vous pouvez essayer de les régler à la main.
Aditionally vous avez le validateur du w3c ici: http://jigsaw.w3.org/css-validator/ qui peut vous donner une rétroaction
OriginalL'auteur Gooey
Alors que vous ne pouvez pas "debug" CSS, car il n'est pas un langage de script, vous pouvez utiliser le Chrome DevTools Éléments du panneau pour inspecter un élément & afficher le volet Styles sur la droite. Cela vous donnera un aperçu de l'styles étant substituée ou ignorées (ligne a jeté). Le volet Styles est également utile en raison de sa capacité à LiveEdit le document en cours d'inspection, qui peut vous aider à aplanir les problèmes. Si les styles sont en train d'être remplacé, vous pouvez ensuite visualiser le résultat de la sous-fenêtre Style de voir le CSS qui est effectivement utilisé pour le style de votre document.
Pour afficher le Chrome DevTools fenêtre, appuyez sur Ctrl+Maj+I dans un onglet du navigateur Chrome. (Commande+Opt+I pour un mac)
Pour plus d'informations, visitez https://developer.chrome.com/devtools/index
OriginalL'auteur Zachariah Moreno