Geliştirici araçları

Slayt geçişi için Page Down ve Page Up düğmelerine basın.

Opera, en önemlisi uzaktan hata ayıklamayı sağlayan Opera Dragonfly olmak üzere web geliştiricilerine yönelik çeşitli araçları içerir.

Geliştirici konsolu bir web sayfası geliştirme veya hata ayıklama süresi boyunca etkileşimli değiştirme ve araştırma aracıdır. Kaynak gösterici web sayfasının kodlarını gösteren ve hızlıca değiştirme yapabileceğiniz basit bir araçtır.

Opera Dragonfly

Not: Opera Dragonfly'ı kullanmak için JavaScript'i aktifleştirin.

Opera Dragonfly yerel ve uzak web sayfalarındaki hataları ayıklamada kullanılan JavaScript uygulamasıdır. Onu açmak için menüden Araçlar > Gelişmiş > Geliştirici araçlarını kullanın. Kullanıcı arayüzü üç sekme içerir:

Betik sekmesi, JavaScript hata ayıklaması için,
DOM sekmesi, HTML ve CSS hata ayıklaması için,
Hata uçbirim ekranı, hatalara bakmak için.

Opera Dragonfly halen geliştiriliyor. Daha fazla bilgi edinmek için aşağıdaki bölümlere bakın:

Geliştirici konsolu

Dev.Operadaki diğer JavaScript uygulamalarına benzer şekilde geliştirici konsolu da herhangi bir Opera araç çubuğuna sürüklenip bırakılabilir. Geliştirici konsolunu açtığınızda sayfanın üstüne içinde beş sekme bulunan(DOM, JS, CSS, HTTP ve About) ve web sayfasınını analiz eden küçük bir pencere açılır.

Not: Dev.Operadaki JavaScript uygulamalarını kullanabilmek için açılır pencereler aktif olmalı.

Geliştirici konsolu DOM sekmesiyle açılır, düğümlerin listesi daraltılmış olarak "document" içindedir. Listeyi genişletmek için artı işaretine tıklayın. Bir düğüme tıkladığınızda, web sayfası bu düğümle ilgili bögeyi kısa bir süre için vurgulayacaktır.

Alternatif olarak web sayfasındaki herhangi bir yere tıkladığınızda DOM düğümlerinin listesinden sayfada belirtiğiniz alana ait düğüm açılacaktır. İlgili bölümü bulmak için Shift tuşuna basılı tutup fareyle sayfaı tarayın.

DOM sekmesinin anahtar özellikleri aşağıdadır:

"Search", standart CSS seçicileri kullanarak düğümlerdeki herhangi bir tür için DOM ağacını arama yapabilmenizi sağlar. Örneğin p > a bir ana/çocuk ilişkisini göterir ya da #menu bir kimlik bulur.
"Snapshot" tam bir DOM enstantanesi verir.

Geliştirici konsolu bir web sayfasını etkileşimli olarak düzenlemede kullanılabilir. DOM sekmesindeki "Remove" düğmesi düğüm kaldırmanıza izin verir, ayrıca herhangi bir CSS özelliğini CSS sekmesinden düzenleyebilirsiniz. "Show rules" düğmesine basarak stil tablosunu görebilirsiniz. Değişimin sonuçlarını anında görebilir ya da sonra kullanmak için dışarı aktarabilirsiniz.

Geliştirici konsolu ile ilgili daha detaylı bilgileri Dev.Opera'da bulabilirsiniz.

Kaynak gösterici

Opera web sayfalarını düzenlemek ve analiz etmek için basit bir araç, kaynak gösterici içerir. Eğer şimdiki sayfanın kaynak kodunu görmek istiyorsanız, Görünüm > Kaynak kodunu ya da web sayfasına sağ tıklayıp "Kaynak kodu"nu seçin ya da Ctrl+F3'e basın.

Kaynak gösterici sekme çubuğunda yeni bir sekme olarak açılır ve size daha iyi bir genel görünüm sunmak için söz dizimleri renklendirilir. Eğer sayfayı düzenlemek istiyorsanız iki seçeneğiniz var:

Önbelleğe kayıt yapmak ve değişiklikleri anında görebilmek için "Değişiklikleri"uygulayı tıklayın ya da Ctrl+Rye basın.
İstediğiniz bir şeyre kaydetmek için "Kaydet"i tıklayın yada Ctrl+Sye basın.

Eğer kayıtlı bir belgeyi düzenliyorsanız "Değişiklikleri uygula"ya tıklamanız değişiklikleri kalıcı olarak kaydedecektir.

Eğer kaynak kodu görüntüleme ve düzenleme için başka bir program kullanmak istiyorsanız bunu program tercihlerinde ayarlayabilirsiniz.