Opera Software
  1. Werkbalken
  2. Menu's
  3. Panelen
  4. Snelkiezer
  5. Bladwijzers
  6. Widgets
  7. Notities
  8. Opera Link
  9. Opera Turbo
  10. Opera Unite
  11. Inhoud blokkeren
  12. Fraudebescherming
  13. BitTorrent
  14. Weergavestanden
  15. Ontwikkelgereedschap
  16. Voorkeuren
  17. Geavanceerde voorkeuren
  18. Skins
  19. Sneltoetsen
  20. De muis gebruiken
  21. E-mail en nieuwsgroepen
  22. Nieuwsstromen
  23. Chat
  24. Dialoogvensters
  25. Automatisch bijwerken
  26. Opera back-uppen

Ontwikkelgereedschap

Druk PageDown en PageUp om dia's te wisselen

Opera bevat meerdere hulpmiddelen voor webontwikkelaars. De belangrijkste is Opera Dragonfly, waarmee het op afstand debuggen van webpagina's mogelijk wordt.

De developer-console is een hulpmiddel voor het analyseren en/of interactief aanpassen van een webpagina tijdens het ontwikkelen of debuggen, terwijl de broncodekijker een eenvoudiger hulpmiddel is voor het bestuderen en het snel wijzigen van de broncode van een webpagina.

Opera Dragonfly

Noot: om Opera Dragonfly te gebruiken moet JavaScript ingeschakeld zijn.

Opera Dragonfly is een JavaScript-toepassing die wordt gebruikt om webpagina's zowel lokaal als op afstand te debuggen. Kies het menu-item Extra > Geavanceerd > Ontwikkelgereedschap om het te openen. De toepassing bevat drie tabbladen:

Opera Dragonfly wordt nog steeds verder ontwikkeld. Bekijk de volgende artikelen voor meer informatie:

De developer-console

Net als de andere JavaScript-toepassingen op Dev.Opera kan de developer-console worden versleept naar elke werkbalk in Opera. Als u de developer-console opent, verschijnt er een klein venster bovenop de te analyseren webpagina, met vijf tabs: DOM, JS, CSS, HTTP, en About.

Noot: om de JavaScript-toepassingen van Dev.Opera te kunnen gebruiken, mogen pop-ups niet zijn uitgeschakeld.

De developer-console opent met de DOM-tab, met een lijst van nodes ingeklapt onder "document". Klik op het plusteken om de lijst uit te vouwen. Als u op een node klikt, zal de webpagina kort oplichten om aan te geven welk gebied bij deze node hoort.

Omgekeerd zal het klikken ergens op de webpagina een lijst met DOM-nodes openen, met de bijbehorende node van dat gebied opgelicht. Houd de Shift-toets ingedrukt tijdens het scannen van de pagina met de muis om het relevante gebied te vinden.

Dit zijn de belangrijkste mogelijkheden van de DOM-tab:

De developer-console kan worden gebruikt om een webpagina interactief aan te passen. Met de "Remove"-knop op de DOM-tab kunnen nodes worden verwijderd, maar ook kan elke CSS-eigenschap worden bewerkt vanuit de CSS-tab, na het klikken op de knop "Show rules" voor het juiste stijlblad. Het resultaat van de wijzigingen wordt direct weergegeven, en kan worden geƫxporteerd voor later gebruik.

Een uitgebreidere beschrijving van de developer-console kan worden gevonden op Dev.Opera.

De broncodekijker

Opera bevat ook een eenvoudiger hulpmiddel voor het analyseren en aanpassen van webpagina's, de broncodekijker. Als u naar de broncode van de huidige webpagina wilt kijken, ga dan naar Beeld > Broncode, of druk Ctrl+U, of rechtsklik op de pagina en kies "Broncode".

De broncodekijker opent in een nieuwe tab op uw tabbalk, en gebruikt syntaxkleuring om u een beter overzicht over de broncode te geven. Als u een pagina wilt bewerken, zijn er twee mogelijkheden:

  1. Opslaan in de tijdelijke opslag en uw wijzigingen direct toegepast zien door op "Wijzigingen toepassen" te klikken (of door Ctrl+R te drukken).
  2. Opslaan naar een locatie naar keuze door op "Opslaan" te klikken (of door Ctrl+S te drukken).

Merk op dat als u een lokaal opgeslagen document aan het bewerken bent, dat "Wijzigingen toepassen" uw wijzigingen permanent zal opslaan.

Als u liever een extern programma gebruikt voor het bekijken en bewerken van broncode, dan kunt u dit instellen in de voorkeuren voor programma's.