AIR HTML Introspector ile hata ayıklama

Adobe® AIR® SDK HTML tabanlı uygulamalarda hata ayıklamaya yardım etmek için uygulamanıza dahil edebileceğiniz bir AIRIntrospector.js JavaScript dosyası içerir.

AIR Introspector Hakkında

(AIR HTML Introspector adıyla kullanılan) Adobe AIR HTML/JavaScript Application Introspector HTML tabanlı uygulama geliştirme ve hata ayıklamaya yardımcı olan kullanışlı özellikler sağlar:

  • Uygulamadaki bir kullanıcı arabirimini işaretlemenize ve onun işaretlemesi ve DOM özelliklerini görmenize olanak veren bir iç inceleyici araç içerir.

  • İç inceleme için nesne başvuruları göndermeye yarayan bir konsol içerir ve özellik değerlerini ayarlayabilir ve JavaScript kodu çalıştırabilirsiniz. Ayrıca konsola nesneleri serileştirebilirsiniz, bu da veriyi düzenlemenizi sınırlar. Ayrıca konsoldan metin kopyalayabilir ve kaydedebilirsiniz.

  • Ayrıca DOM özellik ve işlevleri için bir ağaç görünümü içerir.

  • DOM öğelerine ilişkin nitelikleri ve metin düğümlerini düzenlemenize izin verir.

  • Uygulamanızda yüklenen bağlantılar, CSS stilleri, görüntüler ve JavaScript dosyaları listeler.

  • Kullanıcı arabirimine ilişkin ilk HTML kaynağı ve geçerli işaretleme kaynağını görüntülemenize olanak tanır.

  • Uygulama dizinindeki dosyalara erişmenize olanak tanır. (Bu özellik yalnızca uygulama sanal alanı için açılan AIR HTML Introspector konsolu için kullanılabilir. Uygulama harici sanal alan içeriğine açık olan konsollar için kullanılabilir değildir.)

  • XMLHttpRequest nesneleri ve özellikleri için bir görüntüleyici içerir, buna responseText ve responseXML (kullanılabilir olduğunda) dahildir.

  • Eşleşen metni kaynak kod ve dosyalarda aratabilirsiniz.

AIR Introspector kodu yükleniyor.

AIR Introspector kodu AIR SDK'nin çerçeveler dizinine dahil edilen AIRSourceViewer.js adlı bir JavaScript dosyasına dahil edilir. AIR Introspector'ı uygulamanızda kullanmak için, AIRIntrospector.js dosyasını uygulama proje dizininize kopyalayın ve dosyayı uygulamanızdaki ana HTML dosyası aracılığıyla yükleyin:

<script type="text/javascript" src="AIRIntrospector.js"></script>

Ayrıca dosyayı uygulamanızdaki farklı yerel pencerelere karşılık gelen her HTML dosyasında içerin.

Önemli: AIRIntrospector.js dosyasını yalnızca uygulamayı geliştirirken ve onun hatalarını ayıklarken dahil edin. Onu dağıttığınız paketli AIR uygulamasıyla kaldırın.

AIRIntrospector.js dosyası air.SourceViewer öğesini çağırarak JavaScript kodundan erişebileceğiniz Console adlı bir sınıfı tanımlar.

Not: AIR Introspector'ı kullanan kod uygulama güvenlik sanal alanında olmalıdır (uygulama dizininde bulunan bir dosyada.)

Bir nesneyi Konsol sekmesinde denetlemek.

Konsol sınıfı beş yöntem tanımlar: log() , warn() , info() , error() ve dump() .

log() , warn() , info() ve error() yöntemlerinin hepsi Konsol sekmesine bir nesne göndermenize olanak tanır. Bu yöntemlerin en temel olanı log() yöntemidir. Aşağıdaki kod Konsol sekmesine test değişkeni tarafından temsil edilen basit bir nesne gönderir:

var test = "hello"; 
air.Introspector.Console.log(test);

Ancak, Konsol sekmesine bir karmaşık nesne göndermek daha kullanışlıdır. Örneğin, aşağıdaki HTML sayfası, button nesnesinin kendisini Konsol sekmesine gönderen ( btn1 ) adlı bir düğme içerir:

