Opera Software
  1. Paski narzędzi
  2. Menu
  3. Panele
  4. Szybkie wybieranie
  5. Zakładki
  6. Widżety
  7. Notatki
  8. Blokowanie zawartości
  9. Ochrona przed oszustwami
  10. BitTorrent
  11. Tryby wyświetlania
  12. Narzędzia dewelopera
  13. Preferencje
  14. Zaawansowane
  15. Mysz
  16. Poczta i grupy dyskusyjne
  17. Kanały informacyjne
  18. Czat
  19. Okna dialogowe
  20. Tworzenie kopii zapasowej

Narzędzia dewelopera

Aby przejść do następnego lub poprzedniego slajdu, naciśnij Page Down lub Page Up.

Opera zawiera kilka narzędzi ułatwiających pracę twórców stron WWW.

Konsola dewelopera umożliwia analizę oraz interaktywną modyfikację zawartości stron WWW podczas projektowania oraz debugowania. Podgląd źródła jest prostszym narzędziem przeznaczonym do przeglądania kodu źródłowego stron WWW oraz szybkiego dokonywania modyfikacji.

Konsola dewelopera

Polecenie menu Narzędzia > Zaawansowane > Narzędzia dewelopera otwiera stronę Dev.Opera, na której dostępnych jest kilka aplikacji JavaScript (wszystkie w języku angielskim). Jedną z nich jest konsola dewelopera, która, podobnie jak inne aplikacje, może być przeniesiona na dowolny pasek narzędzi Opery. Po otwarciu konsoli dewelopera, nad analizowaną stroną pojawi się okno zawierające pięć kart: DOM, JS, CSS, HTTP oraz About.

Uwaga: aby korzystać z aplikacji JavaScript dostępnych na stronie Dev.Opera, należy włączyć opcję otwierania wyskakujących okien.

Po otwarciu konsoli dewelopera uaktywniona zostaje karta DOM zawierająca listę węzłów zwiniętą w węźle „document”. Aby rozwinąć tę listę, kliknij znak „+” (plus). Po kliknięciu węzła, związany z nim obszar strony będzie przez chwilę migał.

Z kolei kliknięcie dowolnego obszaru strony WWW powoduje otwarcie listy węzłów DOM z zaznaczonym węzłem związanym z tym obszarem. Aby znaleźć obszar związany z określonym węzłem, przemieszczaj kursor myszy po stronie, przytrzymując jednocześnie klawisz Shift.

Najważniejszymi funkcjami dostępnymi na karcie DOM są:

Konsola dewelopera świetnie nadaje się do interaktywnej modyfikacji kodu strony WWW. Dostępny na karcie DOM przycisk „Remove” umożliwia usuwanie węzłów. Karta CSS oferuje możliwość edycji dowolnych właściwości CSS - wystarczy kliknąć przycisk „Show rules” przy wybranym arkuszu stylów. Efekty modyfikacji wyświetlane są natychmiastowo. Dodatkowo modyfikacje te można eksportować, np. w celu ich ponownego użycia.

Dokładniejsze omówienie konsoli dewelopera dostępne jest (po angielsku) na stronie Dev.Opera.

Podgląd źródła

Podgląd źródła jest prostszym narzędziem umożliwiającym analizę i modyfikację stron WWW. Aby obejrzeć kod źródłowy przeglądanej strony WWW, wybierz polecenie Widok > Źródło strony lub naciśnij Ctrl+F3. Możesz też kliknąć stronę prawym przyciskiem myszy i z menu kontekstowego wybrać polecenie „Źródło strony”.

Źródło strony wyświetlane jest na nowej karcie. Przeglądanie kodu jest łatwiejsze dzięki podświetlaniu składni. Edytując stronę możesz:

  1. kliknąć przycisk „Zastosuj zmiany” lub nacisnąć Ctrl+R, aby zapisać zmiany w pamięci podręcznej i zobaczyć ich efekt,
  2. kliknąć przycisk "Zapisz" lub nacisnąć Ctrl+S, aby zapisać kod w wybranym przez siebie miejscu.

Proszę zauważyć, że w przypadku edycji dokumentu zapisanego na dysku lokalnym, polecenie „Zastosuj zmiany” spowoduje trwałe zapisanie zmian.

Jeśli do podglądu i edycji kodu źródłowego wolisz wykorzystywać inny program, możesz to ustawić w preferencjach.