L'essentiel de Dreamweaver CC 2017

Assurer la gestion des erreurs

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à déboguer aisément en HTML, CSS et JavaScript avec l'outil de linting. Les détections d'erreurs sont configurables et, grâce à la fenêtre de sortie, vous accéderez rapidement à la ligne concernée.
05:16

Transcription

Au cours d'une étape précédente, nous avions vu que dans les préférences nous avions accès au linting qui nous permettait de vérifier la bonne qualité d'écriture des trois langages principaux css, HTML et js, et qu'il était possible donc d'éditer les critères de cette rigueur en gros. Donc on va voir maintenant comment on peut le mettre en application. Alors déjà commençons par le HTML, ici au niveau du HTML j'ai toute une numérotation dans l'éditeur de code, et puis je vois des numéros en rouge. Simplement en survolant ces petits numéros ça m'indique l'erreur qu'il y a à la ligne indiquée c'est à dire qu'ici on voit que l'élément Div doit être en bas de casse, alors il suffit de venir le récupérer, et de le re-écrire. Une fois qu'il a été re-écrit et que le fichier est enregistré la compilation se ré-exécute et là, l'erreur a disparu. Parfait, ici on me dit que la valeur data-test devait être en double quotes. Bien entendu, je peux aller puisque HTML 5 n'impose pas le double quotes, je peux très bien aller dans le fichier d'édition ici en ce qui concerne le HTML et puis demander d'éditer et appliquer les modifications donc ici je vais chercher la partie ad hoc, ici je vois attribue value double quotes true, si je lui met false ici, Contrôle S, je retourne dans mon document ici, et vous voyez qu'instantanément ça a disparu, ça n'est plus une erreur, par contre si je reviens ici, et que je le remets en true, que j'enregistre mon document, je vais le fermer également, voila, ici l'erreur est re-apparue. Donc après c'est à vous de voir jusqu'à quelle rigueur vous souhaitez imposer une qualité d'écriture. Donc ici on ne va pas tous les faire mais vous voyez que tous les éléments de correction sont apparus. Sur un document plus long plus verbeux, ça serait un peu compliqué à suivre donc ici dans la partie basse, je m’aperçois que j'ai la possibilité de venir éditer ces erreurs, et donc si je clique dessus, dans la fenêtre de sortie je vais avoir l'intégralité de ces erreurs qui sont listées et qui sont dispatchées. En double-cliquant directement sur la partie, je vais pouvoir me rendre sur l'élément au niveau de l'erreur, donc je vois qu'ici c'est un div qui manque je vais pouvoir venir le rajouter directement. Alors le petit souci ici, vous avez vu, c'est que j'ai été obligé de taper le div intégralement, pour quelle raison? Et bien pour la raison simple qui est que lorsque j'ouvre une balise p par exemple, automatiquement Dreamweaver me la ferme. Ici, ça vient dans les préférences, au niveau de la catégorie conseil de codes ici vous voyez que j'ai demandé, juste après la fin de la balise d'ouverture. Alors que si je la place dans ce sens là, c'est moins convivial on va dire, au niveau de l'écriture mais surtout ça va me permettre de fermer la bonne balise. J'applique, je ferme, si ici donc maintenant je suis revenu à ce niveau là, dés l'instant où je vais placer mon slash Dreamweaver me ferme le div parce qu'il sait que ça correspond à un div, mais admettons qu'ici j'aie ces deux balises qui manquent et je viens pour l'erreur du div, ici je suis venu sur le div, alors bien sûr ici une autre erreur va apparaître, mais si je viens ici au niveau du div, elle me dit : tu as deux tags qui s'embêtent là, et regardez si je viens ici et je fais là, il va me fermer d'abord le premier li qui était pas fermé, et puis si je viens ici et je referme, il va me fermer le ul, qui était pas fermé, et enfin si je finis de fermer le dernier, il me dit, c'est le div, et vous avez vu qu'à chaque fois il m'indempte. Donc l'intérêt d'écriture de demander à ce que Dreamweaver ferme la balise dès que la première balise a été fermée et comme ça dans ce sens là, c'est intéressant parce que ça permet d'écrire du code rapide, sauf que quand on débugge, et bien des fois on va pas forcément fermer la bonne balise dans le bon ordre, ça peut être intéressant aussi de demander de le fermer qu'au moment de l'écriture du slash, parce qu'à ce moment là, Dreamweaver va recoller la balise de paires qui devaient aller avec l'élément. Alors ici on pourrait venir s'amuser à corriger toutes les parties HTML, maintenant vous avez la même chose sur le JavaScript, qui va être écrit, ici, il me dit, tu as une erreur, il manque le use strict statement, il manque un semicolon ici à ce niveau là, voila effectivement, et puis il manque le use strict statement, sur une fonction un peu plus basse, après une grosse série de commentaires, voila donc vous voyez que à ces niveaux là c'est assez sympa, ça permet de vraiment corriger tous les petits bugs, toutes les erreurs que l'on pourrait avoir et automatiquement puisque la fenêtre de sortie est ouvert, le document rafraîchit en temps réel, vous voyez ici, quand je bascule de l'un à l'autre, il rafraîchit automatiquement, et me relocalise les éléments. Alors ici il me dit expected colon et bien parce qu'il y a en fait ce op qui gêne ici, et puis ici on a les deux petits éléments qui ne servent à rien qu'il faudrait supprimer. Voila donc je laisse les erreurs pour que vous puissiez les avoir dans le fichier source, et vous voyez que cet outil d'aide à la correction, est vraiment pratique, parce que non seulement il est personnalisable, et affinable depuis les préférences de puis le linting, mais également il est extrêmement convivial, et on peut le placer dans la fenêtre de sortie, alors n'hésitez pas à déplacer la fenêtre de sortie sur des fenêtres de débogage par exemple, vous pouvez très bien la placer ici sur le côté, resserrer un tantinet pour que ça soit moins espacé en fonction de l'écran que vous avez, et vous venez enregistrer une sélection d'espaces de travail en disant debogage, et là vous avez vos outils de débogage, qui sont confectionnés.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !