Les outils de développeurs

Appuyez sur Page Bas et Page Haut pour passer les diapositives

Opera comprend plusieurs outils pour aider les développeurs Web, le plus important étant Dragonfly Opera, un outil qui permet le deboggage à distance des pages Web.

La console du développeur est un outil pour analyser et/ou modifier de façon interactive une page Web durant son développement ou son debogage, alors que l'afficheur de code source est un simple outil pour examiner le code d'une page Web, et apporter des changements rapides.

Dragonfly Opera

Note : Pour utiliser Dragonfly Opera, JavaScript doit être activé.

Dragonfly Opera est une application JavaScript utilisée pour débogger les pages Web locales et distantes. Pour l'ouvrir, sélectionnez l'item du menu Outils > Avancé > Outils de développeurs. L'interface utilisateur contient trois onglets :

Un onglet script, pour le déboggage du JavaScript
Un onlget DOM, pour le déboggage HTML et CSS
Un onglet console, pour visualiser les erreurs

Dragonfly Opera est encore en développement. Pour plus d'informations, consultez les articles suivants :

La console du développeur

Comme les autres applications JavaScript sur Dev.Opera, la console du développeur peut être déplacée et déposée sur n'importe quelle barre d'outils d'Opera. Lorsque vous ouvrez la console du développeur, une petite fenêtre va apparaître en haut de la page Web à analyser, avec cinq onglets : DOM, JS, CSS, HTTP, et A propos.

Note : pour utiliser les applications JavaScript sur Dev.Opera, les pop-ups doivent être activées.

La console du développeur s'ouvre dans l'onglet DOM, avec la liste des nœuds fermés sous "document". Cliquez sur le signe plus pour développer la liste. Lorsque vous cliquez sur un nœud, la page Web va flasher brièvement pour indiquer la région associée au nœud.

Sinon, cliquer n'importe où sur la page Web va ouvrir une liste des nœuds DOM, avec le nœud concernant cette région de la page surligné. Pour trouver la région concernée, appuyez et maintenez la touche Maj lorsque vous parcourez la page avec la souris.

Voici les principales fonctions de l'onglet DOM :

"Rechercher" vous permet de chercher dans l'arbre DOM n'importe quelle classe de nœuds utilisant les sélecteurs CSS standards, par exemple p > a pour indiquer une relation parent-enfant, ou #menu pour trouver un id.
"Snapshot" vous donne une photographie complète du DOM.

La console du développeur peut être utilisée pour modifier de façon interactive une page Web. Le bouton "Supprimer" dans l'onglet DOM permet d'enlever des nœuds, mais aussi n'importe quelle propriété CSS peut être éditée dans l'onglet CSS, après avoir appuyé sur le bouton "Afficher les règles" pour la feuille de style appropriée. Le résultat des modifications est affiché instantanément, et peut être exporté pour un usage ultérieur.

Plus de détails sur la console du développeur peuvent être trouvés sur Dev.Opera.

L'afficheur de code source

Opera comprend un outil simple pour analyser et modifier les pages Web, l'afficheur de code source. Si vous souhaitez analyser le code de la page actuelle, allez à Afficher > Source, ou appuyez sur Ctrl+F3, ou cliquez avec le bouton droit dans la page et choisissez "Source".

L'afficheur de code source s'ouvre dans un nouvel onglet dans la barre d'onglet, et surligne la syntaxe pour vous donner une meilleure vue d'ensemble du code source. Si vous voulez éditer la page, vous avez deux options :

Enregistrer dans le cache et regarder les modifications appliquées en cliquant sur "Appliquer les changements", ou en appuyant sur Ctrl+R.
Enregistrer à l'emplacement de votre choix en cliquant sur "Enregistrer", ou en appuyant sur Ctrl+S.

Notez que si vous éditez un document enregistré localement, "Appliquer les changements" enregistrera vos changements de façon permanente.

Si vous préférez utiliser un programme externe pour afficher et éditer le code source, vous pouvez le spécifier dans les préférences de programmes.