Web sayfası hatası ayıklama. Internet Explorer'daki komut dosyası hataları. Nedenleri ve çözümleri. SQL sorgularının profilini oluşturma Bir web sayfasında hata ayıklama

İnternette gezinirken internet tarayıcısı Explorer size sayfanın hatalar içerdiğini ve düzgün görüntülenmediğini belirten mesajlar verebilir. Bu sorunu çözmenin birkaç yoluna bakalım.

Talimatlar

Tarayıcının çalışmasında periyodik olarak ortaya çıkan bir hata dışında görünür bir zorluk yoksa, mesajın artık görünmemesi için komut dosyası hata ayıklamasını devre dışı bırakmayı deneyebilirsiniz (hata birden fazla sitede aynı anda görünüyorsa, sonraki adıma geçin) adım). Araçlar menüsünden İnternet Seçenekleri'ni açın, Gelişmiş sekmesini seçin ve "Kod hata ayıklamasını devre dışı bırak" onay kutusunu işaretleyin. Tüm hatalar için bildirimi kapatmak istiyorsanız "Her komut dosyası hatası için bildirimi göster" onay kutusunun işaretini kaldırın.

Sorunun yerel olup olmadığını görmek için hataya neden olan siteyi farklı bir hesaptan veya farklı bir bilgisayardan açmayı deneyin. Hata ortaya çıkarsa, büyük olasılıkla yanlış web sayfası kodundan kaynaklanmaktadır. Bu durumda, önceki adımdaki talimatları izleyerek komut dosyası hata ayıklamasını devre dışı bırakabilirsiniz. Farklı bir bilgisayar veya hesap kullanarak siteye göz attığınızda sorun ortadan kalkarsa bir sonraki adıma geçin.

Muhtemelen tarayıcı İnternet Explorer sayfaların görüntülenmesi sırasında sayfadaki bilgilerin görüntülenmesini belirleyen aktif komut dosyalarını, Java ve ActiveX'i engellemez. Sorunu çözmek için tarayıcınızın güvenlik ayarlarını sıfırlamanız gerekir. Bunu yapmak için “Araçlar” menüsünde “İnternet Seçenekleri”ni seçin ve “Güvenlik” sekmesine gidin. "Varsayılan" düğmesini ve ardından "Tamam"ı tıklayın. Hatanın oluştuğu sayfayı yeniden çalıştırdıktan sonra sorun devam ederse sonraki yöntemi deneyin.

Bildiğiniz gibi tarayıcı, geçici dosyaları ve sayfaların kopyalarını daha sonra erişim için ayrı bir klasörde saklar. Klasör boyutu çok büyürse bazı sayfalar düzgün görüntülenmeyebilir. Sorun, klasörü geçici dosyalarla periyodik olarak boşaltarak çözülebilir. Bunu yapmak için Araçlar menüsünden İnternet Seçenekleri iletişim kutusunu açın. Genel sekmesinin Geçmiş grubunda Sil düğmesini tıklayın. Geçici İnternet Dosyaları, Çerezler, Günlük ve Web Formu Verileri kutularını işaretleyin ve Tamam'a tıklayın.

Elbette başkaları da var - onlardan kesinlikle bahsedeceğim.

Firefox için Firebug

olup olmadığından emin değilim Ateşböceği diğer geliştirici araçlarının atası, ancak günümüzde kesinlikle en popüler, kullanışlı ve işlevsel olanıdır.

Firebug, Firefox için bir eklentidir, yani onu Firefox eklentileri web sitesinden indirip yüklemeniz gerekir.

Yangın böceğini tetiklemek için F12 tuşuna basmanız yeterlidir.

Bu eklentinin özellikleri:

• Dinamik olarak değişen HTML'yi inceleme ve düzenleme;
• Anında CSS düzenleme;
• JavaScript'te hata ayıklama, Komut satırı komut dosyalarını yürütmek için;
• Ağ isteklerini izleme - dosya ve komut dosyalarının boyutlarını ve indirme sürelerini, istek başlıklarını görebilirsiniz;
• DOM ayrıştırıcısı.

Bu olasılıklar hakkında uzun süre ayrıntılı olarak konuşabiliriz, ancak sanırım tüm okuyucularımız bunları biliyor, değilse de - detaylı bilgi Firebug'un ana sayfasında ya da Ilya Kantor'un çevirisinde aynı şey var.

Kundakçının kendisine ek olarak onu da faydalı bulabilirsiniz faydalı losyon ona - Ateş Kurabiyesi(sürpriz:-) ile çerezleri görüntüleyebilir ve değiştirebilirsiniz.

Firefox için WEB Geliştirici Araç Çubuğu

Ognelis'e bir başka faydalı katkı. Şuna benziyor:

Nokta nokta bakalım.

Devre dışı bırakmak

JavaScript'i kapatmanıza ve geliştirme sırasında çok yararlı olan önbellek kullanımını devre dışı bırakmanıza olanak tanır (sayfanın birlikte yüklendiğinden emin olmanızı sağlar). En son güncellemeler), sayfada kullanılan renkleri iptal edin ve standart renklerle değiştirin, yönlendiren başlığının (yönlendirmenin yapıldığı sayfa) gönderilmesini yasaklayın.

Kurabiye

Çerezlerle çalışmak için kullanışlı bir seçenek: bunları görüntüleyebilir, silebilir, reddedebilir ve ekleyebilirsiniz.

CSS

Bu menü, Geliştirici Araç Çubuğunun en harika özelliği olan CSS'yi anında düzenlemeyi depolar. Ayrıca css'i görüntülemek, devre dışı bırakmak vb. işlemleri yapmak da mümkündür. Bana göre kısayol tuşlarının varlığı burada çok faydalı (örneğin CTRL+SHIFT+C, doğrudan sayfa stillerini görüntülemeye gitmenizi sağlar)

Formlar

Formlarla çalışmaya yönelik her şey: şifreleri gösterme, formlarla ilgili bilgileri gösterme, form dönüştürme yöntemlerini (GET » POST ve tersi) ve çok daha fazlasını. Yararlı bir işlev, form alanlarını otomatik olarak doldurmak için "Form Alanlarını Doldur" (örneğin, bir siteyi test ederken, şifreleri hatırlama işlevi devre dışı bırakıldığında). Aksi takdirde, bu öğede yararlı bir şey göremiyorum.

Görüntüler

Sitenizin resimler olmadan nasıl göründüğünü görmek için resimleri devre dışı bırakmanın yararlı bir işlevi vardır. Resimleri daire içine alabilir, boyutlarını gösterebilir ve alt niteliklerini gösterebilirsiniz.

Bilgi

Bu menüde çok fazla seçenek var. Sınıf ve kimlik niteliklerinin sayfada görüntülenmesi işlevi yararlı olabilir. Ek olarak, sayfada kullanılan renkler hakkında hızlı bir şekilde bilgi edinmek için "Renk Bilgilerini Görüntüle" öğesi ilginçtir. “Belge boyutunu görüntüle” - sayfa boyutunu görüntüleyin. “Yanıt Başlıklarını Görüntüle” - sayfa başlıklarını görüntüleyin.

Çeşitli

En sık kullanılan işlev önbelleği temizlemektir. Ek olarak, burada mevcut olan işlevler şunlardır: "Sayfa cetveli" - bir cetvel, "Sayfa Büyüteci" - bir büyüteç ve "Çizgi kılavuzları" - bir şablonu kırpmak için yararlı olabilecek birkaç çizgi.

Taslak

Farklı sayfa öğelerinin (tablolar, başlıklar, bağlantılar, çerçeveler, bloklar) vurgulanması. Yeniden Boyutlandır, tarayıcı penceresini herhangi bir standart ekran uzantısına uyacak şekilde yeniden boyutlandırmanıza olanak tanır. Sayfa doğrulamaya yönelik araç özellikleri burada saklanır. Hem yerel hem de harici. Kullanışlı ve hızlı erişim HTML, CSS vb.'nin doğrulanmasına HTML'yi doğrulamak için CTRL+SHIFT+H klavye kısayolunu kullanabilirsiniz.

Kaynağı Görüntüle

Görüş kaynak kodu. Oluşturulan kodu görüntüleyerek harici bir uygulamada görüntüleme imkanı.

En çok sağ köşedekini beğendim. Hızlı bir HTML, CSS doğrulayıcı ve JavaScript hata göstergesidir. Herhangi bir sorun yoksa simge yeşil, sorun varsa simge kırmızıdır.

Internet Explorer Geliştirici Araç Çubuğu

