Geliştirici Konsolu Hakkında Bilmeniz Gereken Her Şey

İyi bir profesyonel, aletlerini bilir. WordPress geliştiricilerinin emrinde olan ana araçlardan biri, tarayıcılarımızda bulunan JavaScript geliştirici konsoludur. Bu yazıda, tarayıcı geliştirici konsolu hakkında bilmeniz gereken her şeyi, belki de bilmediğiniz bazı püf noktaları ve merakları göreceğiz.

Geliştirici Konsoluna Nasıl Erişilir

Öncelikle ilk şeyler: tarayıcınızın geliştirici konsolunu nasıl açabileceğinizi görelim. Firefox kullanıcısıysanız, menüye (sağ üst köşe) tıklayın ve aşağıda görebileceğiniz gibi Web Geliştirici seçeneğini arayın:

Ardından, Web Konsolu'nu seçin:

ve konsol, aşağıdaki ekran görüntüsünde görebileceğiniz gibi tarayıcınızda görünecektir. Panelin tam olarak nerede görünmesini istediğinizi yapılandırmanın mümkün olduğunu unutmayın. Ayrı bir pencerede görünmesini bile ayarlayabilirsiniz (birden çok monitör kullanıyorsanız bu oldukça kullanışlıdır).

Öte yandan, bir Chrome kullanıcısıysanız, prosedür çok benzer. Basitçe menüsüne erişin, Daha Fazla Araç'ı ve ardından Geliştirici Araçları'nı seçin:

Geliştirici Konsolu Nasıl Kullanılır

Tarayıcımızın JavaScript konsolu, kodumuzun hatalarını ayıklamak, komut dosyalarımızın neleri günlüğe kaydettiğini görmek ve küçük komutları çalıştırmak ve bunların web üzerindeki etkilerini gerçek zamanlı olarak görmek için son derece yararlıdır. WordPress için bir eklenti geliştiricisi olarak, konsolun benim için sahip olduğu ana yardımcı program açıkça hata ayıklamadır, bu yüzden tam olarak ne sunduğunu ayrıntılı olarak görelim.

#1 Farklı Günlük Düzeyleri

Bir geliştiricinin genellikle JavaScript konsolunu açmasının ilk nedeni, kodlarında hata ayıklamaktır. Bir hata oluştuğunda veya bir şeyler başarısız olduğunda, muhtemelen konsolda bununla ilgili bazı bilgiler bulacaksınız. Hatta istediğiniz zaman kendi bilgilendirme mesajlarınızı, uyarılarınızı veya hatalarınızı başlatabilirsiniz!

Örneğin, önceki ekran görüntüsünde, console nesnesinin (amacı kod hatalarını ayıklamamıza yardımcı olmak olan genel nesne) konsolda mesaj yazmak için farklı yöntemlere sahip olduğunu görüyoruz:

• debug ve log düz mesajları gösterir.
• info bilgi mesajlarını gösterir. Firefox'ta mesajın yanında bir "bilgi" simgesi gösterirler.
• warn , genellikle bir soruna veya tam olarak doğru olmayan bir şeye işaret eden uyarıları gösterir. Genellikle sarı renkle ve bir uyarı simgesiyle vurgulanır.
• error genellikle en ciddi hatalar için ayrılmıştır (yani, gerçekten başarısız olan şeyler). Kırmızı ile gösterilir ve ayrıca bir yığın izi yazdırır (yani, hatayı ve tüm arayanlarını oluşturan işlev).

Farklı günlük seviyeleri kullanmanın avantajı, herhangi bir zamanda hangi mesajların görüntülenmesini istediğimizi seçebilmemizdir. Örneğin, aşağıdaki ekran görüntüsünde Bilgi ve Hata Ayıklama mesajlarını devre dışı bıraktık:

#2 Yürütme Sürelerini İzleme

Agile'da sık sık şunu duyarsınız: "Çalışmasını sağlayın, iyileştirin, hızlı yapın." “Çalışmasını sağlamak için” bazı kodlar yazdıktan sonra, sonucun yavaş ve verimsiz olması pek olası değildir. Bu olduğunda, darboğazların nerede olduğunu belirlemek ve bunları ele almak önemlidir.

Suçluları bulmak ve kaputun altında neler olup bittiğini tam olarak anlamak için profil oluşturucular gibi araçlar olmasına rağmen, bazen “hızlı ve kirli” bir çözüm istiyoruz. Yani, sadece kodumuzdaki en yavaş işlevi belirlemek istiyoruz… ve basit zamanlayıcılar bu işte harika!

Belirli bir kod parçasının çalışmasının ne kadar sürdüğünü bilmek istiyorsanız, kodun başında bir zamanlayıcı başlatın ( console.time ) ve kodunuz bittiğinde onu durdurun ( console.timeEnd ):

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Kod timeEnd ulaştığında, çalışması için geçen süreyi görürsünüz:

 Timer: 655ms - timer ended

