Hata ayıklama amacıyla Chrome Devtools panelini nasıl kullanacağınızı size anlatacağız.

Hataları bulmak ve düzeltmek, yeni başlayanlar için zor olabilir. Kodunuzda hata ayıklamak için console.log () kullanmanın en iyi çözüm olduğunu düşünüyorsanız, yanılıyorsunuz.

Bu makalede, hata ayıklama için bazı mükemmel Google Chrome Devtools'larını paylaşacağız. Bu işlem, bu sorunu çözmenin çok daha verimli bir yoludur.

İşte hata ayıklamayı kullanmanın basit bir örneği, ancak herhangi bir göreve uygulanabilir.

1. Adım: Hatayı yeniden oluşturun

Hataların çoğaltılması her zaman hata ayıklamanın ilk adımıdır. Bu, hataya yol açan eylemlerin sırasını bulmak anlamına gelir. Süreç uzun olabilir, bu yüzden onu optimize etmeye çalışın.

Bu eğitimdeki adımları kendiniz takip etmek için aşağıdakileri yapın:

• İşte bu eğitimde üzerinde çalışacağımız web sayfası. Yeni bir sekmede açmayı unutmayın;
• 1 Numara alanına 5 sayısını girin;
• 2 Numara alanına 1 sayısını girin;
• "Ekle" düğmesine tıklayın;
• Bakın, size 5 + 1 \u003d 51 olduğunu söylüyorlar;

Maalesef bu doğru değil. Sonuç 6 olmalıdır, bu bir hatadır ve düzeltilmesi gerekir.

2. Adım: Bir kesme noktasıyla yürütmeyi duraklatın

DevTools, işlemdeki kodun yürütülmesini durdurmanıza ve o andaki tüm değişkenlerin değerlerini görmenize olanak tanır. Kodu duraklatmak için kullanılan araca kesme noktası denir. Deneyin:

• Test sayfamıza dönün ve Cmd + Option + I (Mac) veya Ctrl + Shift + I (Windows, Linux) tuşlarına basarak DevTools'u etkinleştirin;
• "Kaynaklar" sekmesine gidin;
• "Etkinlik İşleyici" yi genişletin. DevTools, animasyon ve pano gibi olay kategorilerinin bir listesini ortaya çıkaracaktır;
• "Tıklayın" kutusunu işaretleyin;

