Opera Software
  1. Les barres d'outils
  2. Les menus
  3. Les panneaux
  4. Speed Dial
  5. Les signets
  6. Les widgets
  7. Les notes
  8. Opera Link
  9. Opera Turbo
  10. Le blocage de contenu
  11. Protection anti-fraude
  12. BitTorrent
  13. Les modes d'affichage
  14. Les outils de développeurs
  15. Preferences
  16. Advanced Preferences
  17. Les habillages
  18. Raccourcis clavier
  19. Utilisation de la souris
  20. Utiliser sa voix
  21. Emails et groupes de discussion
  22. Les flux RSS
  23. La discussion (IRC)
  24. Les dialogues
  25. Mise à jour automatique
  26. Faire une sauvegarde d'Opera

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 :

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 :

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 :

  1. Enregistrer dans le cache et regarder les modifications appliquées en cliquant sur "Appliquer les changements", ou en appuyant sur Ctrl+R.
  2. 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.