Web sayfalarındaki hatalar ve bunların nasıl bulunup düzeltileceği. Kesme Noktaları sekmesini kullanarak birden çok kesme noktasını yönetin. HTML sayfa kodunun yanlış işlenmesi

Habré hakkında web geliştirmenin ilginç ve karmaşık yönlerini anlatan birçok makale var, ancak bir web geliştirici olarak kariyerlerinin başlangıcında, PHP'den ilk adımı atmalarını sağlayacak materyalleri görmek isteyen birçok okuyucu var. 24 saat ciddi anlamda gelişme var ve bu konudaki tecrübelerimi paylaşmak isterim.

Web uygulamasının özellikleri onu iki bölüme ayırır: istemci ve sunucu. İstemci tarafında, JavaScript kodu çalışır (belki VBScript'i bir yerde bulabilirsiniz, ancak muhtemelen bu durumu dikkate almayacağız), sunucu tarafında, prensipte çok şey var, ancak en popüler dil olan PHP'yi dikkate alacağız. web uygulamalarının sunucu tarafı. İstemci tarafında Flash uygulamalarında hata ayıklama ve profil oluşturma hakkında konuşmak da ilginç olurdu, ancak işlenen konu zaten kapsamlı, o yüzden şimdilik bırakalım.

HTML kodunun analizi ve doğrulanması, istemci kodunda hata ayıklama görevlerine de atfedilebilir. Tamamen programlama alanından değil, aynı zamanda önemli bir görev gibi görünüyor.

Tartışılan görevlerin bazı bölümleri diğer makalelerde zaten ele alındı ​​ve ben onlara bağlantılar sağladım.

İstemci kodunda hata ayıklama ve profil oluşturma

JavaScript kodunda hata ayıklamanın "klasik" yolu, uyarı işlevini ve türevlerini kullanmaktır. Kariyerimin başında, JavaScript için print_r işlevini kişisel olarak yazdığımı hatırlıyorum çünkü diziler ve nesneler üzerinde hata ayıklama bilgilerini görüntüleme olasılığını görmedim. Şuna benziyordu:
function print_r (değişken) (if (Dizinin instanceof değişkeni || Objenin instanceof değişkeni) (var tuşu; for (anahtar değişkende) uyarı (anahtar + "=>" + değişken);) başka (uyarı (değişken);))

Tabii ki, hiçbir konuşma profili çıkarma işlemi yapılmadı.

Bu yaklaşımla, konsol nesnesi hakkındaki bilgiler bile devrim yaratıyor.

Web uygulamasının istemci tarafının özgüllüğü, kodun tümünde hata ayıklamayı gerektirir. popüler tarayıcılar... Tabii ki, çoğu zaman hata ayıklama Internet Explorer"e ve diğer herhangi bir normal tarayıcı, ancak tüm seçeneklere bakacağız.

Mozilla Firefox

Muhtemelen Firefox, istemci kodunda hata ayıklamada öncüdür. Uzun bir süre, geliştirme için en uygun tarayıcı olarak gösterildi ve muhtemelen her şeyi içeren Firebug uzantısı sayesinde. gerekli fırsatlar HTML kodu doğrulaması hariç.

Ayrıca, sürüm 4'ten başlayarak, Firebug'un "Konsol" ve "Ağ" sekmelerinin bazı işlevlerinin yanı sıra CSS hatalarını ayıklamak için bazı olasılıkları uygulayan yerleşik bir Web Konsolu ortaya çıktı.

6. sürümden itibaren, Firebug'un işlevlerinden birini de uygulayan ve doğrudan tarayıcıda kod yazmanıza ve çalıştırmanıza izin veren Basit JavaScript Düzenleyicisi vardı.

Sürüm 10'dan itibaren, HTML kodunu incelemenize olanak tanıyan Sayfa Denetçisi ortaya çıktı ve CSS özellikleri yani, HTML sekmesinin işlevselliğini uygular.

Html Validator uzantısı genellikle HTML kodunun doğrulanmasından sorumludur. Sadece üzerindeki hataların sayısını gösteren simgesi ana sayfa habrahabr.ru sitesi, Sayfa Denetçisi ile resimde tarayıcının sağ alt köşesinde görülebilir.

Ayrıca, bu fırsatı değerlendirerek, bu tarayıcı için, Habré'nin zaten karşılık gelen bir tanesine sahip olduğu, hayatı kolaylaştıran birçok uzantı olduğunu belirteceğim.

Google Chrome ve Safari

Bu WebKit tabanlı tarayıcılarda, çok iyi geliştirilmiş ve Firebug ile neredeyse aynı işlevleri uygulayan yerleşik bir Web Inspector geliştirme aracı bulunur. Aynı zamanda, ona haraç ödemeliyiz, "ağabey" için olağan olan tarayıcıyı yavaşlatmaz.

Chrome'da Ctrl + Shift + I tuşlarına basılarak veya sadece F12 ile çağrılabilir. Safari'de iyi gizlenmiştir ve onu kullanmak için tarayıcı tercihlerinizde geliştirme özelliklerini etkinleştirmeniz gerekir. Daha sonra geliştirici araçları, ana menünün "Geliştirme" öğesinden veya Ctrl + Alt + I klavye kısayoluyla kullanılabilir hale gelecektir.

HTML kodunu doğrulamak için üçüncü taraf uzantıları da yüklemeniz gerekir. Örneğin Chrome için Geçerlilik olabilir. Henüz Safari için uygun bir şey bulamadık.

Opera

Opera ayrıca, Ctrl + Shift + I tuşlarına basılarak herhangi bir zamanda çağrılabilen "Opera Dragonfly" adlı yerleşik bir geliştirici aracına sahiptir. WebKit'in bize sunduğuna benzer ve benzer yeteneklere ve avantajlara sahiptir, ancak kişisel görüşüme göre daha az kullanışlıdır.

Sunucu tarafı kodunda hata ayıklama ve profil oluşturma

Xdebug

Başta anlaştığımız gibi, sunucunun PHP kullandığı bir durumu düşünüyoruz. Buradaki "klasik" hata ayıklama yöntemleri echo, print_r ve var_dump'tır, ancak aynı zamanda en iyi evler - Xdebug gibi bir hata ayıklama olanağı da vardır. Şahsen benim için enstitüde çalışmanın özellikleri nedeniyle “tıpkı Delphi'deki gibi” görünüyordu.

xdebug uzantısı, en azından kod boyunca ilerlemenize ve PHP programlamayı bir sonraki seviyeye taşıyan değişkenlerin değerlerini görüntülemenize olanak tanır. xdebug ile çalışmanın inceliklerini anlatan bir tane vardı. XDebug genellikle GNU/Linux depolarında bulunur, Windows'ta da dll dosyasını kopyalayarak kurulumu çok zor değildir.

Bu uzantıyı kullanırken, sunucudan geliştirme bilgisayarına (varsayılan olarak 9000 numaralı bağlantı noktasında) işlemesi gereken bir gelen bağlantı alınır. Bunu yapmak için IDE'nizi buna göre yapılandırmanız gerekir.

Bu arada, bir IDE kullanmak da ilerlemek için bir ön koşuldur. Bazı programcılar, vurgulanmış kodlu bir not defterinde ve bir IDE'de programlama arasındaki farkın yalnızca büyük projelerde görülebileceğine inanıyor, ancak kişisel olarak, farkın "Merhaba dünya!" - standart işlevlerin adlarının ve argümanlarının bir otomatik ikamesi buna değer.

XHProf

Genişletme hakkında

Evet, xdebug profil oluşturma yetenekleri sağlıyor, ancak Facebook'un geliştirilmesi "ve bu amaç için XHProf, kişisel olarak daha çok hoşuma gidiyor. Dürüst olmak gerekirse herhangi bir test yapmadım, ancak bu uzantının üretim sunucuları ve profil oluşturma için çok daha uygun olduğuna inanılıyor. gerçek yüklerde.

Kurulum

Ne yazık ki, bu uzantı herhangi bir depoya dahil edilmemiştir. PECL'ye dahildir, ancak bir nedenden dolayı onu düzenli bir şekilde kurmak genellikle sorunlara neden olur. Bu sebeple kaynaktan kurulum yapmanız gerekmektedir.

# Kaynakları alın wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Kaynakları paketinden çıkarın tar -xvf xhprof-0.9.2.tgz # cd xhprof-0.9 uzantısını içeren dizine gidin 2 / uzantı / # Derleyin ve test edin phpize ./configure make make test # Uygar bir şekilde kurun checkinstall
xhprof.ini yapılandırma dosyası bize şöyle bir şey verir:

extension = / usr / local / lib / php / extensions / no-debug-non-zts-20090626 / xhprof.so
; Günlükler için dizin
xhprof.output_dir = "/ var / log / xhprof /"

profil oluşturma

Arşivi açarak elde ettiğimiz dizin, uzantı kaynaklarına ek olarak, profilleme sonuçlarını incelemek için bir web arayüzü ve uygulamanın profilini çıkarmak için bir kitaplık içerir.

Profil oluşturmaya bir örnek verelim. Uygulama kodunuza aşağıdaki öğeleri eklemeniz gerekir:
// Komut dosyasını başlatın, profil oluşturmayı açın // hem CPU hem de bellek yükleri xhprof_enable (XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); / * * Ana uygulama kodu * / // Komut dosyasının sonu, profil oluşturmayı bitir, // sonucu günlüğe yaz $ xhprofData = xhprof_disable (); include_once XHPROF_DIR. "/ xhprof_lib / utils / xhprof_lib.php"; include_once XHPROF_DIR. "/ xhprof_lib / utils / xhprof_runs.php"; $ xhprofRuns = yeni XHProfRuns_Default (); $ namespace = "benzersiz bir isim"; $ runId = $ xhprofRuns-> save_run ($ xhprofData, $ ad alanı); Eko "\ n ";
Burada XHPROF_DIR sabiti, indirilen arşivi açtığımız dizine işaret eder.

Sonuçları analiz etmek için aynı web arayüzüne ihtiyacınız var. $ XHPROF_DIR / xhprof_html / dizininden alınabilir - koşullu olarak bu şekilde atayalım. Örneğin, onu web sunucusunun erişebileceği bir yere yerleştirdik ve example.com/system/xhprof/ adresinde mevcut, ardından çalışmanın sonucunu analiz etmek için ona aşağıdaki gibi başvurmamız gerekiyor:

Example.com/system/xhprof/?run=%runId%&source=%namespace%

Benzer bir sonuç elde edeceğiz:

Profil oluşturma, bir uygulamanın koduna sürekli olarak dahil edilebilir veya örneğin, belirli bir olasılıkla veya belirli bir koşulun varlığıyla rastgele başlamasını sağlayabilirsiniz. Örneğin, bunun gibi:

$ ihtiyaçProfiler = (mt_rand (0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
Bu durumda, müşterilerden şikayet veya şüphe alarak, belirli bir süre için profilleme sonuçlarına başvurabilirsiniz. Ad alanı parametresini kullanarak, uygulamanın hangi bölümünün (hangi komut dosyası, denetleyici, eylem) profillendirildiğini belirleyebilirsiniz.

SQL Sorgu Profili Oluşturma

Kural olarak, uygulamada darboğaz olan veritabanı ile çalışır. Bu nedenle, sorgu profili oluşturma önerilir. Örneğin, mysql uzantı işlevlerinin etrafını saran bir sınıfın bir bölümünü düşünün. Evet, bu uzantının çok popüler olmadığını biliyorum ve eski güzel IE6'dan daha az ölmemesini istiyorlar. Kullanmaya teşvik etmiyorum, elimde olan böyle bir sınıf.

/ ** * İstek * @param string $ sql sorgusu* @param dizisi $ params Parametreler * @param string $ sorgu Derlenmiş sorgu * @return dizisi Sonuç * / genel işlev sorgusu ($ sql, dizi $ params = dizi (), & $ sorgu = "") ($ başlangıç ​​= mikrozaman ( DOĞRU); // Sorguyu yürütmek, parametreleri "korumak" dahil $ stop = microtime (TRUE); $ time = $ stop - $ start; $ this -> _ addProfilerData ($ sql, $ time); // sonuç) özel işlev _addProfilerData ($ sorgu, $ zaman) (if (is_array (self :: $ profilerData)) (self :: $ profilerData = dizi ("sorgu" => $ sorgu, "zaman" => $ zaman); )) genel işlev __destruct () (if (is_array (self :: $ profilerData)) ($ this -> _ writeProfilerData (); self :: $ profilerData = FALSE;) // Veritabanı bağlantısını kes) özel işlev _writeProfilerData () ($ değerler = dizi ( ); foreach (self :: $ profilerData as $ satır) ($ sorgu = mysql_real_escape_string ($ satır ["sorgu"], $ bu-> con); $ zaman = (kayan) $ satır ["time"]; $ hash = crc32 ($ satır ["sorgu"]); $ değerleri = "($ hash," $ sorgu ", $zaman)";) if ($ değerleri) ($strValues​ = patlatmak ("," , $ değerleri); $ sql = "DELAYED INTO` profiler_queries` (`query_hash`,` sorgu`, `work_time`) DEĞERLER $ strValues"; @mysql_query ($ sql, $ this-> con); ))
Burada sorgu profili oluşturma verileri, profiler_queries tablosunda depolanır. Bu tablo MyISAM veya Archive türünde olabilir, çünkü bunlar, profil oluşturma sırasında yanıtta gereksiz gecikme yaratmayan tembel eklemeler gerçekleştirme yeteneği sağlar. aynen daha iyi arama tablodaki sorgular için, indeks oluşturmak istediğiniz sorgunun crc32-hash'inin yazılacağı INT türünde bir sütun oluşturmak daha iyidir.

Çözüm

Makalenin oldukça büyük olduğu ortaya çıktı. Belki burada en üste çıktım ve daha önce değinilen konulara değindim ama vaktinde böyle bir şey okumuş olsaydım - tüm bilgilerin bir araya toplandığı ve faydalı linklerin verildiği bir yazı olsaydı, benim için paha biçilmez yardım. Umarım makalem aydınlanma yolunda birisine de yardımcı olur.

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

Firefox için Firebug

emin değilim eğer ateş böceği geliştiriciler için diğer araçların öncüsüdür, ancak kesinlikle en popüler, kullanıcı dostu ve işlevseldir.

Firebug bir Firefox eklentisidir, yani onu Firefox eklentileri sitesinden indirip yüklemeniz gerekir.

Firebug'ı aramak için F12 tuşuna basmanız yeterlidir.

Bu eklentinin özellikleri:

• Dinamik olarak değişen HTML'yi denetleme 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ğ isteklerinin izlenmesi - dosya ve komut dosyalarının, istek başlıklarının indirilme boyutlarını ve sürelerini görebilirsiniz;
• DOM ayrıştırıcı.

Bu olasılıklar hakkında ayrıntılı olarak uzun süre konuşabiliriz, ancak bence tüm okuyucularımız bunlara aşinadır ve değilse - detaylı bilgi Firebag'in ana sayfasında ya da İlya Kantor'un çevirisinde aynısı var.

Ateş böceğinin kendisine ek olarak, bunun için kullanışlı bir araca 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:

Noktalara bir göz atalı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 izin verir (sayfanın aşağıdakilerle yüklendiğinden emin olmanızı sağlar). En son güncellemeler), sayfada kullanılan renkleri iptal edin ve bunları standart olanlarla değiştirin, yönlendiren başlığında (yönlendirenin yapıldığı sayfa) gönderimi yasaklayın.

Kurabiye

Çerezlerle çalışmak için kullanışlı bir seçenek: bunlar görüntülenebilir, silinebilir, reddedilebilir ve eklenebilir.

CSS

Bu menü, Geliştirici Araç Çubuğunun en havalı özelliğini içerir - anında CSS düzenleme. Ayrıca css'i görüntülemek, yasaklamak vb. vb. mümkündür. Bence olması çok faydalı kısayollar(Örneğin CTRL + SHIFT + C, doğrudan sayfa stili görünümüne gitmenizi sağlar)

Formlar

Formlarla çalışmak için her şey: parolaları göster, form bilgilerini göster, form yöntemlerini dönüştür (GET »POST ve tersi) ve çok daha fazlası. Form alanlarının otomatik olarak doldurulması için kullanışlı bir "Form Alanlarını Doldur" işlevi (örneğin, şifreleri hatırlama işlevi devre dışı bırakıldığında bir siteyi test ederken. Aksi takdirde, bu paragrafta yararlı bir şey görmüyorum.

Görüntüler

Burada resimleri devre dışı bırakmak için kullanışlı bir özellik vardır - sitenizin resimler olmadan nasıl göründüğünü görmek için. Resimler daire içine alınabilir, boyutları gösterilebilir, alt nitelikler gösterilebilir.

Bilgi

Bu menüde çok fazla seçenek var. Sayfada sınıf ve id özniteliklerini görüntüleme işlevi yararlı olabilir. Ek olarak, sayfada kullanılan renkler hakkında hızlı bir şekilde bilgi almak 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. Ayrıca, "Sayfa cetveli" - bir cetvel, "Sayfa Büyüteci" - bir büyüteç ve "Çizgi kılavuzları" - şablonu kırpmak için yararlı olabilecek birkaç satır işlevleri vardır.

anahat

Sayfanın farklı öğelerinin seçimi - tablolar, başlıklar, bağlantılar, çerçeveler, bloklar. Yeniden boyutlandırma, tarayıcı penceresini herhangi bir standart ekran uzantısına uyacak şekilde yeniden boyutlandırmanıza olanak tanır. Araçlar, burası sayfa doğrulama özelliklerinin depolandığı yerdir. Hem yerel hem de harici. HTML, CSS ve diğer doğrulamalara kolay 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. Görüntüleme yeteneği harici uygulama oluşturulan kodu görüntüleme.

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

Internet Explorer Geliştirici Araç Çubuğu

8.0'dan beri hata ayıklama bu tarayıcıda zaten yerleşiktir. tarafından kolayca denir F12 tuşu... Doğru, 90'ların programı kadar sefil.

Ancak bu tarayıcı için çok daha havalı bir araç var, sözde Internet Explorer Geliştirici Araç Çubuğu bağlantıdan indirilebilir.

Görünüşe göre, bu araç çubuğu elbette bir ateş böceği gibi görünüyor, ancak ne yazık ki henüz olgunlaşmadı. Öte yandan, firebug'ın sahip olmadığı bazı özelliklere sahip olmasına rağmen. Internet Explorer Geliştirici Araç Çubuğu'nu bir tür Firebug melezi olarak adlandırırdım ve FireFox WEB Geliştiricisi Araç çubuğu'a.

Firebug'da olduğu gibi, basit bir tıklama ile bir elemanı incelemek mümkündür. Ancak, dolguları ve kenar boşluklarını hemen görebilirsek, böyle bir olasılık 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 bir şeyi değiştirirsek, bu araç çubuğunu kullanarak hiçbir şey görmeyeceğiz.

Mutlu olunacak bir şey, anında CSS'yi değiştirmektir ( kolay yol neyin hackleneceğini bulun :), CSS 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 yanı: Damlalık kullanarak sayfadan herhangi bir rengi elde etmenizi sağlayan yerleşik bir renk seçici vardır. (ff için ayrı bir ColorZilla eklentisi vardır).

Internet Explorer için Hata Ayıklama Çubuğu

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

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

Bir nedenden dolayı yerleşik bir arama motoru, bir damlalık, pencerenin boyutunu değiştirme yeteneği ve yine bir nedenden dolayı bir arkadaşına sabun için bir sayfa gönderme yeteneği var. Her ne kadar faydalı olabilir. Ama bu fırsatı değerlendiremedim.

Ayrıca bir müfettiş var:

Geliştiriciler, tıklayarak veya üzerinde gezdirerek pişirme yöntemini beğenmediler: daha ilginç bir şey buldular. DebugBar'da, artı işaretini ağaçta görmek için istediğiniz öğeye sürüklemeniz gerekir. CSS düzenleme imkanı yoktur. Ancak bir doğrulayıcı ve yerleşik bir js konsolu var.

Ve ayarlara girerseniz, şunu bulabilirsiniz:

Ve komik ve üzgün.

Geliştirici Araç Çubuğunun sekizinci gezgine yerleştirileceği biliniyor. Üçüncü noktada açıklanana benzer olacak, ancak umarım daha iyi olacaktır.

Opera için DragonFly hatalarını ayıklayın

DragonFly, 9.5 sürümünden beri Opera'da yerleşiktir, dolayısıyla yüklemeniz gerekmez. Dragonfly'ı etkinleştirmek için Araçlar → Gelişmiş → Geliştirici Araçları'na gidin. Ve İ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 hatasını açıklıyor.

Liste özellikleri:

• DOM denetçisi;
• İncelemek için tıkla (yine, FireFox'taki gibi kenar boşlukları görmeyeceğiz);
• düzenleme;
• Hata konsoluna hızlı erişim.

DF, bir çerçevede ayrı bir sayfa gibi bir şeydir. Açarsanız tüm sekmelere açılır (firebug'a benzemez). Bu nedenle, bir elemanı incelemeden önce, görüntülemek istediğimiz sayfayı listeden seçmeliyiz.

Ne yazık ki, burada ve Internet Explorer Dav Araç Çubuğu'nda dinamik olarak oluşturulmuş öğeler görüntülenmez. Ve genel olarak, sayfayı incelediğimizde hiçbir JavaScript tetiklenmez: bağlantılara ve düğmelere tıklanmaz. Umarım DragonFly piyasaya sürüldüğünde tüm bu olasılıkları göreceğiz.

Safari'de WEB Denetçisinde Hata Ayıklama

Tarayıcı hakkında ne olduğunu hemen söyleyeceğim Safari bilgi ıslık çaldı, bu yüzden dedikleri gibi malzemenin yeterliliği için sorumlu değilim.

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

"Geliştirme" menüsünde aşağıdaki işlevler bizim için kullanılabilir:

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

Varsayılan olarak denetçi HTML görünümünde açılır. Ancak DOM görüntüleme moduna geçirilebilir. Bunun için üst tablada şalter bulunmaktadır. Denetçideki bir öğenin üzerine geldiğinizde, sayfanın kendisinde vurgulanacaktır. FireBug ile yapamadığınız gibi, anında girintiyi, değişiklik işaretlemesini veya CSS'yi göremez veya DOMe'deki dinamik değişiklikleri anında göremezsiniz. Ama görüyorsun, çok sevimli görünüyor.

Tarayıcı penceresinde denetçi ile çalışmak isterseniz, 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 ne zaman ve ne kadar süreyle yüklendiğini açıkça 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 biçimde doğdu ve şimdilik eğrileri olsa da, geliştiriciler için hala araçları var.

• DOM Denetçisi;
• Javascript hata ayıklayıcı;
• JavaScript konsolu.

Herhangi bir elemanı incelemek için üzerine tıklamanız gerekir. sağ tık ve bağlam menüsü"Öğe kodunu görüntüle"yi seçin:

İşlev, Safari'dekiyle aynıdır: öğeler üzerine gelindiğinde vurgulanır, ancak CSS ve HTML düzenlemesi kullanılamaz, DOM'deki değişiklikler izlenmez. Bu sadece, denetçiyi tarayıcı penceresine eklemesi gereken sol alt köşedeki düğme çalışmıyor.

"Kaynaklar" sekmesinde aşağıdakileri görebiliriz:

Safari ölçeğinden biraz farklı. Bu şemadaki yarı saydam renkler, ilgili dosya boyutlarını temsil eder ve tam renk, indirme sürelerini temsil eder. Öyle ya da böyle, Chrome'un bu bölümünün tamamlanmaktan uzak olduğu aşikar.

Bu yazıda en ünlü tarayıcı uzantılarını ve yerleşik araçları ele aldım.

Başkaları da var, örneğin:

• Internet Explorer WEB Geliştirme Yardımcısı - iyi bir yardımcı ASP.NET geliştiricileri için (Internet Explorer);
• WEB Geliştirici Araç Çubuğu - Internet Explorer ve FireFox için araç çubuğu. birkaç tane var faydalı fonksiyonlar;
• WEB Erişilebilirlik Araç Çubuğu - Internet Explorer için araç çubuğu. İlginç bir şey yok.

Bahsetmediğim ama değecek eklemeler varsa veya bahsi geçen uzantılarda kaçırdığım işlevler varsa yazın.

Sağlığınız için kullanın!

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

Hata ayıklama korkutucu değil

Bir kod yazdığınızda, hata yaptığınız bir an gelene kadar genellikle 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 verecektir:

V bu durumda, hata mesajının anlaşılması nispeten kolaydır - "sonlandırılmamış çift alıntı dizesi". (Merhaba dünya! "); Çift alıntının eksik olduğunu fark edeceksiniz. Elbette, kodunuz büyüdükçe hata mesajlarını anlamak çok daha zorlaşabilir ve en basit durumlar bile göz korkutucu görünebilir. Rust hakkında hiçbir şey bilmeyenler için.

Ama hata ayıklamaktan korkma! Herhangi bir kodu rahatça yazmak ve hatalarını 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. Tarayıcı onu ayrıştırmadan ve sonucu görüntülemeden önce HTML başka bir biçimde derlenmez (yorumlanır, derlenmez). HTML öğelerinin sözdizimi, Rust, JavaScript veya Python gibi "gerçek programlama dillerinden" çok daha açıktır. Tarayıcıların HTML'yi daha fazla okuma şekli hoşgörülü kodlarını daha katı yorumlayan programlama dillerinden daha fazla. Bu hem kötü hem de iyi.

tolerans kodu

Peki hoşgörülü ne anlama geliyor? Genel anlamda, kodunuzu bozduğunuzda karşılaşacağınız iki tür hata vardır:

• Sözdizimi hataları: Bunlar, yukarıdaki Rust örneğinde olduğu gibi yazım hatalarıdır. Dilin sözdizimine aşina olduğunuz ve hata mesajlarının ne anlama geldiğini bildiğiniz sürece, bunları düzeltmek genellikle kolaydır.
• mantık hataları: Bunlar, sözdizimi doğruysa, ancak kod amaçlanan amacını yerine getirmiyorsa, yani program doğru şekilde çalışmadığında ortaya çıkan hatalardır. Bunları düzeltmek sözdizimsel olanlardan daha zordur, çünkü nerede yanlış yaptığınızı gösteren hiçbir mesaj görüntülenmez.

HTML, sözdizimi hatalarından etkilenmez, çünkü tarayıcı, sözdizimi hataları mevcut olsa bile sayfaların görüntülenebilmesi anlamında, kodu toleranslı bir şekilde okur. Tarayıcıların, yanlış yazılmış işaretlemeyi yorumlamak için yerleşik kuralları vardır ve aksini kastetmiş olsanız bile bir şeyi çalıştırabilirsiniz. Bu gerçek bir sorun olabilir!

bir notta: HTML, toleransla 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 tamamen doğru olduğundan emin olmaktan çok daha önemlidir. Yeni başlayanlarla sıkı sıkıya bağlı olsaydı, web şimdi bu kadar popüler olmazdı.

Aktif Öğrenme: Tolerans Kodunun Tanıtımı

HTML kodu toleransının doğasını keşfetme zamanı.

1. İlk olarak, hata ayıklama örneğimizi indirin ve yerel olarak kaydedin. Bu demo, keşfetmek üzere olduğumuz hatalarla kasıtlı olarak yazılmıştır.
2. Ardından, bir tarayıcıda açın. Bunun gibi bir şey göreceksiniz:
   
3. Belge şu anda pek iyi görünmüyor; Koda bir göz atalım ve nedenini öğrenelim (Yalnızca belgenin gövdesi gösterilir):

   HTML hata ayıklama örnekleri

   HTML'de hatalara ne sebep olur?

   • Kapatılmamış öğeler: Bir öğe düzgün kapatılmazsa etkisi istemediğiniz alanlara yayılabilir.
   • Kötü iç içe yerleştirilmiş öğeler: Öğeleri düzgün şekilde yerleştirmek, kodun doğru şekilde çalışması için de çok önemlidir. kuvvetli güçlü vurgulanmış? bu nedir?
   • Kapatılmamış nitelikler: Başka bir yaygın HTML sorunu kaynağı. Bir örneğe bakalım: Mozilla ana sayfasına bağlantı
4. Sorunları ele alalım:
   • Sahip olmak параграфа!} ve hiçbir etiket kapalı değildir. Yukarıdaki resimde, tarayıcının bir öğenin nerede bitip diğerinin nerede başladığını anlaması kolay olduğundan, işaretlemenin etkilenmediğini görebilirsiniz.
   • Birincisi) içeriğinin büyük önem, ciddiyet veya aciliyet taşıdığını belirtir. Tarayıcılar genellikle içeriği kalın olarak görüntüler. "> öğenin ayrıca bir bitiş etiketi yoktur. Elemanın nerede bitmesi gerektiğini söylemek zor olduğu için bu daha problemlidir. Aslında, kalan metnin tamamı kalındı.
   • Sonraki kısım yuvalama kurallarını bozar: kuvvetli güçlü vurgulanmış? bu nedir?... Bu durumda, yukarıda açıklanan nedenle kodun yorumlanması da zordur.
   • href özelliğinde kapanış çift tırnak işareti eksik. Bu büyük bir soruna neden oldu - bağlantı hiç yeniden oluşturulmadı.
5. Şimdi tarayıcının orijinal belge işaretlemesinin aksine kendi işaretlemesini nasıl oluşturduğunu görelim. Bunu yapmak için geliştirici araçlarını kullanacağız. Geliştirici Araçlarına aşina değilseniz, Tarayıcı Geliştirme Araçlarına Gözatmak için birkaç dakikanızı ayırın.
6. DOM denetçisinde, yeni işaretlemenin nasıl oluşturulduğunu görebilirsiniz:
   
7. DOM denetçisini kullanarak, tarayıcının HTML hatalarımızı nasıl düzeltmeye çalıştığını görmek için kodumuzun ayrıntılarına bir göz atalım (Firefox'ta göz atıyoruz; başka bir modern tarayıcı aynı sonuçları vermelidir):
   • Paragraflar ve liste öğeleri, kapanış etiketleri ile alınır.
   • elemanın nerede olduğu belli değildi. kapatmak zorundaydı, bu yüzden tarayıcı her bir metin bloğunu kendi güçlü etiketleriyle belgenin en altına kadar sardı!
   • Hatalı yerleştirme, tarayıcı tarafından şu şekilde düzeltildi: kuvvetli güçlü vurgulanmış? bu nedir?
   • Eksik çift tırnak içeren bağlantı kalıcı olarak kaldırıldı. Listedeki son öğe şöyle görünecek:
   • Kapatılmamış nitelikler: Başka bir yaygın HTML sorunu kaynağı. Bir örneğe bakalım:

HTML doğrulama

Yukarıdaki örnekten, HTML'nin geçerliliğini kontrol etmeye değer olduğu açıktır. Yukarıdaki basit örnekte, tüm kodu gözden geçirip hataları bulabilirsiniz, peki ya devasa, karmaşık sayfalar?

En iyi seçeneğiniz, sayfayı bir işaretleme doğrulama hizmetiyle doğrulamaktır. HTML, CSS ve diğer web teknolojilerinin özellikleriyle ilgilenen bir kuruluş olan W3C tarafından oluşturuldu ve sürdürüldü. Hizmet, HTML'nizi kontrol edecek ve içindeki hatalar hakkında bir rapor oluşturacaktır.

HTML, bir dosya yükleyerek veya basitçe sayfaya kopyalayarak URL'de kontrol edilebilir.

Aktif Öğrenme: Bir HTML Belgesini Doğrulama

1. İşaretleme doğrulama hizmetini bir tarayıcıda açın.
2. Doğrudan Girişle Doğrula moduna girin.
3. Tüm belge kodunu (yalnızca gövdeyi değil) kopyalayın ve giriş için yerine yapıştırın.
4. basmak Kontrol etmek.

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

Hata mesajlarıyla çalışma

Mesajların ne anlama geldiği genellikle hemen anlaşılır, ancak bazen sorunun ne olduğunu anlamaya çalışmanız gerekir. Şimdi tüm hataları gözden geçireceğiz ve ne anlama geldiklerini analiz edeceğiz. Mesajların, hataları bulmayı kolaylaştırmak için bir satır ve bir kod sütunu içerdiğini unutmayın.

• "Bitiş etiketi li ima edildi, ancak açık öğeler vardı" (2 örnek): Tarayıcı nerede olması gerektiğini tahmin etmesine rağmen, açık bir bitiş etiketi yok. Mesaj, bitiş etiketinin beklendiği yerden sonraki satırı gösterir, ancak doğru yeri bulacaksınız.
• "Güçlü kapatılmamış öğe": Bu çok basit bir hatadır - öğe), içeriğinin büyük önem, ciddiyet veya aciliyet olduğunu gösterir. Tarayıcılar genellikle içeriği kalın olarak görüntüler. "> kapatılmaz ve mesaj doğrudan açılış etiketine işaret eder.
• "Bitiş etiketi güçlü, iç içe geçme kurallarını ihlal ediyor": Öğe yanlış iç içe yerleştirilmiş - bu düzeyde eşleşen bir başlangıç ​​etiketi yok.
• "Bir öznitelik değerinin içindeyken dosyanın sonuna ulaşıldı. Etiket yoksayılıyor": Şifreli mesaj. Gerçek şu ki, bir yerde (büyük olasılıkla belgenin sonunda) bir öğe özelliği yanlış yazılmıştır ve dosyanın sonu bu özelliğin içinde kalmıştır. Bağlantı tarayıcıda görünmüyor - büyük olasılıkla sorun onun yanında.
• "Dosya sonu görüldü ve açık öğeler var": Dosya sona erdi, ancak bazı öğeler kapatılmadı. Mesaj dosyanın sonunu gösterir, bu durumda örnek: Mozilla ana sayfasına bağlantı kapalı değil ↩

↩

↩

Internet'te gezinirken, Internet Explorer, sayfanın hata içerdiğine ve düzgün görüntülenemeyebileceğine dair mesajlar görüntüleyebilir. Bu sorunu çözmenin birkaç yoluna bakalım.

Talimatlar

Tarayıcının çalışmasında, periyodik olarak ortaya çıkan hata dışında, görünür bir zorluk yoksa, mesajın tekrar görünmemesi için komut dosyası hata ayıklamasını devre dışı bırakmayı deneyebilirsiniz (hata bir sitede değil, aynı anda birkaç sitede görünüyorsa) , sonraki adıma geçin). Araçlar menüsünden İnternet Seçenekleri'ni açın, Gelişmiş sekmesini seçin ve Komut dosyası hata ayıklamasını engelle onay kutusunu seçin. Tüm hatalarla ilgili bildirimi kapatmanız gerekiyorsa "Her komut dosyası hatasıyla ilgili bildirimi göster" seçeneğinin yanındaki kutunun işaretini kaldırın.

Sorunun yerel olup olmadığını görmek için hatayı yaşayan siteye farklı bir hesaptan veya farklı bir bilgisayardan erişmeyi deneyin. Hata görünürse, büyük olasılıkla web sayfasındaki geçersiz koddan kaynaklanıyordur. Bu durumda, önceki adımdaki talimatları izleyerek komut dosyası hata ayıklamasını kapatabilirsiniz. Farklı bir bilgisayar veya hesap kullanarak siteye göz attığınızda sorun ortadan kalkarsa bir sonraki adıma geçin.

Internet Explorer, sayfalarda gezinirken sayfadaki bilgilerin görüntülenmesini belirleyen aktif komut dosyalarını, Java ve ActiveX'i engellemiyor olabilir. Sorunu çözmek için tarayıcı güvenlik ayarlarınızı 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. Hata sayfasını 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 çok büyürse, bazı sayfalarda hatalar görüntülenebilir. Sorun, geçici dosyalar klasörünü periyodik olarak temizleyerek çözülebilir. Bunu yapmak için Araçlar menüsünden İnternet Seçenekleri iletişim kutusunu açın. Genel sekmesindeki Geçmiş grubunda Sil düğmesini tıklayın. "Geçici İnternet Dosyaları", "Çerezler", "Günlük", "Web Formları Verileri" kutularını işaretleyin ve "Tamam"ı tıklayın.

JavaScript Hatalarını Ayıklamak için F12 Geliştirici Araçlarını Kullanma

Bu içerik, F12 Geliştirici Araçları'nın daha eski bir sürümüne atıfta bulunmaktadır. F12 araçları için en son belgeleri indirin.

F12 araçları, geliştiricilerin tarayıcılarından ayrılmadan JavaScript kodunda hızlı bir şekilde hata ayıklamasını sağlar. Windows Internet Explorer 9'un her örneğinde yerleşik olarak bulunan F12 geliştirici araçları, kesme noktaları, görüntüleme denetimi ve yerel değişkenler gibi hata ayıklama araçlarının yanı sıra bir mesaj konsolu ve anında kod yürütme sağlar.

Bu makalede, JavaScript kodunda hata ayıklamak için F12 geliştirici araçlarının nasıl kullanılacağı anlatılmaktadır. Bu makale kapsamlı bir hata ayıklama öğreticisi olmayı amaçlamamıştır, ancak bir geliştiricinin oluşturulan kodu kullanmaya başlamasına yardımcı olabilecek araçları vurgulamayı amaçlamaktadır. Internet Explorer 9'da, tuşuna basın F12 geliştirici araçlarını açmak ve sekmeyi tıklayın Senaryo başlamak.

sekmesinde Senaryo sol tarafta, bir geliştiricinin JavaScript kodunu görüntüleyebileceği, kesme noktaları ayarlayabileceği ve işlevlerinde adım adım ilerleyebileceği bir kaynak alandır. Sağ bölmede, konsol sekmeleri, Değişkenleri izle, yerel değişkenler, İzleme yığını ve kesme noktaları arasında geçiş yapabilirsiniz.

Hata ayıklayıcıyı başlatma ve durdurma

F12 geliştirici araçlarını ilk açtığınızda ve sekmeyi tıkladığınızda Senaryo, kodunuz solda ve konsolunuz sağda görünür. Konsolda “F12 geliştirici aracı açılmadan önce alınan mesajları görmek için sayfayı yenileyin” mesajını görebilirsiniz. Web sayfasını yenilediğinizde konsol tarayıcıdan kaynaklanan tüm hataları ve uyarıları görüntüler.

Kesme noktalarını ayarlamak, kontrolü ve yerel değişkenleri görüntülemek ve işlev dizilerinin çağrı yığınını görüntülemek için, öğesine tıklayın. Hata ayıklamaya başla... Düğmeye basın Hata ayıklamaya başla web sayfasını yeniler ve hata ayıklayıcıdaki kodu yeniden çalıştırır.

Sözdizimi ve Diğer Kod Hatalarını Algılamak için Konsolu Kullanma

Çoğu programlama projesinde hatalar sözdizimsel, mantıksal ve veri girişi hatalarına ayrılır. Konsol görünümü, JavaScript hatalarını ve istisnalarını ve ayrıca DOM istisnalarını gösterir. Kodunuz içinde, program durumu ve hata mesajlarını konsola alarm () veya mevcut ekran alanı çağırmak yerine göndermek için konsol nesnesini kullanabilirsiniz. Örneğin, satırı ekleyebilirsiniz

Window.console.log ("Dosya başarıyla açıldı");

Çalıştırılmasını kesintiye uğratmadan betiğin durumu hakkında bilgi almak için JavaScript kodunuza girin. Ek bilgi: .

Komut dosyalarının görünümünü düzeltme

F12 Geliştirici Araçları, kodun nasıl görüntülendiğine bakılmaksızın satır veya ifade düzeyinde JavaScript'te hata ayıklayabilir. Hatta büyük bir kod bloğu olarak görünecek şekilde sıkıştırılmış komut dosyalarının üzerinden geçebilirsiniz. Ancak bazen kod bir blok olduğunda mantığı takip etmek zordur.

Komut dosyasını biçimlendirmek için düğmeye basın. Yapılandırma ve öğeyi seçin JavaScript'i biçimlendir... Aşağıdaki ekran görüntüleri, biçimlendirmeden önce ve sonra bir JavaScript kodu bloğunu göstermektedir.

Kod yürütmeyi iptal etme

F12 Geliştirici Araçları'nda kesme noktalarının ayarlanması, Microsoft Visual Studio gibi ikili hata ayıklayıcılarda yapılan ayarlamaya benzer. Sol bölmede, durmak istediğiniz kod satırının soluna tıklayın. Kesme noktaları geçiş noktalarıdır, bu nedenle tıklamak bir kesme noktası ekler ve tekrar tıklamak onu kaldırır.

Kodunuza istediğiniz kadar kesme noktası ekleyebilirsiniz. Kod satırını sağ tıklayıp seçebilirsiniz. Kesme noktası ekle veya kesme noktası ayarlamak istediğiniz ifadenin yanındaki sol kenar boşluğuna tıklayın.

F12 geliştirme araçlarını kullanarak, ifadeler birden çok ifadeden oluşan bir blok veya satırda olsa bile ifade düzeyinde bir kesme noktası ayarlayabilirsiniz. Bu, sıkıştırılmış bir kod segmentinde bir kesme noktası oluşturmanıza olanak tanır. Bu koşullar altında bir kesme noktası belirlemenin en iyi yolu, koda sağ tıklayıp seçmektir. Kesme noktası ekle... Ayrıca, daha önce açıklanan komut dosyası biçimlendirmesini (güzel baskı) kullanabilir, dizeleri kenar boşluklarına tıklamayı kolaylaştırmak için biçimlendirebilirsiniz.

Kesme Noktaları Sekmesini Kullanarak Birden Çok Kesme Noktasını Yönetme

Çok sayıda kesme noktası olan veya hatta birkaç dosyadan oluşan büyük miktarda kod kullanıyorsanız, sekmeyi kullanabilirsiniz. kesme noktaları istediğiniz tüm noktaları izlemek için. sekmesinde Senaryo sekmeyi tıklayın kesme noktalarıözellik veya sağ bölmede. Aşağıdaki resimdeki örneğe bakın:

sekmesinde kesme noktaları geliştirici, istenen kesme noktalarının konumlarına tam olarak gitmek zorunda kalmadan kesme noktalarını etkinleştirebilir veya devre dışı bırakabilir, silebilir, seçebilir ve kopyalayabilir. Kesme noktasını etkinleştirmek veya devre dışı bırakmak için değiştirmek istediğiniz seçeneğin yanındaki kutuyu işaretleyin veya işaretini kaldırın. Ayrıca, listede çift tıklatarak kodunuzdaki bir kesme noktasına doğrudan atlayabilirsiniz. tuşuna basarak aynı anda birden fazla kesme noktası seçebilirsiniz. CTRL ve istediğiniz kesme noktalarına tıklayın.

sekmesinde kesme noktaları kesme noktası gruplarını kaldırmak, etkinleştirmek, devre dışı bırakmak veya kopyalamak için bağlam menüsünü de (sağ tıklama) kullanabilirsiniz. Bu parametreler aşağıdaki tabloda gösterilmiştir.

Menü seçeneği	Eylem
Silmek	Kurtarmanın ötesinde bir kesme noktasının silinmesi.
hepsini sil	Kurtarmanın ötesinde tüm kesme noktalarını siler.
Hepsini etkinleştir	Listedeki tüm kutuları kontrol etmek.
Tümünü devre dışı bırak	Listedeki tüm onay kutularını temizler.
Şart	Tek bir nokta için koşullu bir kesme noktası belirlemenizi sağlar. Birden çok kesme noktası seçilirse bu öğe kullanılamaz.
kopyala	Seçili kesme noktalarının açıklama metnini kopyalar.
Hepsini seç	Listedeki tüm kesme noktalarını seçer.
Kaynak koduna	Seçili kesme noktasını görüntülemek için kodun sol alanına gidin. Birden çok kesme noktası seçilirse bu öğe kullanılamaz.

koşullu kesme noktaları

Bir kod satırında koşulsuz bir kesinti yararlıdır, ancak daha da güçlü bir araç, bir özellik veya değişken belirli bir değere ulaştığında kesmektir. Belirli bir değere ulaşıldığında veya ayarlandığında durdurmak için bir kesme noktası oluşturun ve ardından sekmeyi açın. kesme noktaları... İstediğiniz kesme noktasına sağ tıklayın ve Şart.

Koşullar iletişim kutusunda doğru JavaScript ifadesini ekleyin. İfade doğru olarak değerlendirildiğinde, yürütme kodu bu kesme noktasında duracaktır. Örneğin, aşağıdaki resimde, oAudio.paused özelliğinin değeri yanlış olduğunda kod yürütme durur.

Tek bir koşul belirtebilir veya daha karmaşık bir kırılma koşulu oluşturmak için mantıksal operatörleri kullanabilirsiniz. Ancak, değişkenlerin ve nesnelerin kapsamının, kesme noktası görünümünde görüntülendikleri zamankiyle aynı kaldığını unutmayın. Kapsamda olmayan bir koşul değeri doğru olarak değerlendirilmez.

Kodda adım adım

Kod yürütme bir kesme noktasında durduğunda, yürütmeye devam etmek için atlama düğmelerini kullanabilirsiniz ( F5), kesintiler ( CTRL + ÜST KRKT + B), fonksiyona adım adım giriş ( F11), işlevi atlayarak ( F10) veya işlevden çıkın ( ÜST KRKT + F11). Yürütme bir kesme noktasında veya adım adım ilerlerken durdurulduğunda, hata ayıklama penceresi aslında kalıcı hale gelir.

Bu nedenle, web sayfasıyla etkileşime devam etmeden önce hata ayıklamayı durdurmanız gerekir ( ÜST KRKT + F5) veya yürütmeye devam edin ( F5). Bir web sayfası yanıt vermeyi durdurmuş gibi görünüyorsa bunu unutmayın. Birden çok pencere açıkken hata ayıklayıcı penceresi üstte değilse, bir kesme noktasında yanıt bekleyebilir. Bu durumda, web sayfasının kontrolünü yeniden kazanmak için o web sayfasının hata ayıklama penceresini bulun ve tıklayın. F5 devam etmek veya tuşuna basın ÜST KRKT + F5 hata ayıklamayı durdurmak için.

Değişkenleri İzleme ve Yereller Sekmelerini Kullanarak Görüntüleme

Sekme İzlemek hata ayıkladığınız koddaki kontrol değişkenlerini tanımlamanıza ve görüntülemenize olanak tanır. Belirtilen değişkenlerin adını, değerini ve türünü içerir. işaretli satıra tıklayabilirsiniz eklemek için tıklayın..., sekmesinde Referans değerleri ve değişkenin adını girin. Değişken adı yazmak istemiyorsanız, kopyalayıp kontrol değişkeni listesine yapıştırabilirsiniz.

Watchdog listesindeki değerler, kodun şu anda hata ayıklanıp ayıklanmadığına bakılmaksızın görüntülenir. Hata ayıklama etkinleştirildiğinde ve kod izleme veya kesme noktaları ayarlandığında, listedeki değişkenlerin değerlerinin kapsamı, geçerli komut dosyası yürütme noktası tarafından belirlenir. Hata ayıklama devre dışı bırakılırsa, kapsam globaldir ve yalnızca global değişkenlerin değerleri gösterilir.

Sekmenin aksine Referans değerleri, ilgili değişkenlerin kapsamda olup olmadığına bakılmaksızın gösterilen değerler, sekmede Yerel yalnızca geçerli kapsamdaki değişkenler gösterilir. Görüntülemek için değişkenler eklemeniz gerekmez, çünkü kapsamı değiştirdiğinizde bu sekme mevcut tüm değişkenleri gösterecek şekilde güncellenir.

Farkı görmek için aşağıdaki örneği Internet Explorer 9'da açın ve aşağıdaki adımları izleyin.

Çalıştırmak

1. Örneği Internet Explorer 9'da indirin.
2. tuşuna basın F12 F12 geliştirici araçlarını açmak ve sekmeyi tıklayın Senaryo.
3. Sol bölmede, ilk işleve gidin, "var a = 5" satırına sağ tıklayın; ve komutu seçin Kesme noktası ekle.
4. Düğmeye bas Hata ayıklamaya başla tıklayın ve ardından tarayıcınızdaki bir web sayfasında Çalıştırmak(Çalıştırmak).
5. F12 geliştirici araçlarında sekmeye tıklayın Referans değerleri sağ tarafa "a, b, c ve d" değişkenlerini ekleyin.
6. tuşuna basarak kodda ilerleyin F11 veya düğme Girişli adım ve sekmedeki değişkenlere bakın Referans değerleri.

Her fonksiyonda adım adım ilerlerken, görüntülenen değerler tanımsızdan bir değere değişmelidir.

Sekmeden farkı hissetmek için Yerel, tuşuna basın F5 geliştirici araçlarından devam etmek için F12. Tarayıcıdaki bir web sayfasında, Çalıştırmak(Çalıştır) düğmesine basarak kodu yeniden çalıştırın ve F12 geliştirici araçlarına dönün. Sekmenin sağ bölmesinde Senaryo sekmeyi tıklayın Yerel ve tuşuna basın F11 işlevler arasında tekrar adım atmak için Yerel değişken listesinin yalnızca değerleri olan değişkenleri içerdiğine dikkat edin. Görünümünde Yerel ayrıca işleve iletilen bağımsız değişkenleri, bunların değerini ve türünü gösterir.

Çağrı yığınını görüntüleme

Sekme Çağrı yığını koddan fonksiyonları çağırırken geçilen yolu görmenizi sağlar. Bu, bir hatanın sonucu olan beklenmeyen kod yollarını bulmanıza yardımcı olabilir. sekmesinde Çağrı yığını herhangi bir işlevi çift tıklatabilir ve kaynak kodunda aramaya gidebilirsiniz.

Yukarıdaki örneği deneyin ve sekmeye dikkat edin Çağrı yığını fonksiyonları girerek kodda ilerlerken.

sekmesinde Çağrı yığını geçerli işlev veya konum her zaman en üsttedir (sekmede olduğu gibi bir okla gösterilirler) Çağrı yığını, ve kodun kenar boşluklarında). Listedeki işlevlerden herhangi birine çift tıkladığınızda, işlevi çağıran operatör vurgulanır.

Birden çok komut dosyasında hata ayıklama

Büyük web sayfaları, birden çok JavaScript dosyası kullanma eğilimindedir. F12 Geliştirici Araçları, tıpkı kodunuzda hata ayıklarken olduğu gibi, birden çok komut dosyasıyla çalışmanıza olanak tanır. Farklı bir dosyayı görüntülemek için düğmenin yanındaki aşağı oku tıklayın. Hata ayıklamaya başla Bu web sayfasıyla ilişkili komut dosyalarını listelemek için. F12 geliştirici araçlarını kullanmak, tüm dosyalar boyunca kodun üzerinden geçecektir. Herhangi bir komut dosyasındaki değişkenler, görüntüleme için eklenebilir ve çağrı yığını görünümü, çeşitli komut dosyalarında bulunan işlevler aracılığıyla yürütme yolunu gösterecektir.

Belge Modu Ayarını Değiştirme

Belge modunu satırın sağ tarafında ayarlama Menü her F12 geliştirici araçları sekmesinde bulunur, ancak bu ayar özellikle sekmedeki kodda hata ayıklarken kullanışlıdır Kodlar... Internet Explorer 9, Windows Internet Explorer'ın önceki sürümlerinin standartlarını taklit etmek için belge modunu değiştirmenize olanak tanır. Internet Explorer 9'da bir reklamdan çıkmabelge türünü varsayılan olarak uyumluluk moduna ayarlar. Örneğin veya HTML5'te yeni bir özellik veya yeni standartla çalışırken, bazı hatalar programlama hataları gibi görünebilir, ancak gerçekte bunlar eksik veya yanlış bir belge türü bildiriminden kaynaklanır.

Internet Explorer 9 için F12 Geliştirici Araçları, kodunuzu sizin için düzeltemez, ancak JavaScript hatalarını bulmayı biraz daha kolaylaştırır.