HTML5 uygulamalarında JavaScript hatalarını ayıklayın ve test edin. JS Birim testlerini çalıştırma. IE hata mesajları

Geçtiğimiz birkaç yılda, jQuery ve Prototype gibi çeşitli kitaplıkların ortaya çıkmasıyla JavaScript, web projelerini komut dosyası oluşturmak için lider dil haline geldi. Artan popülerlik ve kullanım kolaylığı, binlerce JavaScript satırı içeren Gmail gibi tam teşekküllü uygulamalara yol açarak geliştirme ekibine takım becerileri açısından artan talepler getirdi.

Uygulamaların artan karmaşıklığı, bir hatanın kaynağını hızlı ve verimli bir şekilde bulabilen güçlü hata ayıklama araçlarına ihtiyaç duyulmasına neden olur. Bir fonksiyon kullanarak değişken değerlerin basit çıktısı uyarmak () alaka düzeyini kaybetti.

Bu ders, JavaScript kodunda hata ayıklamayı daha kolay bir süreç haline getirmeye yardımcı olan modern geliştirici araçlarının yeteneklerine kısa bir genel bakış sağlar. Odak noktası Chrome tarayıcısının ve FireFox için Firebug eklentisinin yeteneklerine odaklanacaktır, ancak açıklanan özelliklerin çoğu, Dragonfly for Opera gibi diğer araçlarda mevcuttur.

Konsol - genel görünüm

Çoğu geliştirici programında, programcının en iyi arkadaşı konsol olacaktır. Çok amaçlı bölme, hata mesajlarını günlüğe kaydetmek, DOM'u kontrol etmek, JavaScript kodunda hata ayıklamak ve diğer birçok görev için kullanılır. Tarayıcıya bağlı olarak, konsol farklı komutlarla çağrılır (menü üzerinden doğrudan seçim hariç):

• chrome tarayıcıda ve Dragonfly for Opera'da - Ctrl + Shift + I
• Kundakçı - F12

Konsol, kod yürütme sırasında algılanan koddaki hataları otomatik olarak görüntüler. Dosya ve satır, hatanın yanında gösterilir ve hataya tıklamak, giriş odağını karşılık gelen konuma taşır.

Verileri konsola çıkarıyoruz

Konsol yalnızca komut dosyası kodundaki hataları gösteremez. Konsol API'sini ve Komut Satırı API'sini kullanarak, konsola veri çıkışını kontrol edebilirsiniz. En ünlü ve kullanışlı ekip .log ().

Form kodu tasarlarken, kodun doğru çalıştığını doğrulamak için değişkenlerin değerlerini bilmek çok yararlıdır. İşlevi kullanmak yaygın bir uygulamadır uyarmak () görsel kontrol için. Ancak, bu yöntemin kullanılması, kodun geri kalanının iletişim kutusunda düğme tıklanana kadar yürütülmesini engeller.

Modern çözüm yöntemi kullanmaktır console.logdeğişkenlerin değerlerini konsol paneline çıkarır:

Console.log ("Kaptanın Günlüğü"); // konsol paneline “Kaptanın Günlüğü” yazdırır

Yöntem, hesaplanan değerleri görüntülemek için kullanılabilir:

Fonksiyon calcPhotos () (total_photos_diff \u003d total_photos - prev_total_photos; // Değişken değerlerini konsol konsol.log günlüğüne yazdır (total_photos_diff);)

Bu yaklaşımın diyalog yöntemine göre avantajı uyarmak () kodun yürütülmesinin kesintiye uğramaması ve geliştiricinin verilerdeki değişiklikleri gerçek zamanlı olarak gözlemlemek için değişkenlerin değerlerini birkaç kez görüntüleyebilmesidir.

Var t \u003d 3, p \u003d 1; function calcPhotos (total_photos, prev_total_photos) (var total_photos_diff \u003d total_photos - prev_total_photos; // Değerleri konsol konsoluna yazdırın (total_photos_diff); // Değerleri güncelleyin t \u003d t * 1.3; p \u003d p * 1.1;) setInterval (function () (calcPhotos (t, p);), 100);

Mesajları vurgulama

Yukarıdaki örnekte, döngü konsola birçok değişken değeri çıkaracaktır. Bununla birlikte, kodda özel dikkat gerektiren alanları etkili bir şekilde vurgulamak için farklı verileri görsel olarak ayırmak genellikle uygundur. Konsol API'sinin bunu başarmak için birkaç yöntemi vardır.

console.info (): Bilgi simgesini görüntüler ve sunulacak bilgileri vurgular. Bu yöntem, çeşitli olaylarla ilgili uyarı için kullanışlıdır.

console.warn (): Bir uyarı simgesi görüntüler ve sunulacak bilgileri vurgular. Sınırların ötesine geçen parametreler hakkında bilgi için kullanılması uygundur.

console.error (): "Hata" simgesini görüntüler ve renkli olarak sunulan bilgileri vurgular. Hataları ve kritik koşulları bildirmek için kullanışlıdır.

Not: Chrome geliştirici aracı, konsolda bilgileri farklı şekilde görüntülemek için bir araç sağlamaz.

Konsola bilgi göndermek için çeşitli yöntemler kullanmak, verileri görselleştirmenize olanak tanır. Bilginin sunumu bloklar halinde birleştirilerek geliştirilebilir. Kullanılan yöntem console.group () :

// Birinci grup console.group ("Fotoğraf hesaplama"); console.info ("Toplam fark şimdi" + total_photos_diff); console.log (total_photos_diff); console.groupEnd (); // İkinci grup console.group ("Değişken artırılıyor"); console.log ("Toplam fotoğraf sayısı:" + t); console.log ("Önceki toplam fotoğraflar artık:" + p); console.groupEnd ();

Bu örnek, konsoldaki bilgileri gruplandıracaktır. Görsel sunum farklı tarayıcılarda farklılık gösterecektir, aşağıdaki görüntü Dragonfly for Opera'daki görünümü göstermektedir:

Yukarıdaki örnekler, Konsol API'sindeki mevcut yöntemlerin küçük bir listesini sağlar. Resmi Firebug sayfasında belgelenen başka birçok faydalı yöntem vardır.

Komut dosyasının yürütülmesine ara verme

Konsol çıktısı kullanışlıdır, ancak kod çok hızlı çalışabilir ve yine de birçok değişkeni izleyebilir.

Hata ayıklama sürecini kolaylaştırmak için, verilere erişim elde etmek için kod yürütmeyi belirli bir noktada kesebilirsiniz. Bunun için kesme noktaları kullanılır.

Kesme noktalarıyla çalışma

Bir kesme noktası ayarlamak için "Komut Dosyaları" sekmesine gidin ve listeden gerekli komut dosyasını seçin. Şimdi, komut dosyasının yürütülmesini kesmeniz gereken satırı arıyoruz ve etkinleştirmek için satır numarasına sahip alana tıklayın - görsel bir gösterge görünecektir. Şimdi sayfayı yeniden yüklüyoruz ve kod çalıştırma verilen noktada kesintiye uğrayacak:

Yürütme kesintiye uğradığında, fare imlecini herhangi bir değişkenin üzerine hareket ettirebilirsiniz ve hata ayıklayıcı o andaki değerle bir ipucu görüntüler.

Ardından kenar çubuğunun üstünde bulunan özel düğmeleri kullanarak kodu yürütmeye devam edebilirsiniz:

Kenar çubuğunda, yerel ve global değişkenlerin dinamikleri dahil olmak üzere kodunuzun durumunu izleyebilirsiniz.

Koşullu kesme noktaları

Kod hata ayıklama sürecinde, bazen kodun yürütülmesini yalnızca belirli koşullar karşılandığında durdurmanız gerekir. Örneğin, betiğinizin her yinelemesi 50 milisaniye süren bir döngüsü varsa, yalnızca 300 yinelemeye ihtiyacımız olduğunda her adımda durduktan sonra yürütme sürecini başlatmak çok zahmetli olacaktır. Bu tür durumlar için şartlı kesintiler vardır.

Şekildeki örnekte, kodun yürütülmesi değişkenin değerine kadar kesintiye uğramayacaktır. total_photos_diff 200'den fazla olmayacak.

Koşullu bir kesme noktasını etkinleştirmek için, kesme noktasına sağ tıklayın ve kesme noktası oluşum koşullarını düzenlemek için iletişim kutusunu görüntülemek üzere "Kesme Noktasını Düzenle" öğesini seçin.

Kodda bir kesme noktası ayarlama

Tarayıcıdaki geliştirici aracı arayüzünü kullanarak kesme noktaları ayarlamak her zaman uygun değildir. Bazen hata ayıklayıcıyı koddan özel bir komutla başlatmak daha kolaydır. Aşağıdaki örnek, belirli koşullar karşılandığında kod yürütmeyi nasıl kesebileceğinizi gösterir:

If (total_photos_diff\u003e 300) (hata ayıklayıcı; // hata ayıklayıcıyı başlatın ve kod yürütmeyi durdurun)

Kod yürütmeyi kesmenin diğer yolları

Bir kesme noktası kullanmaya ek olarak geliştirici aracı, farklı durumlarda kod yürütmeyi durdurmak için başka seçenekler sunar.

DOM değişikliklerinde durma

DOM değişikliklerini işleyen bir kod parçasında hata ayıklamanız gerekiyorsa, geliştirici aracı, bir DOM düğümü değiştiğinde kod yürütmeyi durdurmanın bir yolunu sağlar.

HTML kodu panelinde, istediğiniz öğeye sağ tıkladığınızda, DOM değiştiğinde kodu durdurma koşullarını (öznitelikleri değiştirme, alt öğeleri ekleme / kaldırma, bir öğeyi silme) seçebilirsiniz. Kodu yeniden yükleyin ve öğeler değiştiğinde kod yürütme duracaktır.

Tüm veya işlenmemiş istisnalarda dur

Çoğu geliştirici aracı, bir istisna oluştuğunda komut dosyası yürütmeyi durdurmanıza izin verir. Chrome'da bu işlev, arayüzün alt satırındaki "Duraklat" simgesi kullanılarak etkinleştirilebilir.

Kod yürütmenin hangi istisnalar için durdurulacağını seçebilirsiniz. Aşağıdaki örnek, bir işlenmemiş ve bir işlenmiş (try | catch bloğu) istisnasını göstermektedir:

Var t \u003d 3, p \u003d 1; function calcPhotos (total_photos, prev_total_photos) (var total_photos_diff \u003d total_photos - prev_total_photos; // Birinci grup console.info ("Toplam fark şimdi" + total_photos_diff); // Değerleri güncelle t \u003d t + 5; p \u003d p + 1; / / İşlenmemiş istisna if (total_photos_diff\u003e 300) (throw 0;) // İşlenmemiş istisna if (total_photos_diff\u003e 200) (deneyin ($$ ("# olmayan-öğe"). Hide ();) catch (e) (konsol. error (e);))) setInterval (fonksiyon () (calcPhotos (t, p);), 50);

Çağrı yığınına giriş

Komut dosyanızı çalıştırırken bir hata görünürse, yukarıdaki yöntemler hatayı analiz etmek için programın durdurulmasına yardımcı olacaktır. Ancak sebebin nerede olduğu her zaman hemen belli olmaz.

Komut dosyası kesintiye uğradığında, Çağrı yığını da dahil olmak üzere yararlı bilgiler için sağdaki bölmeye bakın.

Çağrı yığını, hatanın oluştuğu ve kod yürütmenin durduğu noktaya giden tam yolu gösterir.

Aşağıdaki resimde, hata işlevde kasıtlı olarak oluşturulmuştur. incrementValues \u200b\u200b(), bu da kod yürütülmesinin durmasına neden oldu. geliştirici aracı, potansiyel olarak tehlikeli yerleri belirlemenize olanak tanıyan tam çağrı yığınını gösterir.

Sonuç

Bu ders, aktif olarak kullanmayı planladığınız aracın belgelerinin daha ayrıntılı incelenmesi için bir başlangıç \u200b\u200bnoktasıdır.

Zaman zaman geliştiriciler kodlama hataları yapar. Bir program veya komut dosyasındaki bir hata, hata olarak adlandırılır.

Hataları bulma ve düzeltme sürecine hata ayıklama adı verilir ve bu, geliştirme sürecinin normal bir parçasıdır. Bu bölümde, görevlerde hata ayıklamanıza yardımcı olabilecek araçlar ve teknikler anlatılmaktadır.

IE hata mesajları

Hataları izlemenin en kolay yolu, tarayıcınızda hata bilgilerini etkinleştirmektir. Varsayılan olarak, Internet Explorer bir sayfada bir hata oluştuğunda durum çubuğunda bir hata simgesi görüntüler.

Bu simgeye çift tıklamak sizi belirli bir hatayla ilgili bilgileri görüntüleyen bir iletişim kutusuna götürür.

Bu simgenin gözden kaçması kolay olduğu için, Internet Explorer size bir hata oluştuğunda Hata iletişim kutusunu otomatik olarak görüntüleme yeteneği sağlar.

Bu seçeneği etkinleştirmek için, Araçlar → İnternet Seçenekleri → Gelişmiş sekmesini seçin. ve son olarak aşağıda gösterildiği gibi "Her komut dosyası için bildirim göster" kutusunu işaretleyin -

Firefox veya Mozilla'daki hata mesajları

Firefox, Netscape ve Mozilla gibi diğer tarayıcılar, hata mesajlarını JavaScript Konsolu veya Hata Konsolu adı verilen özel bir pencereye gönderir. Konsolu görüntülemek için Araçlar → Hata Konsolu veya Web Geliştirme'yi seçin.

Ne yazık ki, bu tarayıcılar bir hata oluştuğunda görsel bilgi sağlamadığından, konsolu açık tutmalı ve komut dosyanızı çalıştırırken hataları izlemelisiniz.

Hata bildirimleri

Konsolda veya Internet Explorer iletişim kutuları aracılığıyla görüntülenen hata bildirimleri, hem sözdizimi hem de çalışma zamanı hatalarının sonucudur. Bu hata bildirimleri, hatanın meydana geldiği satır numarasını içerir.

Firefox kullanıyorsanız, hata betiğindeki tam satıra gitmek için hata konsolunda bulunan hataya tıklayabilirsiniz.

Bir komut dosyası nasıl hata ayıklanır

JavaScript'inizde hata ayıklamanın çeşitli yolları vardır - JavaScript Doğrulayıcı kullanın

JavaScript'i garip hatalar için test etmenin bir yolu, onu geçerli olduğundan ve dilin resmi sözdizimi kurallarına uyduğundan emin olmak için kontrol eden bir program aracılığıyla çalıştırmaktır. Bu programlara ayrıştırıcılar veya kısaca doğrulayıcılar denir ve genellikle ticari HTML ve JavaScript düzenleyicileriyle birlikte gelir.

En uygun JavaScript doğrulayıcı, Douglas Crockford'un JavaScript Lint'inde ücretsiz olarak bulunan Douglas Crockford'un JavaScript Lint'idir.

Bu web sayfasını ziyaret edin, sağlanan metin alanına JavaScript kodunu (yalnızca JavaScript) yapıştırın ve jslint düğmesini tıklayın. Bu program, tüm değişken ve işlev tanımlarının doğru sözdizimini takip etmesini sağlayarak JavaScript kodunuzu ayrıştıracaktır. Ayrıca doğru biçimde olduklarından emin olmak için, eğer ve süre gibi JavaScript ifadelerini de kontrol edecektir.

Programlarınıza hata ayıklama kodu ekleyin

Kodunuzda hata ayıklamak için programınızda alert () veya document.write () yöntemlerini kullanabilirsiniz. Örneğin, şöyle bir şey yazabilirsiniz:

var debugging \u003d true; var whichImage \u003d "widget"; eğer (hata ayıklama) alert ("swapImage () öğesini argümanla çağırır:" + whichImage); var swapStatus \u003d swapImage (whichImage); if (hata ayıklama) alert ("swapStatus \u003d" + swapStatus ile swapImage () 'den çıkar);

Alert () 'ün içeriğini ve göründükleri sırayı inceleyerek, programınızın işlevselliğini kolayca test edebilirsiniz.

JavaScript hata ayıklayıcı nasıl kullanılır?

Hata ayıklayıcı, komut dosyası yürütmenin tüm yönlerinin programcının kontrolü altında olduğu bir uygulamadır. Hata ayıklayıcılar, değerleri kontrol etmenize ve ayarlamanıza ve yürütme akışını kontrol etmenize olanak tanıyan bir arabirim aracılığıyla bir komut dosyasının durumu üzerinde ayrıntılı kontrol sağlar.

Komut dosyası hata ayıklayıcıya yüklendikten sonra, her seferinde bir satır çalıştırılabilir veya belirli kesme noktalarında durması talimatı verilebilir. Yürütme durdurulduğunda, programcı bir şeylerin yanlış olup olmadığını belirlemek için komut dosyasının durumunu ve değişkenlerini kontrol edebilir. Değerlerini değiştirmek için değişkenleri de görüntüleyebilirsiniz.

• Çok fazla yorum kullanın. Yorumlar, senaryoyu neden yaptığınız gibi yazdığınızı ve kodun özellikle zor bölümlerini açıklamanıza olanak tanır.
• Kodunuzu okunabilir tutmak için her zaman girinti kullanın. Girintileme ayrıca başlangıç \u200b\u200bve bitiş etiketlerini, süslü parantezleri ve diğer HTML ve komut dosyası öğelerini eşleştirmenizi kolaylaştırır.
• Modüler kod yazın. İfadelerinizi mümkün olduğunda işlevler halinde gruplayın. İşlevler, ilgili ifadeleri gruplamanıza ve kodunuzun bölümlerini minimum çabayla test etmenize ve yeniden kullanmanıza olanak tanır.
• Değişkenlerinizi ve işlevlerinizi nasıl adlandıracağınız konusunda tutarlı olun. Anlamlı olacak ve bir değişkenin içeriğini veya bir işlevin amacını tanımlayacak kadar uzun isimler kullanmaya çalışın.
• Değişkenleri ve işlevleri adlandırırken tutarlı bir sözdizimi kullanın. Başka bir deyişle, onları küçük veya büyük harf olarak tutun; Camel-Back notasyonunu tercih ediyorsanız, tutarlı bir şekilde kullanın.
• Uzun komut dosyalarını modüler bir şekilde doğrulayın. Başka bir deyişle, komut dosyasının herhangi bir bölümünü test etmeden önce tüm komut dosyasını yazmaya çalışmayın. Parçayı yazın ve kodun bir sonraki bölümünü eklemeden önce çalıştırın.
• Açıklayıcı değişken ve işlev adları kullanın ve tek karakterli isimler kullanmaktan kaçının.
• Alıntılara dikkat edin. Tırnakların dizelerin etrafındaki çiftler halinde kullanıldığını ve her iki tırnağın da aynı stilde (bir veya iki) olması gerektiğini unutmayın.
• Eşit işaretlerinize dikkat edin. Karşılaştırma amacıyla bir \u003d kullanmamalısınız.
• Değişkenleri var anahtar sözcüğünü kullanarak açıkça bildiriyorum.

Firebug, size yürütmeyi istediğiniz zaman duraklatma ve o anda her değişkeni görüntüleme yeteneği sağlayan güçlü bir avaScript hata ayıklayıcı içerir. Kodunuz yavaşlıyorsa, performansı ölçmek ve darboğazları hızla bulmak için bir javascript profil oluşturucusu kullanın.

Komut dosyalarını kolaylıkla bulun

Çoğu web uygulaması çok sayıda dosyadan oluşur ve hata ayıklanacak birini bulmak yorucu ve sıkıcı bir görev olabilir. Firebug'ın komut dosyası seçim menüsü, dosyaları tek bir tıklamayla herhangi bir dosyayı bulmanıza yardımcı olan açık ve anlaşılır bir liste halinde sıralar ve düzenler.

Herhangi bir satırda yürütmeyi duraklatın

Firebug, hata ayıklayıcıya belirli bir satıra ulaştığında komut dosyası yürütmesini duraklatmasını söyleyen kesme noktaları ayarlamanıza olanak tanır. Yürütme duraklatıldığında, herhangi bir değişkenin değerini görüntüleyebilir ve nesneleri inceleyebilirsiniz.

Bir kesme noktası ayarlamak için, herhangi bir satır numarasına tıklayın ve orada kırılma noktasının ayarlandığını gösteren kırmızı bir nokta görünecektir. Kesme noktasını kaldırmak için kırmızı noktaya tekrar tıklayın.

Yürütmeyi yalnızca şu durumlarda duraklatın ...

Kesme noktaları, çok sık tetiklenirlerse sorun yaratabilir. Bazen yürütmeyi yalnızca belirli koşullar karşılandığında duraklatmak isteriz. Firebug, "koşullu" kesme noktaları belirlemenize olanak tanır. Kesme noktasının çalışması için doğru olması gereken bir ifadeyi test ederler.

Koşullu bir kesme noktası ayarlamak için herhangi bir satır numarasına sağ tıklamanız yeterlidir. Bir javascript ifadesi girmenizi isteyen bir balon görünecektir. İfadeyi değiştirmek için istediğiniz zaman tekrar sağ tıklayabilir veya kesme noktasından kurtulmak için sol tıklayabilirsiniz.

Adım adım

Hata ayıklayıcı yürütmeyi duraklattığında, komut dosyasına her seferinde bir adım devam edebilirsiniz. Bu, belirli bir çizginin yürütülmesinin değişkenleri ve nesneleri nasıl etkilediğini açıkça görmenizi sağlar.

Ayrıca birden fazla satır için yürütmeye devam edebilirsiniz. Bu satırda yürütmeye devam etmek için bağlam menüsünde "Bu Satıra Çalıştır" satırını seçin.

Hatalar yüzünden kesintiye uğradım

Her zaman hata ayıklayıcıyı seçmezsiniz ... Bazen hata ayıklayıcı sizi seçer .. Firebug size bir hata oluştuğunda hata ayıklayıcıyı otomatik olarak girme yeteneği sağlar, böylece sorunun oluştuğu koşulları inceleyebilirsiniz.

Genişletilmiş yığın

Hata ayıklayıcı yürütmeyi duraklattığında, Firebug size şu anda çalışan ve geri dönmeyi bekleyen bir dizi iç içe geçmiş işlev çağrısı olan çağrı yığınını gösterir.

Çağrı yığını, panelde her biri yığındaki bir işlevin adına sahip kompakt bir düğme şeridi ile temsil edilir. Fonksiyonun duraklatıldığı satıra atlamak için herhangi bir butona tıklayabilir ve fonksiyonun içinden yerel değişken değerlerine bakabilirsiniz.

İfadeleri gözlemlemek

Hata ayıklarken, genellikle karmaşık ifadelerin veya DOM'a gömülü nesnelerin anlamını görmek istersiniz. Firebug, değeri hata ayıklayıcının her adımında güncellenecek olan rastgele bir javascript ifadesi yazdırmanıza olanak tanır.

İfadeleri yazarken, nesne özelliklerini otomatik tamamlamak için Sekme tuşunu kullanabileceğinizi unutmayın.

Değişken ipuçları

Yürütme duraklatıldığında, değerlerle araç ipuçlarını görüntülemek için fareyi geçerli işlevdeki değişkenlerden herhangi birinin üzerine getirebilirsiniz. Bu, gözlerinizi kod üzerinde tutmanın ve okurken yanıtlar almanın harika bir yoludur.

Profil JavaScript performansı

Web uygulamanız neredeyse mükemmel. Tüm hataları yaptınız, şık bir tasarım yaptınız ve kullanıcılar buna bayıldı. Tek bir sorun - bazı özellikler yavaşlıyor ve nedenini bilmiyorsunuz ..

Firebug ile artık kodunuzun neden yavaş olduğunu merak etmenize gerek yok. Firebug profil oluşturucusunu kullanarak sinekleri pirzolalardan saniyeler içinde ayırabilirsiniz.

Profil oluşturucuyu kullanmak için, Konsol sekmesine gidin ve "Profil" düğmesini tıklayın. Ardından uygulamanızı bir süre kullanın veya sayfayı yeniden yükleyin ve "Profil" i tekrar tıklayın. Hangi işlevlerin çağrıldığını ve her birinin ne kadar sürdüğünü gösteren ayrıntılı bir rapor göreceksiniz.

İşlev çağrılarını günlüğe kaydetme

Bazen sorunlu işlev o kadar çok çağrılır ki her seferinde hata ayıklayıcıya giremezsiniz. Sadece ne zaman ve hangi parametrelerle çağrıldığını bilmek istiyorsunuz.

Bir işleve yönelik tüm çağrıları izlemek için, Komut Dosyası sekmesine sağ tıklayın ve "Çağrıları" işlev adı "na kaydet" öğesini seçin. Ardından konsola gidin ve aramaların günlüğe akmasını izleyin ...

Düz 108. satıra gidin

Genellikle betiğinizin tam satırına atlamak istersiniz. Hiçbir şey daha kolay olamazdı, soldaki ekran görüntüsünde gösterildiği gibi hızlı arama kutusuna satır numarasını yazıp başına # koyun.

Yazardan: console.log bir uygulama hakkında söylenecek çok şey vardır, ancak kodunuzda gerçekten hata ayıklayamazsınız. Firefox'taki yeni JS hata ayıklayıcı, daha hızlı ve hatasız kod yazmanıza yardımcı olur. Bu hata ayıklayıcının nasıl çalıştığı hakkında bir makale.

Bu örnekte, JavaScript hata ayıklamasını kolaylaştıran çok basit bir uygulama açacağız. Uygulamanın kendisi temel açık kaynaklı JS çerçevelerinde çalışır. En son Firefox Developer Edition'da açın ve debugger.html'yi Mac'te Option + Cmd + S veya Windows'ta Shift + Ctrl + S klavye kısayoluyla çalıştırın. Hata ayıklayıcı 3 panele bölünmüştür: dosya listesi paneli, kod paneli ve araç çubuğu.

Araç çubuğu, araç çubuğu, izleme ifadeleri, kesme noktaları, çağrı yığını ve alanlara bölünmüştür.

Console.log kullanmayı durdurun

Kodumuzda hata ayıklamak için console.log kullanmak istiyoruz. Değişkenin değerini bulmak için koda bir çağrı ekliyoruz ve bu kadar, değil mi? Bu yaklaşım işe yarayacak, ancak külfetli ve zaman alıcı. Bu örnekte, bir değişkenin değerini bulmak için debugger.html kullanarak uygulamada adım adım ilerleyeceğiz.

Debugger.html ile, satıra bir kesme noktası ekleyerek kodunuzun daha derinine inebilirsiniz. Kesme noktaları, kodu görüntüleyebilmeniz için hata ayıklayıcıyı duraklatır. Bu örnekte, app.js dosyasının 13. satırına bir kesme noktası ekleyeceğiz.

Şimdi görevi listeye ekleyin. Kod, addTodo işlevinde duracak ve koddaki alan değerine bakabiliriz. Değeri vb. Görmek için bir değişkenin üzerine gelin. Bağlantıları, uygulamaları, çocukları, vb. Şu şekilde görüntüleyebilirsiniz:

Aynı bilgiler Alanlar panelinde de bulunabilir.

Komut dosyası duraklatıldığında, araç çubuğunu kullanarak satırları arasında gezinebilirsiniz. Sürdür / Duraklat düğmeleri tam olarak söylediklerini yapar. Adım düğmesi geçerli kod satırını yürütür, Enter - işleve girer, Çıkış - siz çağrısından çıkana kadar geçerli işlevi yürütür.

İzleme ifadelerini de kullanarak bir mono değişkenin değerini izleyin. İzleme İfadeleri kutusuna bir ifade girmeniz yeterlidir; hata ayıklayıcı, kodunuz çalışırken bunu izleyecektir. Yukarıdaki örnekte, başlık ve yapılacaklar ifadeleri ekleyebilirsiniz ve hata ayıklayıcı, mevcut olduğunda değerleri böler. Özellikle şu durumlarda kullanışlıdır:

Kodda ilerlersiniz ve değer değişimini izlersiniz;

Aynı kodda birçok kez hata ayıklama yapıyorsunuz ve genel değerleri görmek istiyorsunuz;

Bu lanet düğmenin neden çalışmadığını anlamaya çalışıyorsun.

Debugger.html, React / Redux uygulamalarında hata ayıklamak için de kullanılabilir. Nasıl çalışır:

Hata ayıklamak istediğiniz bileşene gidin.

Soldaki bileşen şemasına bakın (sınıftaki fonksiyonlar).

Uygun işlevlere kesme noktaları ekleyin.

Bileşenin özelliklerini ve durumlarını duraklatın ve izleyin.

Çağrı yığını basitleştirilmiştir, böylece uygulama kodunun çerçeveyle karıştırıldığını görürsünüz.

debugger.html, hatalara neden olabilecek karmaşık veya küçültülmüş kodu görüntülemenize olanak tanır. Özellikle React / Redux gibi genel çerçevelerle çalışırken kullanışlıdır. Debager, duraklattığınız bileşeni bilir ve basitleştirilmiş bir çağrı yığını, bileşen şeması ve özellikleri gösterir. Aşağıda geliştirici Amit Zur, JS Kongress'te Firefox'ta kod hata ayıklayıcıyı nasıl kullandığını açıklıyor:

Yeni debugger.html'ye ayrıntılı bir bakış için Mozilla Developer Playground'a bakın. Geliştiricilerin hata ayıklama aracını etkili bir şekilde nasıl kullanacaklarını öğrenmelerine yardımcı olmak için bir dizi eğitim oluşturduk.

Açık kaynak geliştirici araçları

Debugger.html projesi, Firefox DevTools'un tamamen elden geçirilmesiyle birlikte yaklaşık 2 yıl önce başlatıldı. DevTools'u modern teknolojilere aktarmak, onları dünyanın dört bir yanındaki geliştiricilere açmak istedik. Ve teknoloji açık kaynaklı olduğu için, Mozilla'daki küçük bir grubun asla hayal etmediği bir şeye özgürce dönüşebilir.

JS, herhangi bir gelişmiş web uygulamasının bel kemiğidir, bu nedenle güçlü bir hata ayıklayıcı, araç kutusunun temel bir parçasıydı. Hızlı, kullanımı kolay, uyarlanabilir - herhangi bir yeni JS çerçevesinde hata ayıklayabilen bir şey yaratmak istedik. Topluluğa daha yakın çalışmak istediğimiz için popüler web teknolojilerini kullanmaya karar verdik. Bu yaklaşım hata ayıklayıcının kendisini geliştirecektir - Webpack'i benimsersek ve derleme aracını ve kaynak haritalarını dahili olarak kullanmaya başlasaydık, kaynak eşleştirmeyi ve çalışırken yeniden yüklemeyi iyileştirmek isterdik.

debugger.html, React, Redux ve Babel'de yazılmıştır. React bileşenleri hafiftir, test edilebilir ve tasarımı kolaydır. Hızlı UI prototipleme ve ortak bileşenlerin dokümantasyonu için React Storybook kullanıyoruz. Bu, farklı JS çerçeveleriyle (React gibi) çalışmayı kolaylaştırır. Babel'in ön ucu, Bileşen sınıfını ve işlevlerini sol kenar çubuğunda göstermek gibi şeyler yapmanızı sağlar. Kodu değiştirirseniz hareket etmemeleri için işlevler üzerinde kesme noktaları da ayarlayabiliriz.

Redux eylemleri, UI için saf API'dir. Ancak, bağımsız bir CLI JS Hata Ayıklayıcı oluşturmak için de kullanılabilirler. Redux deposu, mevcut hata ayıklama durumunu sorgulamak için seçicilere sahiptir. Birim testlerimiz Redux eylemlerini çalıştırır ve tarayıcı yanıtlarını taklit eder. Entegrasyon testleri, tarayıcıyı Redux hata ayıklayıcı eylemleriyle güçlendirir. İşlevsel mimarinin kendisi test için tasarlanmıştır.

Her adımda Mozilla geliştirici topluluğuna güvendik. Proje GitHub'da yayınlandı ve ekibimiz dünyanın dört bir yanındaki geliştiricilere ulaştı ve yanıt verdiler. Başlangıçta, otomatik testler topluluk için kritikti. Testler, kolayca gözden kaçabilecek davranışları geriletti ve belgeledi. Bu nedenle ilk adımlardan biri, Redux eylemleri için birim testleri ve Redux mağazası için Akış türleri yazmaktı. Aslında topluluk, Flow ve Jest kapsamının her dosyanın yazıldığından ve test edildiğinden emin olmaya yardımcı olmasını sağladı.

Geliştiriciler olarak, geliştiricilerin dahil olduğu araçların daha güçlü olduğuna inanıyoruz. Çekirdek ekibimiz her zaman küçüktü (2 kişi), ancak ortalama olarak haftada 15 asistan vardı. Topluluk bize farklı bakış açıları verdi, bu da karmaşıklıkları tahmin etmemize ve hayal bile edemediğimiz özellikleri yazmamıza yardımcı oldu. Şimdi çağrı yığınlarını 24 kitaplık için biçimlendiriyoruz. Birçoğunu bilmiyorduk bile. Kaynak ağacında Webpack ve Açısal haritaları da gösteriyoruz.

Tüm Firefox Geliştirme Araçlarını GitHub'a taşımayı planlıyoruz, böylece daha fazla kişi onları kullanabilir ve iyileştirebilir. Yardımınızı memnuniyetle kabul ederiz. GitHub'da projemizin debugger.html sayfasına gidebilirsiniz. Makinenizde hata ayıklayıcıyı çalıştırmak için istediğinizi değiştirebileceğiniz bir dizi talimat yazdık. Tarayıcılar, terminaller, sunucular, telefonlar, robotlar gibi herhangi bir şey için JS kodunda hata ayıklamak için kullanın. Nelerin geliştirilebileceğini görürseniz, GitHub'da bize yazın.

Merhaba! Konunun devamında, tarayıcı kullanarak betiklerde hata ayıklama hakkında konuşalım. Örneğin, dünyadaki en iyi tarayıcı olan Chrome'u ele alalım.

Prensip olarak, bu tür araçlar herhangi bir tarayıcıda mevcuttur ve çoğu tarayıcının Chrome ile aynı motorda çalıştığını düşünüyorsanız, o zaman prensipte özel bir fark olmayacaktır. Firefox, Firebug aracıyla da çok iyi.

Kaynaklar panelinin genel görünümü

Chrome tarayıcınızı başlatın.

F12'ye basın, bu Geliştirici Araçlarını başlatacaktır.

Kaynak sekmesine gidin

Burada 3 bölge var:

1. Kaynak dosyalar alanı. Tüm proje dosyalarını içerir
2. Metin alanı. Bu alan dosyanın metnini içerir
3. Bilgi ve kontrol alanı. Onun hakkında daha sonra konuşacağız

Tipik olarak, hata ayıklama sırasında kaynak alanı gerekli değildir, bu nedenle düğmeyle bunu gizleyebilirsiniz.

Ortak kontrol düğmeleri

En sık kullanılan 3 kontrol düğmesi:

Biçim Bu düğme, kodu biçimlendirmenize olanak tanır. Başka birinin kodunu biçimlendirmek istiyorsanız buna ihtiyacınız olabilir. Konsol Konsolu tıkladığınızda açan çok önemli bir düğme. Konsola çeşitli JavaScript komutları ve ifadeleri girilebilir. Pencere Büyük bir kod bölümü olması durumunda, kodu ayrı bir pencerede açmanıza izin verir.

Kesme noktaları

Örnek olarak pow.js dosyasına bir göz atalım. Bu dosyanın herhangi bir satırına tıklarsanız, o satıra bir kesme noktası ayarlanacaktır.

Şöyle görünüyor:

Başka bir kırılma noktası, kesme noktası olarak adlandırılır, bu, bizim dilimizde özümsenen daha fazla jargondur ve kelimenin tam anlamıyla bir kesme noktası anlamına gelir.

Kesme noktası oluşturduğunuz kodda değişkenlerin değerlerini her adımda izleyebilir, genel olarak her şekilde takip edebilirsiniz.

Kesme noktası bilgileri Kesme Noktaları sekmesinde görüntülenir.

Kesme Noktaları sekmesi, kod çok büyük olduğunda çok kullanışlıdır, şunları yapmanızı sağlar:

• Metne basit bir tıklama ile kesme noktasının ayarlandığı kodun yerine hızlıca gidin.
• Onay kutusunu tıklayarak kesme noktasını geçici olarak devre dışı bırakın.
• Metni sağ tıklayıp Kaldır'ı seçerek bir kesme noktasını hızla kaldırın.

Bazı ek özellikler

• Bir kesme noktası, hata ayıklayıcı komutu kullanılarak doğrudan bir komut dosyasından başlatılabilir: function pow (x, n) (... debugger; //<-- отладчик остановится тут... }

• Pow.js satır numarasına sağ tıklamak, sözde bir koşullu kesme noktası oluşturmanıza olanak tanır, örn. kesme noktasının tetikleneceği koşulu ayarlayın.

Dur ve etrafına bak

İşlevimiz sayfa yüklendiği anda yürütüldüğü için JavaScript hata ayıklayıcıyı etkinleştirmenin en kolay yolu onu yeniden yüklemektir. Bunu yapmak için F5'e basın. Ve aynı zamanda, betiğin yürütülmesi 6. satırda durdurulacaktır.

Bilgi sekmelerine dikkat edin:

• İfadeleri izle - burada, kodda izlediğiniz değişkenlerin geçerli değerini görebilirsiniz.
• Çağrı yığını - çağrı yığınını gösterir - bunlar bu kod satırına yönlendiren tüm çağrılardır.
• Kapsam Değişkenleri - değişkenleri gösterir. Dahası, hem global hem de yerel değişkenleri gösterir.

Yürütme kontrolü

Şimdi betiği "çalıştıralım" ve çalışmasını izleyelim. Yukarıdaki panele dikkat edin, çalışmasını dikkate alacağımız 6 düğme var.

- yürütmeye devam edin veya F8 tuşuna basabilirsiniz. Bu düğme komut dosyası yürütmeye devam eder. Bu şekilde, komut dosyamız bir tarayıcıda çalışıyormuş gibi adım adım ilerleyebiliriz. - bir işleve veya F10 tuşuna girmeden bir adım atın.

İşlevin içine girmeden komut dosyasının bir adımını yürütün.

- işlevin içine bir adım atın, F11 tuşu. Komut dosyasının bir adımını yürütür ve aynı zamanda işlevin içine girer. - mevcut işlevden çıkana kadar yürütün, Shift + F11 tuşu.

fonksiyondaki kodu tamamen çalıştırır.

- tüm kesme noktalarını devre dışı bırakın / etkinleştirin. Bu düğme yalnızca tüm kesme noktalarını devre dışı bırakır ve yeniden etkinleştirir. - hata durumunda otomatik durdurmayı etkinleştirme / devre dışı bırakma. Bu düğme hata ayıklama için çok kullanışlıdır ve hata durumunda otomatik durdurmayı etkinleştirmenize veya devre dışı bırakmanıza olanak tanır.

Hata ayıklama sürecinin kendisi programda adım adım ilerlemek ve değişkenlerin değerlerini gözlemlemekten oluşur.

Tarayıcı konsolu

Komut dosyası kodunda hata ayıklarken, Konsol sekmesine gitmek ve herhangi bir hata olup olmadığını görmek yararlıdır, ayrıca console.log () kullanarak konsola bilgi verebilirsiniz.

Örneğin:

// sonuç konsolda (var i \u003d 0; i< 6; i++) { console.log("значение", i); }

Konsol herhangi bir tarayıcıda mevcuttur

Konsol hataları

JavaScript komut dosyası hataları konsolda görüntülenebilir.

Konsolda şunları görebilirsiniz:

Kırmızı çizgi, gerçek hata mesajıdır.

Toplam

Hata ayıklayıcı şunları yapmanızı sağlar:

• İşaretli noktada (kesme noktası) veya hata ayıklayıcı komutuyla durun.
• Kodu çalıştır - programda bir defada bir satırda veya belirli bir noktaya kadar hata ayıklamak için.
• Değişkenleri izleyin, konsolda komutları çalıştırın, vb.

Geliştirici araçlarında, Elements'in sayfanın HTML kodunu görüntülemenize izin vermesi, Zaman Çizelgesi'nin tarayıcının kaç dosya indirdiğini ve ne kadar sürdüğünü göstermesi gibi başka sekmeler de vardır. Ancak şu ana kadar bu sekmeler bizim için çok ilginç değil.