<html> 
    <head> 
        <title>Source Viewer Sample</title> 
        <script type="text/javascript" src="scripts/AIRIntrospector.js"></script> 
        <script type="text/javascript"> 
            function logBtn() 
            { 
                var button1 = document.getElementById("btn1"); 
                air.Introspector.Console.log(button1); 
            } 
        </script> 
    </head> 
    <body> 
        <p>Click to view the button object in the Console.</p> 
        <input type="button" id="btn1" 
            onclick="logBtn()"  
            value="Log" /> 
    </body> 
</html>

Düğmeye bastığınızda, Konsol sekmesi btn1 nesnesini görüntüler ve nesnenin özelliklerini denetlemek için onun ağaç görünümünü genişletebilirsiniz:

Nesnenin bir özelliğini, özellik adının sağındaki listeyi tıklatarak ve metin listesini değiştirerek düzenleyebilirsiniz.

info() , error() ve warn() yöntemleri log() yöntemiyle aynıdır. Ancak, bu yöntemleri çağırdığınızda, Konsol satırın başında bir simge görüntüler:

Yöntem

Simge

info()

error()

warn()

log() , warn() , info() ve error() yöntemleri yalnızca gerçek nesneye bir başvuru gönderir, bu nedenle de kullanılabilir olan özellikler görüntüleme sırasında olanlardır. Gerçek nesneyi serileştirmek istiyorsanız, dump() yöntemini kullanın. Bu yöntem iki parametreye sahiptir:

Parametre

Açıklama

dumpObject

Serileştirilecek nesne.

düzeyler

Nesne ağacında incelenecek maksimum düzey sayısı (kök düzeyine ek olarak). Varsayılan değer 1'dir (yani ağacın kök düzeyinin ötesindeki bir düzey gösterilir). Bu parametre isteğe bağlıdır.

dump() yöntemini çağırmak bir nesneyi Console sekmesine göndermeden önce onu serileştirir, böylece nesnenin özelliklerini düzenleyemezsiniz. Örneğin, şu kodu göz önünde bulundurun:

var testObject = new Object(); 
testObject.foo = "foo"; 
testObject.bar = 234; 
air.Introspector.Console.dump(testObject);

Bu kodu çalıştırdığınızda, Konsol testObject nesnesini ve onun özelliklerini görüntüler ancak Konsol'da özellik değerlerini düzenleyemezsiniz.

AIR Introspector'ı Yapılandırma

Konsolu küresel AIRIntrospectorConfig değişkeninin özelliklerini ayarlayarak yapılandırabilirsiniz. Örneğin, aşağıdaki JavaScript kodu AIR Introspector uygulaması sütunlarını 100 karakterde bir saracak şekilde yapılandırır:

var AIRIntrospectorConfig = new Object(); 
AIRIntrospectorConfig.wrapColumns = 100;

AIRIntrospector.js dosyasını (bir script etiketiyle) yüklemeden önce AIRIntrospectorConfig değişkeninin özelliklerini ayarladığınızdan emin olun.

AIRIntrospectorConfig değişkeninin sekiz özelliği vardır:

Özellik

Varsayılan değer

Açıklama

closeIntrospectorOnExit

true

Denetleyici penceresini uygulamanın diğer tüm pencereleri kapandığında kapanacak şekilde ayarlar.

debuggerKey

123 (F12 tuşu)

AIR Introspector penceresini göstermek ve saklamak için kullanılan klavye kısayolunun tuş kodu.

debugRuntimeObjects

true

Introspector'ı JavaScript'te tanımlanan nesnelere ek olarak çalışma zamanı nesnelerini de genişletmeye ayarlar.

flashTabLabels

true

Konsol ve XMLHttpRequest sekmelerini onlarda bir değişiklik olduğunda haber vererek yanıp sönmeye ayarlar (örneğin, bu sekmelerde bir metin kaydolduğunda).

introspectorKey

122 (F11 tuşu)

Denetleme panelini açacak klavye kısayoluna ilişkin tuş kodu.

showTimestamp

true

