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ą:

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