Opera Software
  1. Les barres d'outils
  2. Les menus
  3. Les panneaux
  4. Appel Rapide
  5. Les signets
  6. Les widgets
  7. Les notes
  8. Le contenu bloqué
  9. Protection anti-fraude
  10. BitTorrent
  11. Les modes d'affichage
  12. Les outils développeurs
  13. Préférences
  14. Préférences avancées
  15. Les habillages
  16. Raccourcis clavier
  17. Utilisation de la souris
  18. Utiliser sa voix
  19. Emails et forums
  20. Les flux RSS
  21. La discussion
  22. Les dialogues
  23. Faire une sauvegarde d'Opera

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 :

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 :

  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 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.