JavaScript kodumda nasıl hata ayıklayabilirim? [kapalı]
Yanıtlar:
Firebug , bu amaç için en popüler araçlardan biridir.
Tüm modern tarayıcılar, bir tür yerleşik JavaScript hata ayıklama uygulamasıyla birlikte gelir. Bunların ayrıntıları, ilgili teknolojiler web sayfalarında ele alınacaktır. JavaScript'te hata ayıklama konusundaki kişisel tercihim Firefox'ta Firebug . Firebug'ın diğerlerinden daha iyi olduğunu söylemiyorum; kişisel tercihinize bağlıdır ve muhtemelen sitenizi tüm tarayıcılarda test etmelisiniz (kişisel ilk tercihim her zaman Firebug'dur).
Firebug'ı örnek olarak kullanarak, aşağıdaki üst düzey çözümlerden bazılarını ele alacağım :
Firefox
Firefox kendi dahili JavaScript hata ayıklama aracıyla birlikte gelir, ancak Firebug eklentisini yüklemenizi tavsiye ederim . Bu, kullanışlı olan temel sürüme dayalı birkaç ek özellik sağlar. Burada sadece Firebug hakkında konuşacağım.
Firebug kurulduktan sonra aşağıdaki gibi erişebilirsiniz:
Öncelikle, herhangi bir öğeye sağ tıklarsanız, Elemanı Firebug ile İnceleyebilirsiniz :
Buna tıklamak, tarayıcının altındaki Firebug bölmesini açacaktır:
Firebug birkaç özellik sağlar, ancak ilgilendiğimiz şey komut dosyası sekmesidir. Komut dosyası sekmesine tıklamak şu pencereyi açar:
Açıkçası, hata ayıklamak için yeniden yüklemeye tıklamanız gerekir :
Artık, kesme noktasını eklemek istediğiniz JavaScript kod parçasının solundaki satırı tıklayarak kesme noktaları ekleyebilirsiniz:
Kesme noktanız vurulduğunda, aşağıdaki gibi görünecektir:
Ayrıca izleme değişkenleri ekleyebilir ve genellikle modern bir hata ayıklama aracında beklediğiniz her şeyi yapabilirsiniz.
Firebug'da sunulan çeşitli seçenekler hakkında daha fazla bilgi için Firebug SSS bölümüne bakın .
Krom
Chrome ayrıca, çok benzer şekilde çalışan, sağ tıklama, öğe inceleme vb . Gibi kendi yerleşik JavaScript hata ayıklama seçeneğine de sahiptir . Chrome Geliştirici Araçlarına bir göz atın . Genelde Chrome'daki yığın izlerini Firebug'dan daha iyi buluyorum .
Internet Explorer
NET'te geliştirme yapıyorsanız ve web geliştirme ortamını kullanarak Visual Studio kullanıyorsanız, JavaScript kodunda doğrudan kesme noktaları vb. Yerleştirerek hata ayıklayabilirsiniz. JavaScript kodunuz, C # veya VB.NET kodunuzda hata ayıklıyormuşsunuz gibi tamamen aynı görünür .
Buna sahip değilseniz, Internet Explorer ayrıca yukarıda gösterilen tüm araçları da sağlar. Can sıkıcı bir şekilde, Chrome veya Firefox'un sağ tıklama inceleme öğesi özelliklerine sahip olmak yerine , geliştirici araçlarına F12'ye basarak erişirsiniz . Bu soru çoğu noktayı kapsar.
- Internet Explorer 8 (Geliştirici Araçları - F12). Diğer her şey Internet Explorer arazisinde ikinci sınıftır
- Firefox ve Firebug . Görüntülemek F12için vurun .
- Safari (Menü Çubuğunu Göster, Tercihler -> Gelişmiş -> Geliştirme menü çubuğunu göster )
- Google Chrome JavaScript Konsolu ( F12veya ( Ctrl+ Shift+ J)). Çoğunlukla Safari ile aynı tarayıcı, ancak Safari daha iyi IMHO'dur.
- Opera ( Araçlar -> Gelişmiş -> Geliştirici Araçları )
JavaScript kodunda hata ayıklamak için JavaScript'te bir hata ayıklayıcı anahtar sözcüğü vardır. Hata ayıklayıcı koyun ; JavaScript kodunuzdaki snippet. Bu noktada otomatik olarak JavaScript kodunda hata ayıklamaya başlayacaktır.
Örneğin:
Bunun test.js dosyanız olduğunu varsayalım
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- Tarayıcı, hata ayıklayıcı etkinleştirilmiş olarak geliştirici seçeneğinde web sayfasını çalıştırdığında, otomatik olarak hata ayıklayıcıdan hata ayıklamaya başlar ; nokta.
- Tarayıcıda geliştirici penceresi açılmalıdır.
Eski iyi printfyaklaşımı kullanıyorum (her zaman işe yarayacak eski bir teknik).
Sihire bak %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oJS nesnesinin tıklanabilir ve derinlemesine göz atılabilir, hoş yazdırılmış içeriğini döküm . %ssadece bir kayıt için gösterildi.
Ve bu:
console.log("%s", new Error().stack);new Error()( dosya yolu ve satır numarası dahil !!) çağrı noktasına Java benzeri yığın izini verir .
Her ikisi de %ove new Error().stackChrome ve Firefox'ta mevcuttur.
Bu kadar güçlü araçlarla, JS'nizde neyin yanlış gittiğini varsayabilir, hata ayıklama çıktısını koyabilirsiniz if(veri miktarını azaltmak için ifadeyi sarmayı unutmayın ) ve varsayımınızı doğrulayın. Sorunu düzeltin veya yeni bir varsayım yapın veya bit sorununa daha fazla hata ayıklama çıktısı koyun.
Ayrıca yığın izlemeleri için şunları kullanın:
console.trace();Konsolun dediği gibi
Mutlu hacklemeler!
Firebug ve IE Debugger ile başlayın.
Yine de JavaScript'teki hata ayıklayıcılara dikkat edin. Arada bir, çevreyi, hata ayıklamaya çalıştığınız bazı hatalara neden olacak kadar etkileyeceklerdir.
Örnekler:
Internet Explorer için, genellikle kademeli bir yavaşlamadır ve bir tür bellek sızıntısı türü anlaşmadır. Yarım saat kadar sonra yeniden başlatmam gerekiyor. Oldukça düzenli görünüyor.
Firebug için muhtemelen bir yıldan fazla oldu, bu yüzden eski bir sürüm olabilir. Sonuç olarak, ayrıntıları hatırlamıyorum, ancak temelde kod düzgün çalışmıyordu ve bir süre hata ayıklamaya çalıştıktan sonra Firebug'ı devre dışı bıraktım ve kod iyi çalıştı.
Her ne kadar alert(msg);bu "sadece neler olup bittiğini öğrenmek istiyorum" senaryolarında çalışmasına rağmen ... her geliştirici, içinden çıkamayacağınız (çok büyük veya sonsuz) bir döngüye girdiğiniz bu durumla karşılaştı.
Geliştirme sırasında, çok yüzünüze yönelik bir hata ayıklama seçeneği istiyorsanız, ayrılmanıza olanak tanıyan bir hata ayıklama seçeneği kullanmanızı öneririm. (PS Opera, Safari? Ve Chrome? Bunların tümü yerel iletişim kutularında mevcuttur)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}Yukarıdakilerle kendinizi büyük bir açılır pencere hata ayıklama döngüsüne sokabilirsiniz, burada Enter/ düğmesine basmak Okher mesajda atlamanıza izin verir, ancak Escape/ düğmesine basmak Cancelgüzelce ayrılmanıza izin verir.
İlk adımım her zaman HTML'yi doğrulamak ve JSLint ile sözdizimini kontrol etmektir . Temiz işaretlemeniz ve geçerli bir JavaScript kodunuz varsa, Firebug veya başka bir hata ayıklayıcının zamanı gelmiştir.
Visual Studio 2008 bazı çok iyi JavaScript hata ayıklama araçlarına sahiptir. İstemci tarafı JavaScript kodunuza bir kesme noktası bırakabilir ve sunucu tarafı kodunda yaptığınız gibi aynı araçları kullanarak adım adım ilerleyebilirsiniz. Bir işleme bağlanmaya veya onu etkinleştirmek için zor bir şey yapmaya gerek yoktur.
Birkaç araç kullanıyorum: Fiddler , Firebug ve Visual Studio. Internet Explorer 8'de iyi bir yerleşik hata ayıklayıcı olduğunu duydum.
Internet Explorer 8 çıkana kadar Firebug kullanıyordum . Internet Explorer'ın büyük bir hayranı değilim, ancak gerçekten güzel bir hata ayıklayıcı içeren yerleşik geliştirici araçlarıyla biraz zaman geçirdikten sonra, başka herhangi bir şey kullanmak anlamsız görünüyor. Şapkamı Microsoft'a bahşiş vermeliyim, bu araçta harika bir iş çıkardılar.
YUI Logger'a da göz atabilirsiniz . Kullanmak için tek yapmanız gereken HTML'nize birkaç etiket eklemektir. Aşağı yukarı bir zorunluluk olan Firebug'a yardımcı bir eklentidir.
Visual Studio'nun JavaScript hata ayıklayıcısını kullanmanın yanı sıra, bir sayfaya dahil ettiğim kendi basit panelimi yazdım. Tıpkı Visual Studio'nun Immediate penceresi gibidir . Değişkenlerimin değerlerini değiştirebilir, işlevlerimi çağırabilir ve değişkenlerin değerlerini görebilirim. Metin alanına yazılan kodu değerlendirir.
Firebug ve tarayıcıda yerel geliştirici uzantılarına ek olarak, JetBrains WebStorm IDE, yerleşik Firefox ve Chrome (Uzantı gereklidir) için uzaktan hata ayıklama desteği ile birlikte gelir .
Ayrıca şunları destekler:
Bunu ücretsiz olarak test etmek için seçenekler, 30 deneme veya Erken Erişim Sürümü kullanmaktır .
Visual Studio kullanıyorsanız , debugger;hata ayıklamak istediğiniz kodun üzerine koyun . Yürütme sırasında kontrol o yerde durur ve buradan adım adım hata ayıklayabilirsiniz.
Çoğu yanıtta olduğu gibi, gerçekten bağlıdır: Hata ayıklamanızla ne elde etmeye çalışıyorsunuz? Temel geliştirme, performans sorunlarını çözme? Temel gelişim için, önceki tüm cevaplar fazlasıyla yeterli.
Özellikle performans testi için Firebug'ı öneririm. Zaman açısından hangi yöntemlerin en pahalı olduğunu profilleyebilmek, üzerinde çalıştığım bir dizi proje için paha biçilemezdi. İstemci tarafındaki kitaplıklar gittikçe daha sağlam hale geldikçe ve genel olarak istemci tarafına daha fazla sorumluluk verildiği için, bu tür hata ayıklama ve profil oluşturma yalnızca daha kullanışlı hale gelecektir.
Firebug Konsol API'si: http://getfirebug.com/console.html
F12Web geliştiricileri düğmesine basarak , tarayıcıdan çıkmadan JavaScript kodunda hızlı bir şekilde hata ayıklayabilir. Her Windows kurulumunda yerleşik olarak bulunur.
Gelen Internet Explorer 11 , F12 araçları böyle kesme noktaları, saatin ve yerel değişken görüntüleme ve mesajlar ve acil kod yürütülmesine yönelik bir konsolun gibi araçlar ayıklama sağlar.