8.0'dan başlayarak, hata ayıklama özelliği bu tarayıcıda zaten yerleşiktir. Kolayca çağrılabilir F12 tuşu. Doğru, 90'lardaki bir program kadar zayıf.

Ancak bu tarayıcı için Internet Explorer Geliştirici Araç Çubuğu adı verilen ve bağlantıdan indirilebilen çok daha havalı bir araç var.

Görünüşte, bu araç çubuğu elbette kundakçıya benziyor, ancak ne yazık ki henüz olgunlaşmadı. Öte yandan firebug'un sahip olmadığı bazı yeteneklere de sahiptir. Internet Explorer Geliştirici Araç Çubuğu'nu Firebug'un bir tür melezi olarak adlandırabilirim. FireFox WEB Geliştiricisi Araç Çubuğu.

Kundakçıda olduğu gibi, bir elemanı incelemek mümkündür basit bir tıklamayla. Ancak, dolguyu ve kenar boşluklarını hemen görebilirsek burada böyle bir fırsat yoktur.

Ayrıca Internet Explorer Geliştirici Araç Çubuğu, Firebug'un yaptığı gibi öğe ağacını dinamik olarak güncellemez. Yani js kullanarak sayfada herhangi bir değişiklik yaparsak bu araç çubuğunu kullanarak hiçbir şey görmeyiz.

Keyfini çıkarabileceğiniz şeyler anında CSS'yi değiştirmek (neyi hackleyeceğinizi bulmanın kolay bir yolu :), CSS'yi ve görüntüleri devre dışı bırakma yeteneği, önbelleği hızlı bir şekilde temizleme ve çerezlerle oynama yeteneği, doğrulamaya hızlı erişim.

En iyi bölüm: Pipet kullanarak sayfadan istediğiniz rengi almanızı sağlayan yerleşik bir renk seçici vardır. (ff için ayrı bir ColorZilla eklentisi vardır).

Internet Explorer için DebugBar'da Hata Ayıklama

Internet Explorer için DebugBar verilen bağlantıdan indirilebilir.

Kendi başına ilginç bir uzantı. Tarayıcıya ek panel olarak yüklendi:

Bazı nedenlerden dolayı yerleşik bir arama motoru, bir damlalık, pencerenin boyutunu değiştirme yeteneği ve yine bazı nedenlerden dolayı bir arkadaşınıza sabun için bir sayfa gönderme yeteneği var. Yine de bu faydalı olabilir. Ancak bu fırsattan yararlanamadım.

Ayrıca bir müfettiş var:

Geliştiriciler, tıklayarak veya işaretleyerek inceleme yönteminden memnun değildi: daha ilginç bir şey buldular. DebugBar'da artı işaretini ağaçta görmek için istenen öğenin üzerine sürüklemeniz gerekir. CSS'yi düzenleme yeteneği yoktur. Ancak bir doğrulayıcı ve yerleşik bir js konsolu var.

Ve eğer ayarlara girerseniz şunu bulabilirsiniz:

Hem komik, hem üzücü.

Geliştirici Araç Çubuğunun sekizinci explorer'a yerleştirileceği biliniyor. Üçüncü paragrafta anlatılana benzer olacak ama daha iyi olacağını umuyoruz.

Opera için DragonFly'da hata ayıklama

DragonFly, 9.5 sürümünden itibaren Opera'ya yerleşiktir, dolayısıyla yüklemeye gerek yoktur. Dragonfly'ı etkinleştirmek için Araçlar → Gelişmiş → Geliştirici Araçları'na gidin. Ve eğer İngilizce ise, Araçlar → Gelişmiş → Geliştirici Araçları.

DragonFly'ın Alpha2 aşamasında olduğu konusunda sizi hemen uyaracağım, bu onun birçok kusurunu açıklıyor.

Özellikler listesi:

• DOM denetçisi;
• Tıklayarak inceleyin (yine FireFox'taki gibi girinti görmeyeceğiz);
• Düzenleme;
• Hata konsoluna hızlı erişim.

DF, çerçevedeki ayrı bir sayfaya benzer. Eğer açarsanız, tüm sekmeler için açık olacaktır (firebug'un aksine). Bu nedenle bir öğeyi incelemeden önce görüntülemek istediğimiz sayfayı listeden seçmeliyiz.

Ne yazık ki burada, Internet Explorer Dav Araç Çubuğu'nda olduğu gibi dinamik olarak oluşturulan öğeler görüntülenmiyor. Ve genel olarak sayfayı incelediğimizde hiçbir JavaScript başlatılmıyor: bağlantılar ve düğmeler tıklanmıyor. Umarız DragonFly piyasaya sürülmeye yaklaştığında tüm bu özellikleri görürüz.

Safari'de WEB Denetleyicisinde Hata Ayıklama

Hemen bunun tarayıcıyla ilgili olduğunu söyleyeceğim Safari Bilgileri kaçırdım, dolayısıyla dedikleri gibi malzemenin yeterliliğinden sorumlu değilim.

Safari menüsündeki "Geliştirme" öğesini etkinleştirmek için ayarlarda ("Gelişmiş" sekmesi) ilgili öğeyi etkinleştirmeniz gerekir:

“Geliştirme” menüsünde aşağıdaki işlevler mevcuttur:

WEB denetçisine daha yakından bakalım:

Denetleyici varsayılan olarak HTML görünüm modunda açılır. Ancak DOM görünüm moduna geçirilebilir. Bu amaçla üst plaka üzerinde bir anahtar bulunmaktadır. Denetleyicide bir öğenin üzerine geldiğinizde bu öğe sayfanın kendisinde vurgulanacaktır. FireBug'da olduğu gibi anında dolguyu göremezsiniz, işaretlemeyi veya CSS'yi değiştiremezsiniz veya DOMe'de dinamik değişiklikleri anında göremezsiniz. Ama itiraf etmelisiniz ki çok sevimli görünüyor.

Denetleyiciyle bir tarayıcı penceresinde çalışmak istiyorsanız sol alt köşedeki butona tıklayabilirsiniz.

Safari'de bile "Ağ Zaman Çizelgesi" gibi bir işlev mevcuttur (denetçideki "Ağ" düğmesi):

Dosyaların indirilmesinin ne zaman ve ne kadar süreceğini net bir şekilde görebilirsiniz. Ayrıca istek başlıklarını da görüntüleyebilirsiniz ancak ne yazık ki içeriğin kendisini görüntüleyemezsiniz.

Google Chrome'da geliştiriciler için hata ayıklama

Lame gelişmiş bir formda doğdu ve şimdilik çarpık da olsa, geliştiriciler için hala araçlara sahip oldu.

• DOM Denetleyicisi;
• javascript hata ayıklayıcısı;
• JavaScript Konsolu.

Herhangi bir öğeyi incelemek için üzerine sağ tıklamanız ve içerik menüsü“Eleman kodunu görüntüle”yi seçin:

İşlevsellik Safari'dekiyle aynıdır: Öğeler fareyle üzerine gelindiğinde vurgulanır, ancak CSS ve HTML düzenlemesi kullanılamaz ve DOM'daki değişiklikler izlenmez. Ancak denetçiyi tarayıcı penceresine bağlaması gereken sol alt köşedeki düğme çalışmıyor.

“Kaynaklar” sekmesinde aşağıdakileri görebiliriz:

Safarideki ölçekten biraz farklı. Bu şemadaki yarı saydam, ilgili dosya boyutlarını gösterirken tam renkli, yükleme süresini gösterir. Öyle ya da böyle, Chrome'un bu bölümünün henüz tamamlanmaktan uzak olduğu açık.

Bu yazıda en ünlü tarayıcı uzantılarına ve yerleşiklerine baktım.

Örneğin başkaları da var:

• Internet Explorer WEB Geliştirme Yardımcısı - ASP.NET geliştiricileri (Internet Explorer) için iyi bir yardımcı;
• WEB Geliştirici Araç Çubuğu - Internet Explorer ve FireFox için araç çubuğu. Birkaç kullanışlı özellik vardır;
• WEB Erişilebilirlik Araç Çubuğu - Internet Explorer için araç çubuğu. İlginç bir şey yok.

Bahsetmediğim ama olması gereken eklentiler varsa veya bahsedilen eklentilerin gözden kaçırdığım fonksiyonları varsa lütfen yazın.

Sağlığınız için tadını çıkarın!

HTML yazmak harikadır, ancak bir şey çalışmadığında hatanın nerede olduğunu nasıl anlarsınız? Bu makalede, HTML'deki hataları bulmanıza ve düzeltmenize yardımcı olabilecek çeşitli araçlar açıklanmaktadır.

Hata ayıklama korkutucu değil

Bir kod yazdığınızda, genellikle bir hata yapana kadar her şey yolunda gider. Yani kodunuz çalışmıyor veya istediğiniz gibi çalışmıyor. Bozuk bir Rust programını derlemeye çalışırsanız derleyici bir hata gösterecektir:

Bu durumda, hata mesajının anlaşılması nispeten basittir - "sonlandırılmamış çift tırnak dizisi". println!(Merhaba dünya!"); dosyasına yakından bakarsanız eksik olduğunu fark edeceksiniz. çift ​​tırnak. Elbette, kodunuz büyüdükçe hata mesajlarının anlaşılması çok daha zor hale gelebilir ve en basit durumlar bile Rust hakkında hiçbir şey bilmeyenler için göz korkutucu görünebilir.

Ancak hata ayıklamaktan korkmayın! Herhangi bir kodu rahatça yazmak ve hata ayıklamak için dili ve araçlarını anlamanız gerekir.

HTML ve Hata Ayıklama

HTML'yi anlamak Rust kadar zor değil. HTML, tarayıcı onu ayrıştırıp sonucu görüntülemeden önce başka bir biçimde derlenmez (derlenmez, yorumlanır). HTML öğelerinin sözdizimi Rust, JavaScript veya Python gibi "gerçek programlama dillerinden" çok daha açıktır. Tarayıcıların HTML'yi okuma şekli daha fazladır hoşgörülü kodlarını daha sıkı yorumlayan programlama dillerinden daha iyidir. Bu hem kötü hem de iyi.

Toleranslı kod

Peki hoşgörülü ne anlama geliyor? Genel anlamda, kodunuzu karıştırdığınızda iki tür hatayla karşılaşırsınız:

• Sözdizimi hataları: Bunlar yukarıdaki Rust örneğinde olduğu gibi yazım hatalarıdır. Dilin sözdizimine ve hata mesajlarının ne anlama geldiğine aşina olduğunuz sürece bunları düzeltmek genellikle kolaydır.
• Mantık hataları: Bunlar söz dizimi doğru olduğu halde kodun amacını yerine getirmemesi yani programın doğru çalışmaması durumunda ortaya çıkan hatalardır. Bunları düzeltmek sözdizimi düzeltmelerinden daha zordur çünkü nerede hata yaptığınızı gösteren hiçbir mesaj yoktur.

HTML sözdizimi hatalarından etkilenmez çünkü tarayıcı kodu toleranslı bir şekilde okur, yani sözdizimi hataları olsa bile sayfalar oluşturulabilir. Tarayıcıların, yanlış yazılan işaretlemeyi yorumlamak için yerleşik kuralları vardır ve başka bir şeyi kastetmiş olsanız bile, bir şeyi çalıştırabilirsiniz. Bu gerçek bir sorun olabilir!

bir notta: HTML okunabilir çünkü web ilk ortaya çıktığında, insanların kod yanlış olsa bile içerik yayınlamasına izin verilmesine karar verildi, çünkü bu, sözdiziminin kesinlikle doğru olduğundan emin olmaktan çok daha önemlidir. Yeni gelenlere karşı katı bir tutum olsaydı, web bugün bu kadar popüler olmazdı.

Aktif Öğrenme: Hoşgörülü Kodla Tanışın

HTML'de toleranslı kodun doğasını keşfetmenin zamanı geldi.

HTML Doğrulaması

Yukarıdaki örnekten HTML'nin geçerliliğini kontrol etmeye değer olduğu açıktır. Yukarıdaki basit örnekte, kodun tamamını inceleyerek hataları bulabilirsiniz, peki ya devasa, karmaşık sayfalar?

Sayfayı bir işaretleme doğrulama hizmetinde kontrol etmek en iyisidir. HTML, CSS ve diğer web teknolojilerinin özellikleriyle ilgilenen bir kuruluş olan W3C tarafından oluşturulmuş ve bakımı yapılmıştır. Hizmet, HTML'nizi kontrol edecek ve içindeki hatalar hakkında bir rapor oluşturacaktır.

HTML, dosyayı indirerek veya sayfaya kopyalayarak adreste kontrol edilebilir.

Aktif öğrenme: Bir HTML belgesini doğrulama

1. Tarayıcınızda işaretleme doğrulama hizmetini açın.
2. Doğrudan Girişle Doğrula moduna geçin.
3. Belge kodunun tamamını (yalnızca gövdeyi değil) kopyalayın ve giriş alanına yapıştırın.
4. Basmak Kontrol etmek.

Hataların ve diğer bilgilerin bir listesini göreceksiniz.

Hata Mesajlarıyla Çalışmak

Genellikle mesajların ne anlama geldiği hemen anlaşılır, ancak bazen neler olduğunu anlamak için çok çalışmanız gerekir. Şimdi tüm hataları gözden geçireceğiz ve ne anlama geldiklerini anlayacağız. Hataların bulunmasını kolaylaştırmak için mesajların kod satırını ve sütununu gösterdiğini lütfen unutmayın.

• "Bitiş etiketi ima edildi, ancak açık öğeler vardı" (2 örnek): Açık bir kapanış etiketi yok, ancak tarayıcı nerede olması gerektiğini tahmin edebiliyor. Mesaj, kapanış etiketinin beklendiği satırdan sonraki satıra işaret ediyor, ancak doğru yeri bulacaksınız.
• "Kapatılmamış eleman güçlü": Bu çok basit hata- öğe), içeriğinin büyük önem taşıdığını, ciddiyetini veya aciliyetini belirtir. Tarayıcılar genellikle içeriği görüntüler kalın harflerle."> kapalı değildir ve mesaj doğrudan açılış etiketine işaret eder.
• "Güçlü bitiş etiketi yuvalama kurallarını ihlal ediyor": Öğe yanlış şekilde yuvalanmış - bu düzeyde eşleşen bitiş etiketi yok.
• "Bir öznitelik değerinin içindeyken dosyanın sonuna ulaşıldı. Etiket göz ardı ediliyor": Gizemli mesaj. Gerçek şu ki, bir yerde (büyük olasılıkla belgenin sonunda) öğenin özelliği yanlış yazılmış ve dosyanın sonu bu özelliğin içinde kalmıştı. Bağlantı tarayıcıda görünmüyor; büyük olasılıkla sorun bağlantının yanındadır.
• "Dosyanın sonu görüldü ve açık öğeler vardı": Dosya sona erdi ancak bazı öğeler kapatılmadı. Mesaj dosyanın sonunu belirtir, bu durumda öğe kapatılmaz örnek: Mozilla ana sayfasına bağlantı ↩

↩ ↩

Çoğu zaman, kullanıcılar tarayıcıda (IE) bir komut dosyası hata mesajının göründüğü bir durumu gözlemleyebilirler. Durum izole edilmişse endişelenmenize gerek yoktur, ancak bu tür hatalar düzenli hale geldiğinde sorunun doğası hakkında düşünmeye değer.

Internet Explorer'daki bir komut dosyası hatası genellikle tarayıcının HTML sayfa kodunu düzgün şekilde işlememesinden, geçici Internet dosyalarının varlığından, hesap ayarlarından ve diğer birçok nedenden kaynaklanır. konuşacağız bu malzemede. Bu sorunun çözümüne yönelik yöntemler de tartışılacaktır.

Komut dosyası hatalarına neden olan Internet Explorer sorunlarını tanılamaya yönelik yaygın yöntemleri kullanmaya başlamadan önce, hatanın yalnızca belirli bir sitede değil, aynı anda birden çok web sayfasında meydana geldiğinden emin olmanız gerekir. Ayrıca bu sorunun başka bir yerde meydana geldiği web sayfasını da kontrol etmeniz gerekir. hesap, farklı bir tarayıcıda ve farklı bir bilgisayarda. Bu, hatanın nedenini aramayı daraltmanıza ve mesajların PC'deki belirli dosyaların veya ayarların varlığının bir sonucu olarak ortaya çıktığı hipotezini hariç tutmanıza veya onaylamanıza olanak tanır.

Internet Explorer aktif komut dosyalarını, ActiveX ve Java'yı engelleme

Aktif komut dosyaları, ActiveX ve Java kontrolleri, bilgilerin sitede oluşturulma ve görüntülenme şeklini etkiler ve bunlar kullanıcının bilgisayarında engellenirse, daha önce açıklanan sorunun gerçek nedeni olabilir. Komut dosyası hatalarının bu nedenle oluştuğundan emin olmak için tarayıcınızın güvenlik ayarlarını sıfırlamanız yeterlidir. Bunu yapmak için aşağıdaki önerileri izleyin.

• Internet Explorer 11'i açın
• Hizmet

• Pencerede sekmeye gidin Emniyet
• Ardından düğmeye tıklayın Varsayılan ve ardından düğme TAMAM

Internet Explorer geçici dosyaları

Bir web sayfasını her açtığınızda, Internet Explorer tarayıcısı bu web sayfasının yerel bir kopyasını bilgisayarınıza geçici dosyalar olarak kaydeder. Bu tür dosyalar çok fazla olduğunda ve bunları içeren klasörün boyutu birkaç gigabayta ulaştığında, web sayfasının görüntülenmesinde sorunlar ortaya çıkabilir, yani bir komut dosyası hata mesajı görünebilir. Geçici dosyalar klasörünüzü düzenli olarak temizlemek bu sorunun çözülmesine yardımcı olabilir.
Geçici İnternet dosyalarını silmek için aşağıdaki adımları izleyin.

• Internet Explorer 11'i açın
• Hizmet
• Pencerede sekmeye gidin Yaygındır
• Bölümde Tarayıcı geçmişi düğmeye bas Silmek…

• Pencerede İnceleme geçmişini silmeöğelerin yanındaki kutuları işaretleyin Geçici İnternet ve Web Sitesi Dosyaları, Kurabiye ve web sitesi verileri, Dergi
• Düğmeye bas Silmek

Antivirüs yazılımının çalışması

Komut dosyası hataları işlem sırasında mümkündür antivirüs programı bir sayfadaki aktif komut dosyalarını, ActiveX ve Java kontrollerini veya geçici tarayıcı klasörlerini engellediğinde. Bu durumda, yüklü antivirüs ürününün belgelerine bakmanız ve geçici İnternet dosyalarını kaydetmek için klasörlerin taranmasını ve ayrıca etkileşimli nesnelerin engellenmesini devre dışı bırakmanız gerekir.

HTML sayfa kodunun yanlış işlenmesi

Genellikle belirli bir sitede görünür ve sayfa kodunun Internet Explorer ile çalışacak şekilde tamamen uyarlanmadığını gösterir. Bu durumda, tarayıcıda komut dosyası hata ayıklamasını devre dışı bırakmak en iyisidir. Bunu yapmak için şu adımları izleyin:

• Internet Explorer 11'i açın
• Tarayıcının üst köşesindeki (sağ) simgeye tıklayın Hizmet bir dişli biçiminde (veya Alt+X tuş kombinasyonu). Daha sonra açılan menüde seçeneğini seçin.
• Pencerede sekmeye gidin bunlara ek olarak
• Ardından kutunun işaretini kaldırın Her komut dosyası hatası için bildirim göster ve düğmeye basın TAMAM.

Bu en çok olanların listesi ortak nedenler Internet Explorer'da komut dosyası hatalarına neden olan bu tür mesajlardan sıkıldıysanız, biraz dikkat edin ve sorunu kesin olarak çözün.

Açık şu an Mevcut HTML standartlarını değişen derecelerde destekleyen çok sayıda farklı tarayıcı vardır. Şahsen ben Mozilla Corporation'ın tarayıcısını tercih ediyorum. Bu tarayıcının uzun bir geçmişi vardır (ünlü Netscape Navigator tarayıcısını temel alır). Bu tarayıcıyı da seviyorum çünkü bir eklenti sistemini destekliyor - ayrı olarak dağıtılan eklentiler, bağlandığında işlevselliği değiştirebilir ve ihtiyaçlarınıza göre özelleştirebilirsiniz. Ve son olarak, bu tarayıcının serbestçe dağıtılması ve açık kaynak olması da önemlidir. Bu nedenle, bu tarayıcının yalnızca kullanıcıya değil, aynı zamanda Web sayfalarının geliştiricisine de sağladığı yetenekleri, yazılı ürünlerde hata ayıklama işleminin ne kadar kolay ve kullanışlı olabileceğini anlatmaya karar verdim.

Mozilla Firefox geliştiriciler ve web geliştiricileri arasında en popüler tarayıcılardan biridir. Bu tarayıcının oluşturulan projelerde hata ayıklama, hataları düzeltme ve iyileştirme konusunda sağladığı fırsatlar nedeniyle dikkatlerini çekiyor. Standart tarayıcı paketi bir Java konsolu (veya “hata konsolu”) içerir. Bu yardımcı program, yerleşik Java komut dosyası komut dosyalarında hata ayıklamanıza olanak tanır. Ancak tarayıcıya, Mozilla Vakfı'nın resmi web sitesinden indirilip kurulabilen üçüncü taraf eklentiler tarafından çok daha fazla işlevsellik sağlanır. Şimdi bu eklentilerden ikisine bakmak istiyorum: Web Developer ve Firebug. Bu eklentilerin her ikisi de resmi eklenti web sitesindeki yukarıdaki bağlantılardan indirilebilir. Bunları yükledikten ve tarayıcıyı yeniden başlattıktan sonra geliştiricinin, her eklenti için sırasıyla aşağıda anlatacağım geniş bir olasılık yelpazesi vardır.

Firebug eklentisi

Resmi sayfada belirtildiği gibi: “Firebug, geliştirici araç setini büyük ölçüde zenginleştirmek için Firefox tarayıcısıyla bütünleşir. Herhangi bir web sayfasında canlı olarak CSS, HTML ve Javascript'i düzenleyebilecek, hata ayıklayabilecek ve inceleyebileceksiniz." Ve gerçekten de öyle. Bu eklentinin bazı işlevlerine bakalım:

• HTML'yi görüntüleme ve düzenleme.
• CSS oluşturma.
• Ağ İsteği İzleme
• JavaScript'te hata ayıklama
• JavaScript Araştırması
• JavaScript için günlüğe kaydetme

Bu, tüm yeteneklerinin tam listesi değildir. Proje açık kaynak olduğundan herkes değişiklik yapabilir ve işlevsellik ekleyebilir.

Eklentiyle çalışmak için F12 tuşuna basmalısınız (bununla ayrı bir pencerede çalışmak için Ctrl-F12). Başarılı bir lansmandan sonra aşağıdakileri elde ederiz - Şekil 1a, 1b.

Şekil 1a. Firebug eklentisinin ilk penceresi.

Şekil 1b. Firebug eklentisinin ilk penceresi.

Daha sonra eklentiyle asıl çalışma başlıyor. Diyelim ki HTML kodunda şu veya bu nesneyi bulmamız veya bunun tam olarak nasıl uygulandığını belirlememiz gerekiyor. CSS kullanma mevcut fragent. Bunu yapmak için, eklenti penceresi menüsünde gerekli seçenekleri fareyle seçmeniz yeterlidir. Aşağıdaki örnek, İnceleme modundaki HTML'dir. Şimdi belge sayfasına gittiğimizde fare imlecinin altında üzerinde çalıştığımız alanı gösteren dikdörtgen bir alan göreceğiz. Eklenti penceresinde kullanılan HTML ve CSS parametrelerini göreceğiz. Ayrıca her birine tıklayarak değişiklik yapabilir ve zaman içinde bunları takip edebilirsiniz. Açıklanan eylemler Şekil 2,3,4'te gösterilmektedir.

Bu projenin geliştirilmesi sırasında yukarıda açıklanan eklenti tam olarak bu amaçlar için kullanıldı. Bununla birlikte, burada hiçbir Java betiği kullanılmamasına rağmen, hata ayıklamak için firebug eklentisi de kullanılabilir. Hata ayıklamanın bir örneği Şekil 5'te gösterilmektedir.

Yukarıda açıklandığı gibi bu uzantının işlevselliği bununla sınırlı değildir. Mozilla Firefox kurulumu yaptıktan sonra verilen bağlantılardan indirerek tamamını inceleyebilir ve ihtiyaçlarınız doğrultusunda kullanabilirsiniz.

Web Geliştirici eklentisi

Web Geliştiricisi ikinci uzantıdır Mozilla tarayıcısı Firefox çok güçlü ve işlevseldir; hızlı ve etkili hata ayıklamaya olanak tanır. Kurulumdan sonra tarayıcı penceresinde Şekil 6'da gösterilen ek bir araç çubuğu görünecektir.

Eklentiyle daha fazla çalışmak sezgiseldir. Örneğin, bazı CSS çalışmaları yapmamız gerekiyorsa (Firebug eklentisi kadar tam işlevsel olmasa da), CSS menüsüne tıklayıp kilitleyebilir, etkinleştirebilir veya devre dışı bırakabiliriz.

Geliştiricinin projesinin farklı çözünürlükteki monitörlerde nasıl görüneceğini görebilmesi oldukça kullanışlıdır. Bunu yapmak için Yeniden Boyutlandır sekmesini kullanmanız gerekir. Burada manuel olarak ayarlayabilirsiniz gerekli izinler ekranı (800x600, 1024x768, vb.) ve ardından bunlar arasında serbestçe geçiş yapın, içeriği yakınlaştırın veya uzaklaştırın. Bu işlevsellik Şekil 7'de gösterilmektedir.

Bu uzantı aynı zamanda tamamı resmi web sitelerinde açıklanan ve mevcut olan zengin işlevselliğe sahiptir.

Kullanılan kaynakların listesi

• 1. www.getfirebug.com
  Eklentinin resmi web sitesi.
• 2. http://addons.mozilla.org
  Eklentilerin bulunduğu Mozilla'nın resmi web sitesi Firefox tarayıcısı, geliştiriciler için bilgiler, eklentilerin kullanımına ilişkin bilgiler.
• 3. http://chrispederick.com/work/web-developer/
  Eklenti geliştiricisi WebDeveloper'ın resmi web sitesi.

İnternette gezinirken, Internet Explorer sayfanın hatalar içerdiğini belirten mesajlar görüntüleyebilir ve düzgün görüntülenmeyebilir. Bu sorunu çözmenin birkaç yoluna bakalım.

Talimatlar

Tarayıcının çalışmasında periyodik olarak ortaya çıkan bir hata dışında görünür bir zorluk yoksa, mesajın artık görünmemesi için komut dosyası hata ayıklamasını devre dışı bırakmayı deneyebilirsiniz (hata birden fazla sitede aynı anda görünüyorsa, sonraki adıma geçin) adım). Araçlar menüsünden İnternet Seçenekleri'ni açın, Gelişmiş sekmesini seçin ve "Kod hata ayıklamasını devre dışı bırak" onay kutusunu işaretleyin. Tüm hatalar için bildirimi kapatmak istiyorsanız "Her komut dosyası hatası için bildirimi göster" onay kutusunun işaretini kaldırın.

Sorunun yerel olup olmadığını görmek için hataya neden olan siteyi farklı bir hesaptan veya farklı bir bilgisayardan açmayı deneyin. Hata ortaya çıkarsa, büyük olasılıkla yanlış web sayfası kodundan kaynaklanmaktadır. Bu durumda, önceki adımdaki talimatları izleyerek komut dosyası hata ayıklamasını devre dışı bırakabilirsiniz. Farklı bir bilgisayar veya hesap kullanarak siteye göz attığınızda sorun ortadan kalkarsa bir sonraki adıma geçin.

Internet Explorer, sayfaları görüntülediğinizde bilgilerin sayfada nasıl görüntüleneceğini denetleyen aktif komut dosyalarını, Java'yı ve ActiveX'i engellemiyor olabilir. Sorunu çözmek için tarayıcınızın güvenlik ayarlarını sıfırlamanız gerekir. Bunu yapmak için “Araçlar” menüsünde “İnternet Seçenekleri”ni seçin ve “Güvenlik” sekmesine gidin. "Varsayılan" düğmesini ve ardından "Tamam"ı tıklayın. Hatanın oluştuğu sayfayı yeniden çalıştırdıktan sonra sorun devam ederse sonraki yöntemi deneyin.

Bildiğiniz gibi tarayıcı, geçici dosyaları ve sayfaların kopyalarını daha sonra erişim için ayrı bir klasörde saklar. Klasör boyutu çok büyürse bazı sayfalar düzgün görüntülenmeyebilir. Sorun, klasörü geçici dosyalarla periyodik olarak boşaltarak çözülebilir. Bunu yapmak için Araçlar menüsünden İnternet Seçenekleri iletişim kutusunu açın. Genel sekmesinin Geçmiş grubunda Sil düğmesini tıklayın. Geçici İnternet Dosyaları, Çerezler, Günlük ve Web Formu Verileri kutularını işaretleyin ve Tamam'a tıklayın.

Çoğu zaman kullanıcılar, Internet Explorer (IE) tarayıcısında bir komut dosyası hata mesajının göründüğü bir durumla karşılaşabilirler. Durum izole edilmişse endişelenmenize gerek yoktur, ancak bu tür hatalar düzenli hale geldiğinde sorunun doğası hakkında düşünmeye değer.

Internet Explorer'daki bir komut dosyası hatası genellikle tarayıcının HTML sayfa kodunu yanlış işlemesinden, geçici İnternet dosyalarının varlığından, hesap ayarlarından ve bu materyalde tartışılacak diğer birçok nedenden kaynaklanır. Bu sorunun çözümüne yönelik yöntemler de tartışılacaktır.

Komut dosyası hatalarına neden olan Internet Explorer sorunlarını tanılamaya yönelik yaygın yöntemleri kullanmaya başlamadan önce, hatanın yalnızca belirli bir sitede değil, aynı anda birden çok web sayfasında meydana geldiğinden emin olmanız gerekir. Ayrıca bu sorunun oluştuğu web sayfasını farklı bir hesapta, farklı bir tarayıcıda ve farklı bir bilgisayarda kontrol etmeniz gerekir. Bu, hatanın nedenini aramayı daraltmanıza ve mesajların PC'deki belirli dosyaların veya ayarların varlığının bir sonucu olarak ortaya çıktığı hipotezini hariç tutmanıza veya onaylamanıza olanak tanır.

Internet Explorer aktif komut dosyalarını, ActiveX ve Java'yı engelleme

Aktif komut dosyaları, ActiveX ve Java kontrolleri, bilgilerin sitede oluşturulma ve görüntülenme şeklini etkiler ve bunlar kullanıcının bilgisayarında engellenirse, daha önce açıklanan sorunun gerçek nedeni olabilir. Komut dosyası hatalarının bu nedenle oluştuğundan emin olmak için tarayıcınızın güvenlik ayarlarını sıfırlamanız yeterlidir. Bunu yapmak için aşağıdaki önerileri izleyin.

• Internet Explorer 11'i açın
• Hizmet

• Pencerede sekmeye gidin Emniyet
• Ardından düğmeye tıklayın Varsayılan ve ardından düğme TAMAM

Internet Explorer geçici dosyaları

Bir web sayfasını her açtığınızda, Internet Explorer tarayıcısı bu web sayfasının yerel bir kopyasını bilgisayarınıza geçici dosyalar olarak kaydeder. Bu tür dosyalar çok fazla olduğunda ve bunları içeren klasörün boyutu birkaç gigabayta ulaştığında, web sayfasının görüntülenmesinde sorunlar ortaya çıkabilir, yani bir komut dosyası hata mesajı görünebilir. Geçici dosyalar klasörünüzü düzenli olarak temizlemek bu sorunun çözülmesine yardımcı olabilir.
Geçici İnternet dosyalarını silmek için aşağıdaki adımları izleyin.

• Internet Explorer 11'i açın
• Tarayıcının üst köşesindeki (sağ) simgeye tıklayın Hizmet bir dişli biçiminde (veya Alt+X tuş kombinasyonu). Daha sonra açılan menüde seçeneğini seçin.
• Pencerede sekmeye gidin Yaygındır
• Bölümde Tarayıcı geçmişi düğmeye bas Silmek…

• Pencerede İnceleme geçmişini silmeöğelerin yanındaki kutuları işaretleyin Geçici İnternet ve Web Sitesi Dosyaları, Çerezler ve web sitesi verileri, Dergi
• Düğmeye bas Silmek

Antivirüs yazılımının çalışması

Komut dosyası hataları, bir virüsten koruma programının çalışmasıyla, bir sayfadaki aktif komut dosyalarını, ActiveX ve Java kontrollerini veya geçici tarayıcı dosyalarını kaydetmek için kullanılan klasörleri engellediğinde mümkündür. Bu durumda, yüklü antivirüs ürününün belgelerine bakmanız ve geçici İnternet dosyalarını kaydetmek için klasörlerin taranmasını ve ayrıca etkileşimli nesnelerin engellenmesini devre dışı bırakmanız gerekir.

HTML sayfa kodunun yanlış işlenmesi

Genellikle belirli bir sitede görünür ve sayfa kodunun Internet Explorer ile çalışacak şekilde tamamen uyarlanmadığını gösterir. Bu durumda, tarayıcıda komut dosyası hata ayıklamasını devre dışı bırakmak en iyisidir. Bunu yapmak için şu adımları izleyin:

• Internet Explorer 11'i açın
• Tarayıcının üst köşesindeki (sağ) simgeye tıklayın Hizmet bir dişli biçiminde (veya Alt+X tuş kombinasyonu). Daha sonra açılan menüde seçeneğini seçin.
• Pencerede sekmeye gidin bunlara ek olarak
• Ardından kutunun işaretini kaldırın Her komut dosyası hatası için bildirim göster ve düğmeye basın TAMAM.

Bu, Internet Explorer'da komut dosyası hatalarına neden olan en yaygın nedenlerin bir listesidir; bu nedenle, bu tür mesajlardan sıkıldıysanız, biraz dikkat edin ve sorunu kesin olarak çözün.

Elbette başkaları da var - onlardan kesinlikle bahsedeceğim.

Firefox için Firebug

olup olmadığından emin değilim Ateşböceği Diğer geliştirici araçlarının atası olmakla birlikte kesinlikle en popüler, kullanışlı ve işlevsel olanıdır.

Firebug, Firefox için bir eklentidir, yani onu Firefox eklentileri web sitesinden indirip yüklemeniz gerekir.

Yangın böceğini tetiklemek için F12 tuşuna basmanız yeterlidir.

Bu eklentinin özellikleri:

• Dinamik olarak değişen HTML'yi inceleme ve düzenleme;
• Anında CSS düzenleme;
• JavaScript'te hata ayıklama, komut dosyalarını yürütmek için komut satırı;
• Ağ isteklerini izleme - dosya ve komut dosyalarının boyutlarını ve indirme sürelerini, istek başlıklarını görebilirsiniz;
• DOM ayrıştırıcısı.

Bu olasılıklardan uzun süre ayrıntılı olarak bahsedebilirsiniz ama sanırım tüm okuyucularımız biliyor, değilse de ayrıntılı bilgi Firebug ana sayfasında veya aynı şey İlya Kantor'un çevirisinde de var.

Kundakçının kendisine ek olarak yararlı bir eklentiye de ihtiyacınız olabilir - Ateş Kurabiyesi(sürpriz:-) ile çerezleri görüntüleyebilir ve değiştirebilirsiniz.

Firefox için WEB Geliştirici Araç Çubuğu

Ognelis'e bir başka faydalı katkı. Şuna benziyor:

Nokta nokta bakalım.

Devre dışı bırakmak

JavaScript'i kapatmanıza, geliştirme sırasında çok yararlı olan önbellek kullanımını devre dışı bırakmanıza (sayfanın en son güncellemelerle yüklendiğinden emin olmanıza olanak tanır), sayfada kullanılan renkleri iptal etmenize ve bunları standart renklerle değiştirmenize olanak tanır. , yönlendiren başlığında (yönlendirmenin yapıldığı sayfa) göndermeyi devre dışı bırakın.

Kurabiye

Çerezlerle çalışmak için kullanışlı bir seçenek: bunları görüntüleyebilir, silebilir, reddedebilir ve ekleyebilirsiniz.

CSS

Bu menü, Geliştirici Araç Çubuğunun en harika özelliği olan CSS'yi anında düzenlemeyi depolar. Ayrıca css'i görüntülemek, devre dışı bırakmak vb. işlemleri yapmak da mümkündür. Bana göre kısayol tuşlarının varlığı burada çok faydalı (örneğin CTRL+SHIFT+C, doğrudan sayfa stillerini görüntülemeye gitmenizi sağlar)

Formlar

Formlarla çalışmaya yönelik her şey: şifreleri gösterme, formlarla ilgili bilgileri gösterme, form dönüştürme yöntemlerini (GET » POST ve tersi) ve çok daha fazlasını. Yararlı bir işlev, form alanlarını otomatik olarak doldurmak için "Form Alanlarını Doldur" (örneğin, bir siteyi test ederken, şifreleri hatırlama işlevi devre dışı bırakıldığında). Aksi takdirde, bu öğede yararlı bir şey göremiyorum.

Görüntüler

Sitenizin resimler olmadan nasıl göründüğünü görmek için resimleri devre dışı bırakmanın yararlı bir işlevi vardır. Resimleri daire içine alabilir, boyutlarını gösterebilir ve alt niteliklerini gösterebilirsiniz.

Bilgi

Bu menüde çok fazla seçenek var. Sınıf ve kimlik niteliklerinin sayfada görüntülenmesi işlevi yararlı olabilir. Ek olarak, sayfada kullanılan renkler hakkında hızlı bir şekilde bilgi edinmek için "Renk Bilgilerini Görüntüle" öğesi ilginçtir. “Belge boyutunu görüntüle” - sayfa boyutunu görüntüleyin. “Yanıt Başlıklarını Görüntüle” - sayfa başlıklarını görüntüleyin.

Çeşitli

En sık kullanılan işlev önbelleği temizlemektir. Ek olarak, burada mevcut olan işlevler şunlardır: "Sayfa cetveli" - bir cetvel, "Sayfa Büyüteci" - bir büyüteç ve "Çizgi kılavuzları" - bir şablonu kırpmak için yararlı olabilecek birkaç çizgi.

Taslak

Farklı sayfa öğelerinin (tablolar, başlıklar, bağlantılar, çerçeveler, bloklar) vurgulanması. Yeniden Boyutlandır, tarayıcı penceresini herhangi bir standart ekran uzantısına uyacak şekilde yeniden boyutlandırmanıza olanak tanır. Sayfa doğrulamaya yönelik araç özellikleri burada saklanır. Hem yerel hem de harici. HTML, CSS ve daha fazlasının doğrulanmasına rahat ve hızlı erişim. HTML'yi doğrulamak için CTRL+SHIFT+H klavye kısayolunu kullanabilirsiniz.

Kaynağı Görüntüle

Kaynak kodunu görüntüleyin. Oluşturulan kodu görüntüleyerek harici bir uygulamada görüntüleme imkanı.

En çok sağ köşedekini beğendim. Hızlı bir HTML, CSS doğrulayıcı ve JavaScript hata göstergesidir. Herhangi bir sorun yoksa simge yeşil, sorun varsa simge kırmızıdır.

Internet Explorer Geliştirici Araç Çubuğu

8.0'dan başlayarak, hata ayıklama özelliği bu tarayıcıda zaten yerleşiktir. Kolayca çağrılabilir F12 tuşu. Doğru, 90'lardaki bir program kadar zayıf.

Ancak bu tarayıcı için Internet Explorer Geliştirici Araç Çubuğu adı verilen ve bağlantıdan indirilebilen çok daha havalı bir araç var.

Görünüşte, bu araç çubuğu elbette kundakçıya benziyor, ancak ne yazık ki henüz olgunlaşmadı. Öte yandan firebug'un sahip olmadığı bazı yeteneklere de sahiptir. Internet Explorer Geliştirici Araç Çubuğu'nu Firebug'un bir tür melezi olarak adlandırabilirim. FireFox WEB Geliştiricisi Araç Çubuğu.

Firebug'da olduğu gibi, bir öğeyi basit bir tıklamayla incelemek mümkündür. Ancak, dolguyu ve kenar boşluklarını hemen görebilirsek burada böyle bir fırsat yoktur.

Ayrıca Internet Explorer Geliştirici Araç Çubuğu, Firebug'un yaptığı gibi öğe ağacını dinamik olarak güncellemez. Yani js kullanarak sayfada herhangi bir değişiklik yaparsak bu araç çubuğunu kullanarak hiçbir şey görmeyiz.

Keyfini çıkarabileceğiniz şeyler anında CSS'yi değiştirmek (neyi hackleyeceğinizi bulmanın kolay bir yolu :), CSS'yi ve görüntüleri devre dışı bırakma yeteneği, önbelleği hızlı bir şekilde temizleme ve çerezlerle oynama yeteneği, doğrulamaya hızlı erişim.

En iyi bölüm: Pipet kullanarak sayfadan istediğiniz rengi almanızı sağlayan yerleşik bir renk seçici vardır. (ff için ayrı bir ColorZilla eklentisi vardır).

Internet Explorer için DebugBar'da Hata Ayıklama

Internet Explorer için DebugBar verilen bağlantıdan indirilebilir.

Kendi başına ilginç bir uzantı. Tarayıcıya ek panel olarak yüklendi:

Bazı nedenlerden dolayı yerleşik bir arama motoru, bir damlalık, pencerenin boyutunu değiştirme yeteneği ve yine bazı nedenlerden dolayı bir arkadaşınıza sabun için bir sayfa gönderme yeteneği var. Yine de bu faydalı olabilir. Ancak bu fırsattan yararlanamadım.

Ayrıca bir müfettiş var:

Geliştiriciler, tıklayarak veya işaretleyerek inceleme yönteminden memnun değildi: daha ilginç bir şey buldular. DebugBar'da artı işaretini ağaçta görmek için istenen öğenin üzerine sürüklemeniz gerekir. CSS'yi düzenleme yeteneği yoktur. Ancak bir doğrulayıcı ve yerleşik bir js konsolu var.

Ve eğer ayarlara girerseniz şunu bulabilirsiniz:

Hem komik, hem üzücü.

Geliştirici Araç Çubuğunun sekizinci explorer'a yerleştirileceği biliniyor. Üçüncü paragrafta anlatılana benzer olacak ama daha iyi olacağını umuyoruz.

Opera için DragonFly'da hata ayıklama

DragonFly, 9.5 sürümünden itibaren Opera'ya yerleşiktir, dolayısıyla yüklemeye gerek yoktur. Dragonfly'ı etkinleştirmek için Araçlar → Gelişmiş → Geliştirici Araçları'na gidin. Ve eğer İngilizce ise, Araçlar → Gelişmiş → Geliştirici Araçları.

DragonFly'ın Alpha2 aşamasında olduğu konusunda sizi hemen uyaracağım, bu onun birçok kusurunu açıklıyor.

Özellikler listesi:

• DOM denetçisi;
• Tıklayarak inceleyin (yine FireFox'taki gibi girinti görmeyeceğiz);
• Düzenleme;
• Hata konsoluna hızlı erişim.

DF, çerçevedeki ayrı bir sayfaya benzer. Eğer açarsanız, tüm sekmeler için açık olacaktır (firebug'un aksine). Bu nedenle bir öğeyi incelemeden önce görüntülemek istediğimiz sayfayı listeden seçmeliyiz.

Ne yazık ki burada, Internet Explorer Dav Araç Çubuğu'nda olduğu gibi dinamik olarak oluşturulan öğeler görüntülenmiyor. Ve genel olarak sayfayı incelediğimizde hiçbir JavaScript başlatılmıyor: bağlantılar ve düğmeler tıklanmıyor. Umarız DragonFly piyasaya sürülmeye yaklaştığında tüm bu özellikleri görürüz.

Safari'de WEB Denetleyicisinde Hata Ayıklama

Hemen bunun tarayıcıyla ilgili olduğunu söyleyeceğim Safari Bilgileri kaçırdım, dolayısıyla dedikleri gibi malzemenin yeterliliğinden sorumlu değilim.

Safari menüsündeki "Geliştirme" öğesini etkinleştirmek için ayarlarda ("Gelişmiş" sekmesi) ilgili öğeyi etkinleştirmeniz gerekir:

“Geliştirme” menüsünde aşağıdaki işlevler mevcuttur:

WEB denetçisine daha yakından bakalım:

Denetleyici varsayılan olarak HTML görünüm modunda açılır. Ancak DOM görünüm moduna geçirilebilir. Bu amaçla üst plaka üzerinde bir anahtar bulunmaktadır. Denetleyicide bir öğenin üzerine geldiğinizde bu öğe sayfanın kendisinde vurgulanacaktır. FireBug'da olduğu gibi anında dolguyu göremezsiniz, işaretlemeyi veya CSS'yi değiştiremezsiniz veya DOMe'de dinamik değişiklikleri anında göremezsiniz. Ama itiraf etmelisiniz ki çok sevimli görünüyor.

Denetleyiciyle bir tarayıcı penceresinde çalışmak istiyorsanız sol alt köşedeki butona tıklayabilirsiniz.

Safari'de bile "Ağ Zaman Çizelgesi" gibi bir işlev mevcuttur (denetçideki "Ağ" düğmesi):

Dosyaların indirilmesinin ne zaman ve ne kadar süreceğini net bir şekilde görebilirsiniz. Ayrıca istek başlıklarını da görüntüleyebilirsiniz ancak ne yazık ki içeriğin kendisini görüntüleyemezsiniz.

Google Chrome'da geliştiriciler için hata ayıklama

Lame gelişmiş bir formda doğdu ve şimdilik çarpık da olsa, geliştiriciler için hala araçlara sahip oldu.

• DOM Denetleyicisi;
• javascript hata ayıklayıcısı;
• JavaScript Konsolu.

Herhangi bir elemanı incelemek için üzerine sağ tıklayıp içerik menüsünden “Eleman kodunu görüntüle” seçeneğini seçmeniz gerekir:

İşlevsellik Safari'dekiyle aynıdır: Öğeler fareyle üzerine gelindiğinde vurgulanır, ancak CSS ve HTML düzenlemesi kullanılamaz ve DOM'daki değişiklikler izlenmez. Ancak denetçiyi tarayıcı penceresine bağlaması gereken sol alt köşedeki düğme çalışmıyor.

“Kaynaklar” sekmesinde aşağıdakileri görebiliriz:

Safarideki ölçekten biraz farklı. Bu şemadaki yarı saydam, ilgili dosya boyutlarını gösterirken tam renkli, yükleme süresini gösterir. Öyle ya da böyle, Chrome'un bu bölümünün henüz tamamlanmaktan uzak olduğu açık.

Bu yazıda en ünlü tarayıcı uzantılarına ve yerleşiklerine baktım.

Örneğin başkaları da var:

• Internet Explorer WEB Geliştirme Yardımcısı - ASP.NET geliştiricileri (Internet Explorer) için iyi bir yardımcı;
• WEB Geliştirici Araç Çubuğu - Internet Explorer ve FireFox için araç çubuğu. Birkaç kullanışlı özellik vardır;
• WEB Erişilebilirlik Araç Çubuğu - Internet Explorer için araç çubuğu. İlginç bir şey yok.

Bahsetmediğim ama olması gereken eklentiler varsa veya bahsedilen eklentilerin gözden kaçırdığım fonksiyonları varsa lütfen yazın.

Sağlığınız için tadını çıkarın!

Windows 8.1 ve Windows 7'de Internet Explorer 11, geliştiricilerin birden fazla cihazdaki modern web siteleri ve uygulamalardaki deneyimi oluşturmasına, sorunlarını gidermesine ve optimize etmesine yardımcı olmak için tarayıcıya yerleşik, tamamen yeniden tasarlanmış ve geliştirilmiş bir dizi geliştirici aracıyla birlikte gelir. Kısaca F12 olarak adlandırdığımız yeni araçlar, web geliştiricilerinin hızlı ve verimli çalışmasını sağlıyor.

Visual Studio ve Internet Explorer ekipleri, geliştiricilerin anlamlı verileri kullanarak sorundan çözüme hızlı bir şekilde geçmelerine yardımcı olma ilkesine dayanan F12 araçlarını oluşturmak için birlikte çalıştı. Yeni F12 paketi, performans sorunlarını teşhis etmeye ve düzeltmeye yönelik araçların yanı sıra Internet Explorer'ın web uygulamalarını nasıl düzenlediğini ve işlediğini daha iyi anlamanıza yardımcı olacak araçlarla hızlı, esnek bir web deneyimi sunar. F12 araçları, modern web geliştiricileri tarafından kullanılan hızlı, etkileşimli iş akışını destekler.

Evrensel alet seti

Yeni F12 kiti, geliştiricilerin sorundan çözüme hızla geçmesine yardımcı olur. Heyecan verici yeni özelliklerden bazıları şunlardır:

• Geliştiricilerin hızlı, duyarlı web uygulamaları oluşturmasına yardımcı olan kullanıcı arayüzü duyarlılığı ve bellek profili oluşturma araçları.
• Geliştiricilerin dinamik içeriğin işaretlemeyi ve stili nasıl etkilediğini etkileşimli olarak keşfedebilmesi için sayfayla birlikte güncellenen Canlı DOM Gezgini ve CSS denetleyicisi
• Geliştiricilerin daha hızlı başlayabilmesi için sayfa yenilemeye gerek kalmadan hızlı bir şekilde çalışacak şekilde JavaScript hata ayıklamasını etkinleştirin

F12 araçlarını kullandıkça hızlı, etkileşimli bir iş akışı elde etmenize yardımcı olacak diğer birçok iyileştirmeyi fark edeceksiniz:

• "Öğeyi kontrol et" seçeneğini kullanarak bir menü öğesine sağ tıklayarak bu araçlara hızla erişin
• Etkili klavye etkileşimi
• Öğeleri ve bileşenleri araçlardan kopyalamaya yönelik kapsamlı yetenek, böylece ek biçimlendirme gerekmeden herhangi bir düzenleyiciye yapıştırılabilirler

En önemli şey, bu araçların artık DOM Explorer'daki @media ve!important kurallarından UI Response Profiler'daki temel maliyet yapısına kadar en eksiksiz ve doğru bilgileri görüntülemesidir. Bu araçlar aynı zamanda doğrudan ilgili verileri de sağlar; örneğin, bellek profili oluşturucu "canlı" olan ancak işaretleme veya işleme ağacından başvurulmayan DOM düğümlerini tanımlar.

Yeni F12 paketi, geliştiricilere tüm web geliştirme araçlarımızda ve çerçevelerimizde tutarlı, kusursuz bir deneyim sağlamak için Visual Studio'nun yeteneklerini genişletiyor.

Şimdi bu araçların işleyişine hızlıca bir göz atalım.

UI Response Analizörü ile Uygulamaların Profilini Oluşturma

UI Response Analizörü, uygulamanızın tam performans potansiyeline ulaşabilmesi için CPU zamanının tam olarak nerede harcandığını anlamanıza yardımcı olur. Bu araç, HTML, CSS ve JavaScript kodunun çalışma anında görselleştirilmesinin yanı sıra işaretleme ve çöp toplama gibi önemli ilgili efektleri sunarak Internet Explorer'ın iç işleyişine dair temel bilgiler sağlar. Bir bakışta uygulamanızın ne kadar hızlı yanıt verdiğini ve oluşturulduğunu tam olarak görebilirsiniz. Bu, belirli kaynakları tanımlamanıza olanak tanır darboğazlar ve optimizasyonuna daha anlamlı bir yaklaşım benimseyin.

Web Sitesi Profili Oluşturma

Memory Profiler ile uygulama belleği kullanımını analiz edin

Bu bellek analizörü, bellek sızıntılarını veya aşırı bellek tüketimini önlemenize yardımcı olacaktır. Müşteriler için 24 saat çalışan veya karmaşık web uygulamalarının oluşturulması etkileşimli uygulamalar genellikle tasarımcılarının bellek kullanımı sorunlarına özellikle dikkat etmesi gerektiği anlamına gelir.

Her ne kadar JavaScript çöp toplanmış bir ortam olsa da, uygulamalar genellikle daha fazla bellek tüketir çünkü nesne referanslarının konumu kaldırılmamıştır (ve kaldırılamaz). Bellek analizörü, ister JavaScript nesnesi ister DOM nesnesi olsun, sayfadaki her nesne hakkında bilgi sağlayarak bu sorunları tanımlamanıza yardımcı olabilir. Bu bilgiyle örneğin bir öğenin ne kadar bellekte tutulduğunu görebilirsiniz. ve hangi nesnelerin korunmasını desteklediği. Ancak en önemlisi, iki anlık görüntüyü karşılaştırabilir ve nelerin değiştiğini görebilirsiniz. Bu, uygulamanızın neden daha fazla bellek kullandığını anlamanıza ve sorunu düzeltmenize olanak tanır.

Devre dışı bırakılan DOM öğelerini gösteren yığın belleği anlık görüntüsü

Performans Kontrol Paneli ile uygulama performansı sorunlarını hızlı bir şekilde anlayın

Sayfanızın performansını etkileyen sorunları hızlı bir şekilde belirlemenize yardımcı olmak için Internet Explorer 11, Performans Kontrol Paneli adı verilen ve Ctrl+Shift+U veya Araçlar menü öğesi ( Alt+T) kullanılarak erişilebilen bir sayfa içi widget içerir. Bu panel, oluşturma süresi, bellek, saniyedeki kare sayısı (fps) ve CPU kullanımı gibi önemli performans ölçümlerine ilişkin istatistikleri Internet Explorer'da dinamik olarak görüntüler. Performans kontrol paneli F12 araçlarının kullanılmasını gerektirmez ve modern tarayıcılarda da kullanılabilir.

Performans Kontrol Paneli ile kare hızında takılmalara veya yüksek CPU kullanımına neden olan sayfa etkileşimlerini hızlı bir şekilde tanımlayabilirsiniz. Daha sonra sorunu yeniden oluşturmak ve çözüm bulmak için F12 araçlarına geçebilirsiniz.

DOM Explorer'ı kullanarak öğeleri inceleme ve işaretlemeyi ve stilleri değiştirme

DOM Explorer, @media sorgularını etkileşimli olarak yapılandırmayı kolaylaştırır ve CSS kuralları ve özellikleri. Bu yüzden Kullanıcı arayüzü uygulamanız son derece verimli, duyarlı ve çok cihazlı bir deneyime dönüşür. İstediğiniz öğeyi sağ tıklayıp inceleyerek bir web sayfasında hızlı bir şekilde başlayabilirsiniz; bu, DOM Explorer'da seçilen öğeyle birlikte F12 araçlarını tetikler ve uygulanan DOM ve CSS kurallarını dinamik olarak görüntüler. Oluşturulan DOM ve CSS tabloları dinamiktir ve Internet Explorer'ın işaretlemenizi, stilinizi ve CSS kurallarınızı nasıl yorumladığını anlamanıza olanak tanır. Sayfayla etkileşim kurduğunuzda veya DOM Explorer'ı kullanarak sayfayı değiştirdiğinizde yaptığınız değişiklikler anında yansıtılacaktır.

İşaretlemeyi ve Stilleri Kontrol Etme

Bir CSS tablosunda değişiklik yaparken DOM Explorer, IntelliSense'i kullanarak bir özelliğin veya özelliklerin doğru değerini almayı kolaylaştırır. Hangi özelliklerin yanlış veya tanınmadığını kolayca görebilir ve ardından kuralı kopyalayarak kaynağınıza yeniden uygulayabilirsiniz.

Bir hata ayıklayıcı ve konsol kullanarak JavaScript'te hata ayıklama

Yeni JavaScript hata ayıklayıcısı, bozuk kodu bulup hızlı bir şekilde düzeltmeniz için size araçlar sağlar. JavaScript hata ayıklayıcı, komut dosyası kitaplığınız küçültülmüş olsa bile birden fazla dosyayı açabilir ve inceleyebilir, kesme noktaları ve izlemeler ayarlayabilir, JavaScript nesnelerini, değerlerini, kapsam zincirlerini inceleyebilir ve yığının içeriğini görüntüleyebilir. F12 araçlarını çalıştırdığınızda, JavaScript hata ayıklayıcı da hemen başlatılacaktır, böylece hemen başlayabilirsiniz.

Hata ayıklarken muhtemelen web sitenizle biraz etkileşim kurmak isteyeceksiniz. Konsol bu görevi gerçekleştirmek için temel araçtır. Konsola istediğiniz zaman erişebilirsiniz; bu, IntelliSense ve nesne görselleştiricilerle bu etkileşimli ortamın kullanımını verimli hale getirir. Konsol ayrıca çok çeşitli özel API'ler sunarak çıktıyı günlüğe kaydetmenize, belirli kodda harcanan süreyi analiz etmenize ve JavaScript nesnelerinin derinlemesine incelemesini yapmanız gerektiğinde nesne oluşturucular sağlamanıza olanak tanır.

Özetliyor

Bu blog yazısı, F12 araçlarındaki yeni öğelerin basit bir taslağını sunmaktadır. Bulabilirsin tam liste yeni işlevsellik, "F12 Araçlarındaki Yenilikler" makalesinde ve "Internet Explorer 11 Önizleme Geliştirici Kılavuzu"nda Internet Explorer 11'deki geliştiricilerin kullanımına açıktır. Ayrıca Internet Explorer test demosu "F12 Adventure"dan daha fazla bilgi edinebilirsiniz.

Geri bildiriminizi sabırsızlıkla bekliyoruz ve geliştirici topluluğuyla uzun süreli bir ilişki kurmayı sabırsızlıkla bekliyoruz. Önerilerinizi Internet Explorer 11 Geri Bildirim ve Öneri aracı aracılığıyla veya Connect sitesi üzerinden paylaşın.

PJ Hough
, Başkan Yardımcısı, Visual Studio