Makale Özeti

Bu yazımızda IE 8.0 ile beraber gelen Developer Tools uygulamasını inceliyoruz.

Makale

Internet Explorer içerisinde en büyük eksikliklerden biri de biz yazılım geliştiriciler için gerekli profilleme de hata bulma araçlarına sahip olmamasıydı. Bunun için bazı durumlarda harici eklentiler kullanırken bazen alternatif tarayıcılara da yönelmek zorunda kalıyorduk. Bu yazımızda yukarıda bahsi geçen sorunları çözme amacıyla Internet Explorer 8.0'a eklenmiş olan "Developer Tools" uygulamasını inceleyeceğiz.

CSS ve HTML DOM gerçek zamanlı düzenleme

Internet Explorer 8.0 içerisinde Tools menüsünden ulaşabileceğiniz "Developer Tools" ayrı bir pencerede ayrı bir programmış gibi açılsa da tabi ki tarayıcı ile entegre çalışıyor. Açılan "Developer Tools" penceresinin sağ üst köşesinde "Pin" düğmesine basarsanız bu pencere kendini IE içerisine yerleştirecektir. Açtığınız herhangi bir sitenin  HTML DOM'unu incelemenin yanı sıra CSS konusunda raporlar da alabiliyorsunuz. Hangi CSS sınıfının nereden geldiği, ve sayfada geçerli olup olmadığını görebiliyorsunuz. Örneğin harici bir CSS ayarı local satır içi bir stil ayarı ile devre dışı bırakılmış olabilir. Tüm bunları rahatlıkla bir liste olarak görmek mümkün.

CSS ve DOM tam kontrol altında!
CSS ve DOM tam kontrol altında!

Yukarıdaki gördüğünüz ekranda sol tarafta sayfanın DOM ağacını inceleyebilirsiniz. DOM içerisinde herhangi bir element özel olarak seçildiğinde o elementi etkileyen tüm CSS sınıfları, özellikleri ve bu özelliklerin nereden geldikleri sağ tarafta görülebiliyor. Daha da güzeli sağ taraftaki herhangi bir özelliğe tıklarsanız istediğiniz bir değeri değiştirerek IE içerisinde gerçek zamanlı olarak sonucu görebiliyorsunuz.

İsterseniz "Developer Tools" içerisinde HTML tabından CSS tabına geçerek doğrudan sayfadaki tüm CSS özelliklerini yakalayabilir ve gerçek zamanlı olarak değişiklikler de yapabilirsiniz. Tüm bu değişiklikleri tamamladıktan sonra araç çubuğundaki "Kaydet" düğmesine basmanız CSS dosyanızın o anki hali ile kaydedilmesi için yeterli.

JavaScript Debuging

Visual Studio içerisinde JavaScript Debuging'e kıyasla çok daha başarılı bulduğum IE 8.0 Developer Tools içerisinde JavaScript araçlarının en büyük avantajı doğrudan IE ile beraber çalıştıkları için tarayıcı içerisindeki tüm aktiviteyi takip edebiliyor olmak. İsterseniz herhangi bir JavaScript değişkenine aynı Visual Studio içerisinde VB veya C# kodlarına yaptığımız gibi Watch'lar ekleyin veya istediğiniz bir adıma BreakPoint yerleştirin. Hatta F10 ve F5 gibi Visual Studio kısayolları bile aynı.

JavaScript tarafında Watch koyarak durumu takip edin.
JavaScript tarafında Watch koyarak durumu takip edin.

Özellikle Silverlight 1.0 tarafında yazılan JavaScript kodlarının veya AJAX tarafında yazılan veri ulaşım kodlarının incelenmesi ve hataların bulunması epey kolaylaşmış durumda. Aşağıdaki görsel içerisinde JavaScript ile tanımlanmış bir Silverlight nesnesinin Source özelliğine verilen değeri doğrudan "Locals" tabı üzerinden giderek sayfada tanımlanmış tüm JavaScript nesnelerini listeleyip bulabiliyoruz. Tüm bunları yaparken istediğiniz anda herhangi bir değişkenin değerini Developer Tools içerisinde değiştirebilirsiniz, sonucu gerçek zamanlı olarak IE içerisinde göreceksiniz.