Konsol sekmesini her satırın başında zaman damgaları görüntüleyecek şekilde ayarlar.

showSender

true

Mesajı her satırın başında göndererek nesne üzerinde bilgi görüntülemek için Konsol sekmesini ayarlar.

wrapColumns

2000

Kaynak dosyaların sarıldığı sütun sayısı.

AIR Introspector arabirimi

Uygulamanın hata ayıklamasını yaparken AIR iç inceleyici penceresini açmak için, F12 tuşuna basın veya Konsol sınıfının yöntemlerinden birini çağırın (bkz. Bir nesneyi Konsol sekmesinde denetlemek. ). Kısayol tuşunu F12 tuşundan başka bir tuş olarak yapılandırabilirsiniz; bkz. AIR Introspector'ı Yapılandırma .

AIR Introspector penceresinde aşağıdaki örnekte gösterildiği gibi altı sekme vardır: Konsol, HTML, DOM, Varlıklar, Kaynak ve XHR:

Konsol sekmesi

Konsol sekmesi air.Introspector.Console sınıfının yöntemlerinden birine parametreler olarak geçen özellik değerlerini görüntüler. Ayrıntılı bilgi için, bkz. Bir nesneyi Konsol sekmesinde denetlemek. .

  • Konsolu temizlemek için, metni sağ tıklayın ve Konsolu Temizle'yi tıklayın.

  • Konsol sekmesindeki metni bir dosyaya kaydetmek için, Konsol sekmesini sağ tıklayın ve Konsolu Dosyaya Kaydet seçeneğini belirleyin.

  • Konsol sekmesindeki metni panoya kaydetmek için, Konsol sekmesini sağ tıklayın ve Konsolu Dosyaya Kaydet seçeneğini belirleyin. Panoya yalnızca seçili metni kopyalamak için, metni sağ tıklayın ve Kopyala seçeneğini belirleyin.

  • Konsol sekmesindeki metni bir dosyaya kaydetmek için, Konsol sekmesini sağ tıklayın ve Konsolu Dosyaya Kaydet seçeneğini belirleyin.

  • Sekmede görüntülenen eşleşen metni aratmak için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

HTML sekmesi

HTML sekmesi HTML DOM'un tamamını bir ağaç yapısında görüntülemenize olanak tanır. Özelliklerini sekmenin sağ kısmında görüntülemek için öğeyi tıklatın. Ağaçtaki bir düğümü genişletmek veya daraltmak için + ve - simgelerini tıklatın.

HTML sekmesindeki herhangi bir nitelik veya metin öğesini düzenleyebilirsiniz ve düzenlenen değer uygulamaya yansır.

Denetle düğmesini tıklatın (AIR Introspector penceresindeki sekme listesinin solunda). Ana pencerenin HTML sayfasındaki herhangi bir öğeyi tıklatabilirsiniz ve ilişkili DOM nesnesi HTML sekmesinde görüntülenir. Ana pencere odağa sahip olduğunda, Denetleme düğmesini açıp kapatmak için de klavye kısayoluna basabilirsiniz. Klavye kısayolu varsayılan olarak F11'dir. Kısayol tuşunu F11 tuşundan başka bir tuş olarak yapılandırabilirsiniz; bkz. AIR Introspector'ı Yapılandırma .

HTML sekmesinde görüntülenen veriyi yenilemek için Etkin Pencereyi Yenile düğmesini (AIR Introspector penceresinin üst kısmında) tıklatın.

Sekmede görüntülenen metni eşleştirmek için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

DOM sekmesi

DOM sekmesi window nesnesini bir ağaç yapısında gösterir. Herhangi bir dize ve sayısal özelliği düzenleyebilirsiniz ve düzenlenen değer uygulamaya yansır.

DOM sekmesinde görüntülenen veriyi yenilemek için Etkin Pencereyi Yenile düğmesini (AIR Introspector penceresinin üst kısmında) tıklatın.

Sekmede görüntülenen metni eşleştirmek için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

Varlıklar sekmesi

