Les outils développeurs

Appuyez sur Page Bas et Page Haut pour passer les diapositives

Opera offre plusieurs outils pour aider les développeurs de 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 debuggage, alors que l'afficheur de code source est un simple outil pour examiner le code d'une page Web, et apporter des changements rapides.

La console du développeur

L'item du menu Outils > Avancé > Outils du développeur ouvre une page Web sur Dev.Opera, dont les liens comportent plusieurs applications JavaScript. La console du développeur est l'une de ces applications et comme les autres, elle peut être déplacée dans 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 noeuds fermés sous "document". Cliquez sur le signe plus pour développer la liste. Lorsque vous cliquez sur un noeud, la page Web va flasher brièvement pour indiquer la région associée au noeud.

Sinon, cliquer n'importe où sur la page Web va ouvrir une liste des noeuds DOM, avec le noeud 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 noeuds utilisant les sélecteurs CSS standards, for example p > a to indicate a parent-child relationship, 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 noeuds, 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 ouvre 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 changement 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.