JavaScript tarafındaki sayfada bulunan tüm nesneler ve değişkenler düzenlenebiliyor.
JavaScript tarafındaki sayfada bulunan tüm nesneler ve değişkenler düzenlenebiliyor.

Profiler ile optimizasyon

Yazdığımız kodun ne kadar optimize olduğunu anlamak çok önemli. Bunun için tam olarak hangi kodun daha çok zaman aldığını bilmeliyiz. Özellikle SQL tarafında alışık olduğumuz Profiler sistemine benzeyen bir yapı ile artık IE üzerinde de Developer Tools içerisinde bir Profiler bulunuyor. "Start Profiler" düğmesine bastıktan sonra IE penceresine geçip site üzerinde istediğiniz işlemleri yapabiliyorsunuz. Sonra Developer Tools'a dönerek "Stop Profiler" dediğinizde geçen süre içerisinde yaptığınız tüm işlemlerin bir listesi karşınıza çıkıyor. Bu listeyi ister bir "Function" listesi olarak alın ister bir ağaç görüntüsünde hangi function'ın hangisini çağırdığına bakarak inceleyin. Önemli olan artık hangi işlemin ne kadar sürdüğünü görebiliyor olmamız.

Kod optimizasyonu için Profiler
Kod optimizasyonu için Profiler

Image Optimizasyonu

Bazı durumlarda bir web sitesine koyduğumuz resmin hem en ve boy boyutu hem de dosya boyutuna bakabilmek için doğrudan dosyanın kendisini bulmamız gerekebilir. Developer Tools içerisinde Image menüsü böyle bir durumda yardımımıza koşuyor ve doğrudan gerçek zamanlı olarak gezdiğiniz tüm sitelerdeki resimlerin boyutlarını resimlerin üzerine yazıyor. Gerçekten hoş bir özellik.

Gerçek zamanlı olarak sitedeki resimlerle ilgili detayları görebilirsiniz.
Gerçek zamanlı olarak sitedeki resimlerle ilgili detayları görebilirsiniz.

Pratik araçlar

Bir sayfadaki tüm DIV'leri görmek mi istiyorsunuz, tek yapmanız gereken "Outline" menüsünden DIV seçeneğini işaretlemek. Böylece gerçek zamanlı olarak sayfa içerisinde tüm DIV'ler ayrıca birer çerçeve içine alınacaktır. Sadece DIV elementleri değil istediğiniz bir elementi kendiniz de belirterek aranmasını sağlayabilirsiniz.

Tools menüsünden "Show Ruler" özelliği ile fare ile ekranda tıkladığınız iki nokta arasında mesafeyi piksel olarak ölçebilir bu mesafeler arasında X ve Y koordinatları farkları görebilirsiniz.

Pratik araçlardan biri : Cetvel!
Pratik araçlardan biri : Cetvel!

Aynı menüdeki "Show Color Picker" ile gezdiğiniz sitedeki herhangi bir rengi seçebilir RGB ve HEX renk kodlarını alabilirsiniz. "Resize" menüsünden ekran çözünürlükleri seçerek tarayıcının otomatik olarak farklı ekran çözünürlüğündeymiş gibi boyutlandırılmasını sağlayabilirsiniz.

Sonuç

IE 8.0 çok ilginç ve güzel yenilikler ile geliyor. IE içerisinde bu kadar geniş özelliklere sahip bir  Developer Tools paketi görmek çok sevindirici. Umarım daha yeni özellikler ile IE'nin sonraki sürümlerinde de gelişmeye devam eder.

Hepinize kolay gelsin.

Daron Yöndem
MVP, MCT, MCPD, MCITP, MCTS
MCSD, MCAD, MCDBA, MCP, ACP, ICSD
Blog: http://daron.yondem.com
Sorularınız için: http://daron.yondem.com/tr/sorusor