Varlıklar sekmesi yerel pencerede yüklenen bağlantıları, görüntüleri, CSS'i ve JavaScript dosyalarını denetlemenize olanak tanır. Bu düğümlerden birini genişletmek dosyanın içeriğini gösterir veya kullanılan gerçek nesneyi görüntüler.

Varlıklar sekmesinde görüntülenen veriyi yenilemek için Etkin Pencereyi Yenile düğmesini (AIR Introspector penceresinin üst kısmında) tıklatın.

Sekmede görüntülenen metni eşleştirmek için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

Kaynak sekmesi

Kaynak sekmesi üç bölüm içerir:

  • Gerçek kaynak: Uygulama başladığında kök içerik olarak yüklenen sayfanın HTML kaynağını gösterir.

  • Çağrılan kaynak: Uygulamanın işaretleme kodunu Ajax teknolojisini kullanarak anında oluşturmasından dolayı gerçek kaynaktan farklı olabilen uygulama arabirimini oluşturan geçerli işaretlemeyi gösterir.

  • Uygulama dosyaları: Dosyaları uygulama dizininde listeler. Uygulama güvenlik sanal alanındaki içerikten başlatıldığında, bu liste yalnızca AIR Introspector için kullanılabilir. Bu bölümde, metin dosyalarının içeriğini veya görüntüleri inceleyebilirsiniz.

Kaynak sekmesinde görüntülenen veriyi yenilemek için Etkin Pencereyi Yenile düğmesini (AIR Introspector penceresinin üst kısmında) tıklatın.

Sekmede görüntülenen metni eşleştirmek için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

XHR sekmesi

XHR sekmesi tüm XMLHttpRequest iletişimini uygulamada kesiştirir ve bilgiyi kaydeder. Bu, XMLHttpRequest özelliklerini responseText ve responseXML (kullanılabilir olduğunda) dahil olarak bir ağaç görünümünde görüntülemenize olanak tanır.

Sekmede görüntülenen metni eşleştirmek için Windows'ta CTRL+F veya Mac OS'de Command+F tuşunu tıklatın. (Görünür olmayan ağaç düğümleri aratılmaz.)

AIR Introspector'ı uygulama harici sanal alandaki içerikle kullanma

Uygulama dışı sanal alanıyla eşleşen bir iframe veya frame öğesine uygulama dizininden içerik yükleyebilirsiniz. (ActionScript geliştiricileri için Adobe AIR'de HTML güvenliği bölümüne veya HTML geliştiricileri için Adobe AIR'de HTML güvenliği bölümüne bakın). AIR introspector uygulamasını bu tip içerikle kullanabilirsiniz ancak aşağıdaki kuralları inceleyin:

  • AIRIntrospector.js dosyası uygulama sanal alanı ve uygulama harici sanal alan (iframe) içeriklerinin ikisinde de bulunmalıdır.

  • parentSandboxBridge özelliğinin üzerine yazmayın; AIR Introspector kodu bu özelliği kullanır. Gerektikçe özellikler ekleyin. O zaman aşağıdakileri yazmak yerine:

    parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;

    Aşağıdaki gibi bir sözdizimi kullanın:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • AIR Introspector'ı F12 tuşuna basarak veya air.Introspector.Console sınıfındaki yöntemlerden birini çağırarak uygulama harici sanal alan içeriğinden açamazsınız. Introspector penceresini yalnızca Introspector'ı Aç düğmesine basarak açabilirsiniz. Düğme varsayılan olarak iframe veya karenin sağ üst köşesinde eklenir. (Uygulama harici sanal alan içeriğine uygulanan güvenlik kısıtlamalarından dolayı, yeni bir pencere yalnızca bir düğmeyi tıklatmak gibi bir kullanıcı hareketi sonucu açılabilir.)

  • Uygulama sanal alanı ve uygulama harici sanal alanı için ayrı AIR Introspector pencereleri açabilirsiniz. AIR Introspector pencerelerinde görüntülenen başlığı kullanarak ikisini ayırt edebilirsiniz.

  • AIR Introspector bir uygulama harici sanal alanda çalıştırıldığında Kaynak sekmesi uygulama dosyalarını görüntülemez.

  • AIR Introspector, yalnızca açıldığı sanal alandaki koda bakabilir.