• Sayfaya geri dönün, "1 Numara" ve "2 Numara" yı tekrar ekleyin. DevTools, demoyu duraklatacak ve Kaynaklar panelinde kod satırını vurgulayacaktır. DevTools bu kod satırını vurgulayacaktır:
  

  function onClick () (

  function onClick () (

  
  Neden olur?

  "Tıklama" yı seçtiğinizde, kendisi için işleyicisi olan her öğedeki tıklama olaylarına bağlı kesme noktaları ayarlarsınız.

  3. Adım: Adım adım hata ayıklama gerçekleştirin

  Hataların yaygın nedenlerinden biri, komut dosyasının düşündüğünüz sırada çalıştırılmamasıdır. Kodun yürütülmesini satır satır gözlemleyerek bu sorunu önleyebilirsiniz. Denemek:

  • "Kaynaklar" panelinde, "Sonraki işlev çağrısına adım at düğmesi" ni tıklayın

  Bu düğme, onClick işlevinin yürütülmesini tutarlı bir şekilde izlemenize olanak tanır. DevTools aşağıdaki kod satırını vurguladığında işlemi durdurun:

  eğer (inputsAreEmpty ()) (

  eğer (inputsAreEmpty ()) (

  • Şimdi "Sonraki işlev çağrısı düğmesine adım at" düğmesini tıklayın;

  DevTools artık inputAreEmpty () 'yi içeriklerinde hata ayıklamadan çalıştırmayı biliyor. DevTools'un birkaç satır kodu atladığını unutmayın. Bunun nedeni, inputAreEmpty () işlevinin yanlış döndürmesidir, dolayısıyla if bloğu yürütülmemiştir.

  Bu, adım adım kod hata ayıklamanın özüdür. Get-begin.js'deki koda bakarsanız, hatanın muhtemelen updateLabel () işlevinde bir yerde olduğunu görebilirsiniz. Her kod satırında ilerlemek yerine, işlemi hataya daha yakın bir şekilde durdurmak için farklı türde bir kesme noktası kullanabilirsiniz.

  4. Adım: Farklı bir kesme noktası seçin

  Kod satırı türü en popüler kesme noktasıdır. Hatanın nerede olabileceğini biliyorsanız, şu türü kullanın:

  • UpdateLabel () içindeki son kod satırına bir göz atın, şuna benzer:
    

    label.textContent \u003d addend1 + "+" + addend2 + "\u003d" + toplam;

    etiket. textContent \u003d addend1 + "+" + addend2 + "\u003d" + toplam;

  • Bu kodun solunda, satır numarasını göreceksiniz: 32. 32'ye basın. Şimdi DevTools, bu kod satırı çalıştırılana kadar her zaman duracaktır;
  • Komut dosyası yürütmeye devam et düğmesini tıklayın. Komut dosyası, bir kesme noktası içeren sonraki kod satırına kadar çalışmaya devam edecektir;
  • UpdateLabel () 'de zaten çalıştırılmış olan kod satırlarına bir göz atın. DevTools, addend1, addend2 ve sum değerlerini verir.

  Miktarın değeri şüpheli görünüyor. Bir sayı olarak değil, bir dizge olarak değerlendirilmiş gibi görünüyor. Bu, hataların başka bir yaygın nedenidir.

  Adım 5: Değişken Değerleri Kontrol Edin

  Hataların yaygın bir nedeni, bir değişken veya işlevin yanlış değeri oluşturmasıdır. Pek çok geliştirici, değerlerin nasıl değiştiğini görmek için console.log () kullanır, ancak console.log (), en az iki nedenden dolayı buna uygun değildir: ilk olarak, çok sayıda console.log ( ), ikinci olarak, hangi değişkenin hatayla ilişkili olduğunu bilmiyor olabilirsiniz, bu nedenle aynı anda birkaç değişkeni görüntülemeniz gerekecektir.

  DevTools'taki console.log alternatiflerinden biri de Watch Expressions'dır. Değişken değerlerdeki değişiklikleri izlemek için İfadeleri İzle'yi kullanın. Adından da anlaşılacağı gibi Watch İfadeleri yalnızca değişkenlerle sınırlı değildir. Herhangi bir geçerli JavaScript ifadesini Watch Expression'da saklayabilirsiniz:

  • Kaynaklar panelinde İzle sekmesini seçin;
  • Sonra "İfade Ekle" ye tıklayın;
  • Typeof sum girin;
  • Enter'a basın. DevTools, typeof sum: "string" gösterecektir. Bu değer, İfadeyi İzle'nin sonucudur.

  

  Beklendiği gibi, toplam bir sayı olarak değil, bir dize olarak değerlendirilir. Bu yukarıda bahsettiğimiz hatanın aynısıdır.

  Console.log () için başka bir DevTools alternatifi konsoldur. Geliştiriciler genellikle hata ayıklarken değişken değerlerinin üzerine yazmak için kullanırlar. Sizin durumunuzda konsol, hatayı düzeltmenin yollarını kontrol etmek için kullanışlı olabilir. Misal:

  
  

  6.Adım: Düzeltmeler yapın

  Hatanın nerede olduğunu belirlediniz. Sadece kodu düzenleyerek ve demoyu yeniden başlatarak düzeltmek için kalır. JavaScript kodunu doğrudan DevTools kullanıcı arayüzünde düzenleyebilirsiniz:

  • Kod düzenleyicide, Kaynaklar panelinde, var sum \u003d addend1 + addend2'yi var sum \u003d parseInt (addend1) + parseInt (addend2) ile değiştirin; Bu 31. satır.
  • Değişiklikleri uygulamak için Cmd + S (Mac) veya Ctrl + S (Windows, Linux) tuşlarına basın. Kodun arka planı, komut dosyasının DevTools'ta değiştirildiğini belirtmek için kırmızıya dönecektir;
  • "Kesme noktalarını devre dışı bırak" ı tıklayın

  Renk maviye dönecektir. Bu modda DevTools, ayarladığınız kesme noktalarını yok sayar.

  • "Komut dosyası yürütmeye devam et" i tıklayın.

  Alanlara sayıları girin, test edin. Artık her şey olması gerektiği gibi çalışmalı!

  Hataların temel nedenlerini bulmaya gelince, aracınızın kilit bir rol oynayabileceğini bilmek. JavaScript'in hata ayıklamanın zor olmasıyla ünlü olmasına rağmen, birkaç numara biliyorsanız, hatanın nedenini bulmak daha az zaman alacaktır.

  14 hata ayıklama ipucunun bir listesini derledikbilmiyor olabilirsiniz, ancak bu, JavaScript kodunda hata ayıklamanıza yardımcı olabilir.

  Bu ipuçlarının çoğu Chrome ve Firefox içindir, ancak çoğu diğer tarayıcılar için geliştirme araçlarında çalışır.

  1. 'hata ayıklayıcı;'

  Sonra console.log, ‘hata ayıklayıcı;"En sevdiğim hızlı ve kirli hata ayıklama aracı. Kodunuzu kodunuza ekler eklemeniz bu noktada Chrome otomatik olarak kod yürütmeyi durdurur. Hatta onu sadece ihtiyacınız olduğunda ateşleyecek şekilde sarabilirsiniz.

  If (thisThing) (hata ayıklayıcı;)

  2. Nesneleri tablo şeklinde görüntüleme

  Bazen görmek istediğiniz karmaşık nesneleriniz olur. kullanabilirsiniz console.logbunları görüntülemek ve ardından büyük bir listede gezinmek veya console.table... Neyle uğraştığınızı anlamanızı çok daha kolay hale getirir.

  Var hayvanlar \u003d [(hayvan: "At", adı: "Henry", yaş: 43), (hayvan: "Köpek", adı: "Fred", yaş: 13), (hayvan: "Kedi", adı: " Frodo ", yaş: 18)]; console.table (hayvanlar);

  3. Farklı çözünürlüklere bakmaya çalışın

  Masanızda herhangi bir mobil cihazınız olsaydı harika olurdu, ancak gerçek dünyada bu mümkün değil. Görüntü alanını nasıl yeniden boyutlandırırım? Chrome, ihtiyacınız olan her şeyi sağlar. Geliştirici araçlarına gidin ve ardından Cihaz Modunu Değiştir düğmesini tıklayın. Medya ifadelerinizin canlandığını görün!

  

  4. DOM öğelerini hızlı bir şekilde bulma

  Araç kutusunda DOM öğesini seçin ve ardından konsolda ona bakın. Chrome geliştirici araçları, son beş öğeyi hatırlar: son seçilen 0 $, son seçilen ancak 1 $ seçilen vb.

  'İtem-4', 'item-3', 'item-2', 'item-1', 'item-0' siparişinde aşağıdaki öğeleri seçtiyseniz, DOM öğelerine şurada gösterildiği gibi erişebilirsiniz: konsol:

  

  5. console.time () ve console.timeEnd () kullanarak kod yürütme süresini ölçme

  Özellikle yavaş döngülerde hata ayıklarken, bir kod parçasının çalıştırılmasının ne kadar sürdüğünü bilmek çok yararlı olabilir. Birden çok adlandırılmış zamanlayıcı kurabilirsiniz. Bir örnek görelim:

  Console.time ("Timer1"); var öğeler \u003d; için (var i \u003d 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

  Bu kod aşağıdaki çıktıyı üretecektir:

  

  6. Bir işlev için yığın izleme alma

  Muhtemelen JavaScript çerçevelerinde çok fazla kod olduğunu biliyorsunuzdur.

  Bu kod arabirimi işler, olayları yükseltir, dolayısıyla sonuçta işlevin çağrılmasına neyin sebep olduğunu bilmek istersiniz.

  JavaScript çok yapılandırılmış bir dil olmadığından, bazen ne olduğu ve ne zaman olduğu hakkında bilgi almak yararlı olabilir. Şu anda sahneye giriyor console.trace.

  Bir işlev için tüm çağrı yığınını görmek istediğinizi hayal edin funcZbir kopyada araba 33. satırda.

  Var araba; var func1 \u003d işlev () (func2 ();) var func2 \u003d işlev () (func4 ();) var func3 \u003d işlev () () var func4 \u003d işlev () (araba \u003d yeni Araba (); araba.funcX ( );) var Car \u003d function () (this.brand \u003d 'volvo'; this.color \u003d 'red'; this.funcX \u003d function () (this.funcY ();) this.funcY \u003d function () (this.brand .funcZ ();) this.funcZ \u003d function () (console.trace ('trace car'))) func1 (); var araba; var func1 \u003d işlev () (func2 ();) var func2 \u003d işlev () (func4 ();) var func3 \u003d işlev () () var func4 \u003d işlev () (araba \u003d yeni Araba (); araba.funcX ( );) var Car \u003d function () (this.brand \u003d 'volvo'; this.color \u003d 'red'; this.funcX \u003d function () (this.funcY ();) this.funcY \u003d function () (this.brand .funcZ ();) this.funcZ \u003d function () (console.trace ('trace car');)) func1 ();

  

  Şimdi bunu görüyoruz func1 nedenleri func2hangi aramalar func4. Func4 bir örnek oluşturur Arabave sonra işlevi çağırır car.funcX, vb.

  Program yürütme betiğini iyi bildiğinizi düşünseniz bile, çok kullanışlı olabilir. Diyelim ki kodunuzu geliştirmek istiyorsunuz. Yığın izleme ve her biri görüntülenebilir olan ilgili tüm işlevlerin bir listesini alın.

  7. Küçültülmüş kodu biçimlendirme

  Bazen doğrudan üretimde bir sorunla karşılaşabilirsiniz, ancak kaynak haritalarınız sunucuda değildir. Yanlış bir şey yok... Chrome, JavaScript dosyalarınızı daha okunaklı hale getirmek için biçimlendirebilir. Elbette kod, kaynak kod kadar bilgilendirici olmayacak ama en azından içinde neler olduğunu anlayabilirsiniz. Düğmeye bas {} « Oldukça baskı"Denetçideki kod görüntüleyicinin altında bulunur.

  

  8. Hızlı hata ayıklama işlevi

  Bir işleve bir kesme noktası eklemek istediğinizi varsayalım.

  Bunu yapmanın en yaygın iki yolu vardır:

  1. Denetçide istediğiniz çizgiyi bulun ve bir kesme noktası ekleyin
  2. Komut dosyanıza hata ayıklayıcı ekleyin

  Bu çözümlerin her ikisi de, hata ayıklamak istediğiniz doğru dosyayı ve doğru satırı bulmanızı gerektirir.

  Bu amaçla bir konsol kullanmak muhtemelen daha az yaygındır. Kullanım hata ayıklama (funcName) konsolda ve komut dosyası istenen işleve ulaştığında duraklayacaktır.

  Bu çok hızlı bir yoldur, ancak özel ve anonim işlevler için çalışmaz. Ancak durumunuz farklıysa, bu muhtemelen bir işlevde hata ayıklamanın en hızlı yoludur. (Yazarın notu: bir işlev var console.debugbir başkası için gerekli.)

  Var func1 \u003d işlev () (func2 ();); var Car \u003d function () (this.funcX \u003d function () (this.funcY ();) this.funcY \u003d function () (this.funcZ ();)) var car \u003d new Car ();

  
  

  9. Hata ayıklama gerektirmeyen komut dosyaları

  10. Daha Gelişmiş Hata Ayıklama Teknikleriyle Önemli Şeyler Bulun

  Daha karmaşık hata ayıklama senaryoları için çok sayıda satır yazdırmanız gerekebilir. Çıktıyı yapılandırmanın bir yolu, çeşitli konsol işlevlerini kullanmaktır. Örneğin console.log, console.debug, console.warn, console.info, console.error, vb. Daha sonra bunları denetçide filtreleyebilirsiniz. Ancak bazen hata ayıklarken tam olarak ihtiyacınız olan şey bu değildir. Artık CSS kullanarak yaratıcı olabilir ve kendi konsol çıktı formatlarınızı oluşturabilirsiniz.

  Console.todo \u003d function (msg) (console.log ('% c% s% s% s', 'renk: sarı; arka plan - renk: siyah;', '-', msg, '-');) konsol . önemli \u003d function (msg) (console.log ('% c% s% s% s', 'renk: kahverengi; yazı tipi - ağırlık: kalın; metin - dekorasyon: altı çizili;', '-', msg, '- ');) console.todo ("Bu, düzeltilmesi gereken bir şeydir"); console.important ("Bu önemli bir mesajdır");

  
  

  11. İşlev çağrılarını ve bağımsız değişkenleri izleyin.

  Chrome konsolunda belirli işlevleri izleyebilirsiniz. İşlev her çağrıldığında, kendisine geçirilen parametrelerle birlikte günlüğe kaydedilir.

  Var func1 \u003d function (x, y, z) (// ....);

  Bu, bir işlevin ne tür argümanlarla çağrıldığını görmenin harika bir yoludur. Ancak konsolun ne kadar argüman bekleyeceğini söylemesi iyi olurdu. Yukarıdaki örnekte func1üç argüman bekliyor, ancak yalnızca ikisi geçildi. Bu kodda ele alınmazsa, bir hataya yol açabilir.

  

  12. Konsoldaki öğelere hızlı erişim

  Konsolda querySelector'ı kullanmanın daha hızlı bir yolu $ kullanmaktır. $ (‘Css seçici’) ilk eşleşen öğeyi döndürür ve $$ (‘css seçici’) tüm eşleşen öğeleri döndürür. Bir öğeyi birden fazla kullanırsanız, onu bir değişkende saklayabilirsiniz.

  

  13. Postacı harika (ancak Firefox daha hızlı)

  Birçok geliştirici AJAX isteklerini test etmek için Postman kullanır.

  Bazen bu amaçlar için bir tarayıcı kullanmak daha kolaydır.

  Parola korumalı bir sayfayla çalışıyorsanız, artık yetkilendirme çerezleri hakkında endişelenmediğinizde. Firefox'ta istekleri bu şekilde düzenleyebilir ve yeniden gönderebilirsiniz.

  Denetçiyi açın ve Ağ Oluşturma sekmesine gidin. İlgilenilen talebe sağ tıklayın ve ardından "Düzenle" ve "Yeniden Gönder" i seçin. Artık istediğinizi değiştirebilirsiniz: başlığı düzeltin, parametreleri düzenleyin ve "Yeniden Gönder" e tıklayın.

  Aşağıda, farklı parametrelerle birkaç kez gönderilen bir istek örneği bulunmaktadır:

  14. DOM öğesi değiştiğinde kırılma noktası

  DOM eğlenceli olabilir. Bazen, içindeki unsurlar sizin anlamadığınız bir nedenle değişir. Ancak, JavaScript'te hata ayıklamanız gerektiğinde Chrome, DOM öğesi değiştiğinde kod yürütmeyi duraklatmanıza izin verir. Denetçide ilgilenilen öğeye sağ tıklayın ve yürütmeyi durdurmak için koşulu seçin.

  

  NetBeans IDE 7.3, HTML5 uygulamaları geliştirmek için kullanabileceğiniz yeni bir proje türü sunar. HTML5 uygulamaları, tarayıcılarda çalışan ve akıllı telefonlar, tabletler ve dizüstü bilgisayarlar dahil olmak üzere çeşitli cihazlarda görünen uygulamalar oluşturmak için genellikle HTML, CSS ve JavaScript'i birleştirir. Bu belge, IDE'nin, IDE'deki JAVA komut dosyalarının hatalarını ayıklamak ve test etmek için kullanılabilecek araçları nasıl sağladığını gösterir.

  HTML5 uygulamanızda JavaScript dosyalarında hata ayıklamanız gerekiyorsa, Chrome tarayıcısı için NetBeans Connector uzantısını yüklemenizi öneririz. Uygulama bir tarayıcıda başlatıldığında ve uzantı yüklendiğinde hata ayıklama desteği otomatik olarak etkinleştirilir.

  IDE, Jasmine test çerçevesini ve JS Test Sürücüsü sunucusunu kullanarak JavaScript dosyaları için birim testi kurmayı ve çalıştırmayı da kolaylaştırır. JS Test Sürücüsünü farklı tarayıcılar için farklı modüller için çalışacak şekilde yapılandırabilir ve testler çalıştığında IDE'nin yüklemesi gereken JavaScript kitaplıklarını, komut dosyalarını ve testleri hızlı bir şekilde belirleyebilirsiniz. Test başarısız olursa, hata kodunu bulmak için hata ayıklayıcıyı kullanabilirsiniz.

  Chrome tarayıcısı için NetBeans Connector uzantısını yükleme hakkında daha fazla bilgi için eğiticiye bakın.

  IDE'nin JavaScript düzenleme özelliklerine genel bir bakış için bkz. NetBeans IDE'de JavaScript Düzenleme. ...

  Bu eğiticinin bir demo videosunu izlemek için bkz. Video: HTML5 Uygulamalarında JavaScript'i Test Etme ve Hata Ayıklama.

  Bu öğreticiyi tamamlamak için aşağıdaki materyallere ihtiyacınız olacak.

  Notlar.

  • Bu belge, JavaScript birim testlerini çalıştırmak için JS Test Sürücüsü sunucusunu kullanır. JS Test Sürücüsü Projesi Giriş Sayfası bölümünde sunucu özelliklerini incelemeniz önerilir.
  • Okuyucunun HTML, CSS ve JavaScript'te programlama konusunda temel bilgi veya deneyime sahip olduğu varsayılır.

  Örnek Bir HTML5 Uygulaması Oluşturma

  Bir site şablonu kullanarak örnek bir HTML5 uygulaması oluşturmak için bu adımları izleyin.

  
  

  Projeyi Çalıştır düğmesiyle çalıştırdığınızda, HTML5 uygulamasının ilk sayfası Chrome tarayıcısında açılır ve orada cep telefonlarının bir listesi görüntülenir. Bir cep telefonunun ismine tıklamak telefon detaylarını sayfada görüntüler

  
  

  Tarayıcı sekmesinde, NetBeans Bağlayıcısının sekmede hata ayıkladığını belirten sarı bir çubuk olduğuna dikkat edin. IDE ve tarayıcı bağlantılıdır ve sarı çubuğun göründüğü durumlarda birbirleriyle etkileşim kurma yeteneğine sahiptir. IDE'den bir HTML5 uygulaması başlattığınızda, JavaScript hata ayıklayıcı otomatik olarak etkinleştirilir. Dosyadaki değişiklikleri kaydettikten veya CSS stil sayfasında değişiklikler yaptıktan sonra, tarayıcı penceresi değişikliklerle birlikte otomatik olarak yenileneceği için sayfayı yeniden yüklemenize gerek yoktur.

  Sarı çubuğun kapatılması veya İptal'e tıklanması IDE ile tarayıcı arasındaki bağlantıyı keser. Bağlantı kesilirse, JavaScript hata ayıklayıcıyı kullanmak için IDE'den HTML5 uygulamasını yeniden başlatmanız gerekir.

  Ayrıca, tarayıcı alanının URL'sinin konumunda NetBeans simgesinin göründüğünü unutmayın. Görüntüyü tarayıcıda yeniden boyutlandırmak ve NetBeans modu doğrulamasını etkinleştirmek için çeşitli seçenekler sunan bir menüyü açmak için simgeye tıklayabilirsiniz.

  JavaScript hata ayıklayıcısını kullanma

  Bu alıştırma, bir JavaScript dosyasına bir kesme noktasının nasıl yerleştirileceğini ve uygulamanın nasıl yeniden çalıştırılacağını açıklar. Değişkenlerin değerlerini hızlı bir şekilde görüntülemek için düzenleyici ipucunu kullanabilirsiniz.

  1. Projeler penceresinde js düğümünü genişletin ve dosyayı düzenleyicide açmak için controllers.js dosyasına çift tıklayın.
  2. Sol kenarı tıklayarak controllers.js'de 16. satıra bir satır kesme noktası yerleştirin.
     
     

     Projede ayarlanan kesme noktalarını görüntülemek için, Kesme Noktaları penceresini açmak üzere Pencere\u003e Hata Ayıklama\u003e Kesme Noktaları'nı seçin.

     
     
  3. Projeyi yeniden çalıştırmak için araç çubuğundaki Çalıştır düğmesine tıklayın.

     Projeye başlarken, ayarlanan kesme noktasına ulaşılmadığı için aynı sayfa görüntülenir.

  4. Tarayıcınızda, Motorola Atrix4G gibi sayfadaki girişlerden birine tıklayın.

     Veriler JavaScript'e aktarılmadığı ve işlenmediği için sayfanın kısmen yüklendiğini ve telefon için veri olmadığını göreceksiniz.

     
  5. IDE'de, kesme noktasının vurulduğunu ve program sayacının şu anda controllers.js dosyasının 16. satırında olduğunu görebilirsiniz.
  6. Değişkenle ilgili bilgileri içeren bir araç ipucunu görüntülemek için imleci telefon değişkeninin üzerine getirin.
     
     

     Araç ipucu aşağıdaki bilgileri görüntüler: telefon \u003d (Kaynak) Kaynak.

  7. Genişletmek ve değişkenlerin ve değerlerin bir listesini görmek için bir ipucunu tıklayın.
     
     

     Örneğin, android düğümünü genişletmek, os ve kullanıcı arabirimi dizelerinin değerlerini görüntüler.

     Listeyi Değişkenler penceresinde görüntülemek için Pencere\u003e Hata Ayıklama\u003e Değişkenler'i de seçebilirsiniz.

  8. Angular.js kitaplığındaki JavaScript işlevleri arasında gezinmek için araç çubuğu düğmelerini kullanın veya uygulamayı sürdürmek için Devam Et (F5) öğesini tıklayın.

  JS Birim Testlerini Çalıştırma

  IDE, JS Test Sürücüsü sunucusunu birim testlerini çalıştıracak şekilde yapılandırmayı kolaylaştırır. Bu eğiticide, örnek proje ile sağlanan JavaScript birim testlerini ve Jasmine test çerçevesini kullanacaksınız.

  JS Test Sürücüsü, JavaScript birim testlerini çalıştırmak için hedef olan bir URL sağlayan bir sunucudur. Testler çalıştığında, sunucu başlar ve testlerin çalışmasını bekler. Sunucunun çalıştığını ve bekleme modunda olduğunu onaylamak için tarayıcı penceresinde yeşil bir durum mesajı görünür. IDE, Hizmetler altındaki JS Test Sürücüsü düğümünden açabileceğiniz JS Test Sürücüsü için bir yapılandırma iletişim kutusu sağlar. Yapılandırma iletişim kutusu, JS Test Sürücüsü sunucusu JAR'ın ve tarayıcıların çalıştırılacağı tarayıcıların konumunu kolayca belirlemenize olanak tanır. JS Test Sürücüsü düğümü, sunucunun çalışıp çalışmadığını hızlı bir şekilde belirlemenize ve sunucuyu başlatmanıza veya durdurmanıza olanak tanır.

  JS Test Sürücüsü sunucusunu yapılandırma hakkında daha fazla bilgi için, JsTestDriver ile Başlarken belgelerine bakın.

  1. JS Test Sürücüsü JAR'ı indirin ve JAR dosyasını yerel sisteminize kaydedin.
  2. Hizmetler penceresinde, JS Test Sürücüsü düğümüne sağ tıklayın ve Yapılandır öğesini seçin.
     
  3. Yapılandır iletişim kutusunda, Gözat'a tıklayın ve indirilen JS Test Sürücüsü JAR dosyasını bulun.
  4. NetBeans JS Hata Ayıklayıcı özelliğini kullanarak Chrome'u seçin. Tamam'ı tıklayın.
     
     

     Not. JS Test Sürücüsü JAR dosyasının konumunun yalnızca JS Test Sürücüsü ilk kez yapılandırılırken belirtilmesi gerekir.

     Sistemde yüklü tarayıcılarda test için yakalanabilen ve kullanılabilen tarayıcıların listesi. Ek tarayıcı olarak birkaç tarayıcı seçebilirsiniz, ancak testleri çalıştırmak için her tarayıcıda sunucu için ek olabilecek bir pencere açılmalıdır. Sunucu IDE'den başlatıldığında, seçilen tarayıcılar otomatik olarak yakalanacaktır.

  5. Projeler penceresindeki proje düğümüne sağ tıklayın ve Yeni\u003e Diğer'i seçin.
  6. Lütfen seçin JsTestDriver Yapılandırma Dosyası Birim Testi kategorisinde. Sonrakine tıkla".
  7. Emin olun jsTestDriver "Dosya adı" olarak ayarlayın.
  8. Oluşturulan Dosya kutusunda, dosyanın projenin yapılandırma klasöründe (AngularJSPhoneCat / config / jsTestDriver.conf) bulunduğundan emin olun.

     Not. JsTestDriver.conf yapılandırma dosyası, projenin yapılandırma klasörü olmalıdır. Oluşturulan dosyanın konumu yapılandırma klasörü değilse, Gözat'a tıklayın ve iletişim kutusunda AngularJSPhoneCat - Yapılandırma Dosyaları klasörünü seçin.

  9. Jasmine kitaplıklarını indirmek için kutuyu işaretlediğinizden emin olun. Bitir düğmesine tıklayın.
     
     

     Not.JsTestDriver'ı çalıştırmak için Jasmine kitaplıklarını indirmeniz gerekir. IDE'nin Jasmine kitaplıklarını yükleyemediğine dair bir bildirim alırsanız, Seçenekler penceresinde IDE'nin proxy ayarlarını kontrol edin.

     Bitir'e tıkladığınızda, IDE bir şema yapılandırma dosyası (jsTestDriver.conf) oluşturur ve dosyayı bir düzenleyicide açar. Projeler penceresi, yapılandırma dosyasının Yapılandırma Dosyaları düğümü altında oluşturulduğunu görüntüler. Birim Testleri düğümünün altındaki lib klasörünü genişletirseniz, Jasmine kitaplıklarının projeye eklendiğini göreceksiniz.

     

     Düzenleyicide, varsayılan olarak oluşturulan konfigürasyon dosyasının aşağıdaki içeriğini görebilirsiniz:

     Sunucu: http: // localhost: 42442 yükleme: - test / lib / jasmine / jasmine.js - test / lib / jasmine-jstd-adapter / JasmineAdapter.js - test / unit / *. Js hariç:

     Yapılandırma dosyası, testleri çalıştırmak için kullanılan yerel sunucu üzerindeki varsayılan konumu tanımlar. Dosya ayrıca yüklenecek dosyaları da belirtir. Liste, varsayılan olarak Jasmine kitaplıklarını ve birim klasöründeki tüm JavaScript dosyalarını içerir. Testler genellikle birim klasöründe bulunur, ancak testleri çalıştırmak için yüklenmesi gereken diğer dosyaların konumunu belirtmek için listeyi değiştirebilirsiniz.

     AngularJS Telefon Rehberi Eğitimi projesinin modüller klasörü, birim testlerinin dört JavaScript dosyasını içerir.

     

     Birim testleri çalıştırmak için, test etmek istediğiniz JavaScript dosyalarının ve Açısal JavaScript kitaplıklarının konumunu da indirilenler listesine ekleyebilirsiniz.

  10. Aşağıdaki konumları ekleyin (vurgulanmış cesur yazı tipinde) yapılandırma dosyasının yükleme bölümüne. Değişikliklerinizi kaydedin. load: - test / lib / jasmine / jasmine.js - test / lib / jasmine-jstd-adapter / JasmineAdapter.js - test / unit / *. js - app / lib / angular / angular.js - app / lib / angular / angular - *. js - app / js / *. js - test / lib / angular / angular-mocks.js
  11. Projede ayarlanan tüm kesme noktalarını devre dışı bırakın.

      Kesme noktaları, Kesme Noktaları penceresindeki kesme noktaları için onay kutuları temizlenerek devre dışı bırakılabilir.

  12. IDE'yi Test Et tıklandığında, Chrome'da JS Test başlatıcısı ve Çıktı penceresinde iki sekme otomatik olarak açılır.

      
      

      Chrome tarayıcı penceresi, jsTestDriver sunucusu başlatma mesajını görüntüler. Sunucunun localhost: 42442 üzerinde çalıştığını belirten bir mesaj görüntülenir. Çıktı penceresindeki js-test-driver Sunucu sekmesi, sunucu durumunu görüntüler.

      
      

      Not. Birim testlerini çalıştırmak için, tarayıcı penceresi açık olmalı ve jsTestDriver sunucusu çalışıyor olmalıdır. Servisler penceresindeki JS Test Sürücüsü düğümüne sağ tıklayıp Başlat'ı seçerek sunucuyu başlatabilir ve pencereyi açabilirsiniz.

      JS Birim Testini Çalıştır sekmesinde, Çıktı çalıştırılan dört testin çıktısını görüntüler. Testler controllerSpec.js ve filtersSpec.js dosyalarında bulunur. (Birim klasöründeki servicesSpec.js ve yönergelerSpec.js dosyalarının testleri eksiktir.)

      
      
  13. Test Sonuçları penceresini açmak için ana menüden Pencere\u003e Sonuçlar\u003e Test Sonuçları'nı seçin.

      Pencere, tüm testlerin başarılı olduğunu belirten bir mesaj görüntüler.

      
      

      Başarıyla geçilen testlerin genişletilmiş bir listesini görmek için pencerenin sol kenarındaki yeşil onay kutusunu tıklayabilirsiniz.

  JS Birim Testlerinde Hata Ayıklama

  Bu alıştırma, bir birim testi başarısız olduğunda JavaScript dosyalarında hata ayıklamak için IDE'yi nasıl kullanabileceğinizi gösterir.

  1. Projeler penceresindeki js klasörünü genişletin ve dosyayı düzenleyicide açmak için controllers.js dosyasına çift tıklayın.
  2. Aşağıdaki değişiklikleri yapmak için dosyadaki 7. satırı değiştirin (vurgulanmış cesur yazı tipi). Değişikliklerinizi kaydedin. function PhoneListCtrl ($ kapsam, Telefon) ($ kapsam.phones \u003d Telefon.query (); $ kapsam.orderProp \u003d " isim"; }

     Değişiklikleri kaydederken sayfa tarayıcıya otomatik olarak yeniden yüklenir. Listedeki telefonların sırası görüntülenir.

  3. JS Test Sürücüsü sunucusunun çalıştığından ve Chrome tarayıcı penceresinde bir durum mesajının görüntülendiğinden emin olun.
  4. Projeler penceresindeki proje düğümüne sağ tıklayın ve Test'i seçin.
     
     

     Testi çalıştırdığınızda, testlerden birinin beklenen değer olan "yaş" yerine "ad" değerinin bulunduğu mesajıyla başarısız olduğunu görebilirsiniz.

  5. Çıktı penceresindeki JS birimi Test Yürütme sekmesini açın.
     
     

     41. satırda orderProp'un yaş olması gerektiğini belirten bir mesaj görüntülenir.

  6. Testin başarısız olduğu satıra gitmek için JS Birim Testlerini Çalıştır sekmesindeki bağlantıya tıklayın. ControllersSpec.js test dosyası düzenleyicide 41. satırda açılır (vurgulanmış cesur font) it ("orderProp modelinin varsayılan değerini ayarlamalıdır", function () ( beklenti (kapsam.orderProp) .toBe ("yaş"); });

     Testin, kapsamOrder.prop değeri olarak "yaş" beklediğini görebilirsiniz.

  7. Testin başarısız olduğu satırda bir kesme noktası belirleyin (satır 41).
  8. Projeler penceresinde proje düğümüne sağ tıklayın ve Test Et öğesini seçin.

     Test yeniden başlatıldığında, program sayacı kesme noktasına ulaşacaktır. ScopeOrder.prop'un üzerine geldiğinizde, araç ipucu, kesme noktasına ulaşıldığında değişkenin "ad" olarak ayarlandığını gösterir.

     
     

     Alternatif olarak, Kodu Değerlendir penceresini açmak için ana menüden Hata Ayıkla\u003e İfadeleri Değerlendir'i seçebilirsiniz. Pencerede kapsamOrder.prop ifadesini girip Kod Parçacığını Değerlendir () (Ctrl-Enter) öğesini tıkladığınızda, hata ayıklayıcı, Değişkenler penceresinde ifadenin değerini görüntüler.

  9. Testi tamamlamak için araç çubuğundaki Devam düğmesine tıklayın.

  Sonuç

  Bu eğitim, IDE'nin JavaScript dosyalarındaki modüllerde hata ayıklamak ve test etmek için kullanılabilecek araçları nasıl sağladığını gösterir. NetBeans Bağlayıcısı etkinleştirilmişse, uygulama Chrome'da başlatıldığında HTML5 uygulamaları için hata ayıklama otomatik olarak etkinleştirilir. IDE, Jasmine test çerçevesini ve JS Test Sürücüsü sunucusunu kullanarak JavaScript dosyaları için birim testi kurmayı ve çalıştırmayı da kolaylaştırır.

  
  

  Ayrıca bakınız

  IDE'de HTML5 uygulama desteği hakkında daha fazla bilgi için aşağıdaki siteye bakın:

  • HTML5 uygulamalarına başlarken. NetBeans Connector Chrome Uzantısının nasıl kurulacağını ve basit bir HTML5 uygulamasının nasıl oluşturulup çalıştırılacağını gösteren bir belge.
  • HTML5 Uygulamalarında CSS Stil Sayfalarıyla Çalışma Proje kaynaklarındaki öğeleri görsel olarak tanımlamak için IDE'de ve Chrome tarayıcısının doğrulama modunda bazı CSS sihirbazlarının ve pencerelerinin nasıl kullanılacağını gösteren bir belge.
  • JavaScript kodunda değişiklik yapmak. Bu belge, IDE tarafından sağlanan temel JavaScript düzenleme yeteneklerini açıklamaktadır.

  JS Test Sürücüsü ile birim testleri çalıştırma hakkında daha fazla bilgi için aşağıdaki belgelere bakın:

  • JS Test Sürücüsü proje sayfası: http://code.google.com/p/js-test-driver/
  • Jasmine ana sayfası: http://pivotal.github.com/jasmine/
  • JsTestDriver'a Giriş. JsTestDriver'ı sürekli bir bütünleştirme sunucusuyla kullanmaya giriş.

  Zaman zaman geliştiriciler kodlama hataları yapar. Bir program veya komut dosyasındaki bir hataya hata denir.

  Hataları bulma ve düzeltme sürecine hata ayıklama adı verilir ve 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ğundan, Internet Explorer size bir hata oluştuğunda Hata iletişim kutusunu otomatik olarak görüntüleme seçeneği sunar.

  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 oluştuğu 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"; if (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ırasını 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ı açıklayacak 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 test edin. 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.

  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'nin 13. satırına bir kesme noktası ekleyeceğiz.

  

  Şimdi görevi listeye ekleyin. Kod addTodo fonksiyonunda 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 ilerleyebilirsiniz. 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 izler. 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 izlemenize olanak tanır. Özellikle React / Redux gibi genel çerçevelerle çalışırken kullanışlıdır. Hata ayıklayıcı, 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 kod 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 kaynak olduğundan, Mozilla'daki küçük grubun asla hayal etmediği bir şeye dönüşmekte özgürdür.

  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çevesinin hatalarını 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. Ayrıca fonksiyonlar için kesme noktaları ayarlayabiliriz ve kodu değiştirirseniz hareket etmezler.

  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.