Bir zamanlayıcıyı başlatıp durdurduğumuzda, ona bir ad verdiğimize dikkat edin (benim örneğimde “Zamanlayıcı”). Bunun nedeni, her biri kendi adına sahip istediğimiz kadar sayaç oluşturabilmemiz ve hepsini aynı anda çalıştırabilmemizdir.

# 3 Otomatik Sayaçlar

Kodunuzdaki herhangi bir işlevin yürütme sayısını kontrol etmekle veya bir döngünün kaç kez çalıştığını günlüğe kaydetmekle ilgileniyorsanız, console.count kullanın. İşlev her yürütüldüğünde, konsolunuzda sayacın geçerli değeriyle yeni bir günlük alırsınız:

#4 Günlüklerinizi Nasıl Biçimlendirirsiniz

Günlükler, kodumuzda neler olduğunu anlamamıza yardımcı olmak için burada. Ancak bu ancak daha sonra anlayabileceğimiz günlükler yazarsak mümkün…

Metin Dizeleri

Bu yazının başında, console sahip olduğu tüm log yöntemlerinden kısaca bahsettim. Paylaştığım örnekler biraz düz metin yazdırdı. Yani, bu ifade:

 console.log( 'Hello world!' );

bu metni yazdırdı:

 Hello world!

Bunun yerine bir nesne yazdırmak istersek ne olur? Iyi:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

bu olur:

Peki ya birden fazla şeyi günlüğe kaydetmek istiyorsak? Console.log için birden fazla çağrı kullanmak zorunda console.log ? Cevap hayır, gerekli değil. Tek bir arama ile istediğimiz her şeyi kaydedebiliriz:

Günlükleri Gruplandırıyor…

Kodumuzda çok sayıda günlük tutmaya başladığımızda (örneğin, burada):

tüm günlükler tek bir metin akışında birleştirildiğinden sonuç biraz kafa karıştırıcı olabilir:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Neyse ki, console nesnesi bu sorunu çözmek için birkaç yöntem sunar: group ve groupEnd . Onlarla günlük mesajlarımızı gruplayabiliriz. Grupları oluşturmanız yeterlidir (örneğin, işlev başına bir grup):

ve şöyle görünecekler:

tablolar

Veri koleksiyonlarıyla çalışırken, onları görselleştirmek her zaman kolay değildir. Örneğin, aşağıdaki gibi bir öğe listemiz olduğunu hayal edin:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Onları console.log , şunu elde ederiz:

bu, her biri daha fazla alana sahip daha fazla nesneye sahip olana kadar aşağı yukarı tamamdır. Bu tür bir veri yapısıyla karşılaştığınızda, günlüğe kaydetmek için console.table kullanmanızı öneririm:

#5 Karmaşık Türleri (Nesneler ve Diziler) Doğru Şekilde Görüntüleme

Son olarak, bugünkü yazımı pek çok geliştiricinin bilmediği bir şeyle bitirmek istiyorum... Diyelim ki, bir proje üzerinde çalışıyorsunuz ve bir nesnenin, onu güncellemeden önce ve sonra değerinin ne olduğunu görmek istiyorsunuz. Bunu yapmak için, aşağıdaki console.log gördüğünüz gibi, değişikliği yapmadan önce ve sonra değişkeni konsol.

Önceki örnekte, 1'e ayarlanmış bir değer içeren bir nesneyi günlüğe kaydederiz. Ardından değeri 200'e günceller ve nesneyi tekrar günlüğe kaydederiz. İlk günlüğün her zaman orijinal değeri (1) göstermesi beklenir, ancak nesneyi genişlettiğimizde aslında yeni 200 değerini nasıl gösterdiğine dikkat edin. Ne oluyor?

Temel olarak, bir günlük mesajının nesneye bir referansı vardır ve bu nedenle, onu genişlettiğimizde, bize nesneyi günlük yapıldığı zamanki gibi değil, şimdi olduğu gibi gösterir. Lanet olası değişkenlik!

Bu sorunu çözmek için, günlüğe bir kopyasını göndermeniz yeterlidir (lodash ve cloneDeep yöntemi gibi kitaplıklar bunu çok kolaylaştırır). Bu şekilde, günlüğe kaydedilen ilk nesne, mutasyona uğratılamayan bir kopya olacaktır (çünkü ona bir referansınız olmayacaktır):

Ve bugünlük bu kadar! Umarım bu gönderiyi beğenmişsinizdir. Konsolla yapabileceğiniz her şey hakkında daha fazla bilgi istiyorsanız, console belgelere bakın. Arkadaşlarınızla paylaşmayı unutmayın? Ve farklı bir şey yaparsanız veya okuyucularımızla paylaşmak istediğiniz herhangi bir tavsiyeniz varsa, bize bir yorum bırakın?

Unsplash'ta Tim van der Kuip ile ilgili görseller.