Narzędzia dla deweloperów

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

Opera oferuje kilka narzędzi ułatwiających pracę twórców stron WWW. Najważniejszym z nich jest Opera Dragonfly - narzędzie umożliwiające zdalne debugowanie 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.

Opera Dragonfly

Uwaga: Opera Dragonfly wymaga włączonej obsługi JavaScript.

Opera Dragonfly jest aplikacją JavaScript umożliwiającą debugowanie lokalnych i zdalnych stron WWW. Aby ją uruchomić, wybierz polecenie Narzędzia > Zaawansowane > Narzędzia dla deweloperów. Interfejs użytkownika składa się z trzech podstawowych kart:

„Scripts” - debugowanie kodu JavaScript,
„DOM” - debugowanie kodu HTML i CSS,
„Error Console” - przeglądanie błędów.

Opera Dragonfly znajduje się wciąż w fazie rozwoju. Aby dowiedzieć się więcej, zapoznaj się z następującymi artykułami:

Wprowadzenie do aplikacji Opera Dragonfly (po angielsku),
Architektura aplikacji Opera Dragonfly (po angielsku),
Blog aplikacji Opera Dragonfly (po angielsku).

Konsola dewelopera

Podobnie jak w przypadku innych aplikacji JavaScript dostępnych na Dev.Opera, przycisk uruchamiający konsolę dewelopera można przeciągnąć 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ą:

„Search” - umożliwia przeszukiwanie drzewa DOM w celu znalezienia dowolnej klasy za pomocą standardowych selektorów CSS. Np. szukaj p > a, aby wskazać zależność rodzic-dziecko, lub #menu, aby znaleźć identyfikator.
„Snapshot” - daje pełny obraz drzewa DOM.

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:

kliknąć przycisk „Zastosuj zmiany” lub nacisnąć Ctrl+R, aby zapisać zmiany w pamięci podręcznej i zobaczyć ich efekt,
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.