Tarayıcıda kullanılan hata ayıklama teknikleri

(alan.norbauer.com)

5 puan yazan GN⁺ 2023-11-12 | 1 yorum | WhatsApp'ta paylaş

Tarayıcı geliştirici araçlarını orta seviye ve üzeri düzeyde kullanabiliyorsanız, koşullu breakpointleri basit durdurma koşullarının ötesine taşıyıp günlükleme, izleme, durum değiştirme ve zaman ölçümü aracı olarak genişletebilirsiniz
console.log, console.count, console.trace, console.time gibi konsol API'lerini breakpoint'e veya Watch Pane'e koyarsanız, yürütmeyi durdurmadan akışı ve durumu kaydedebilirsiniz
Fonksiyon argüman sayısı, zaman, CSS hesaplanmış değerleri, çalıştırma sayısı, rastgele örnekleme ve global boolean'ları birleştirerek durma anını çok daha hassas biçimde kontrol edebilirsiniz
Chrome'un monitor, debug, copy, $0, getEventListeners, monitorEvents komutları; fonksiyon çağrıları, DOM, event'ler ve pano işlemlerini konsoldan hızlıca yönetmenizi sağlar
DOM'un JS veya kullanıcı event'leriyle sürekli değiştiği ekranlarda JS'yi duraklatmak, setTimeout(debugger), DOM snapshot'ları ve odak takibi; HTML/CSS hata ayıklama için özellikle faydalıdır

Koşullu breakpoint'leri hata ayıklama aracına dönüştürmek

Koşullu breakpoint'lere yalnızca doğru/yanlış koşulları değil, yan etkisi olan JavaScript ifadeleri de koyabilirsiniz
Bunu kullanarak normal breakpoint'leri günlükleme, izleme, durum değiştirme ve zaman ölçümü aracı gibi kullanabilirsiniz
Logpoint ve tracepoint
- Koşullu breakpoint içinde console.log çağırırsanız, yürütmeyi durdurmadan konsola değer bırakan bir logpoint gibi davranır
- console.count kullanırsanız ilgili satırın kaç kez çalıştığını da sayabilirsiniz
- Mayıs 2020 güncellemesi itibarıyla başlıca tarayıcılar logpoint/tracepoint'i doğrudan destekliyor
Watch Pane'de konsol API kullanımı
- Watch Pane'e de console.log gibi ifadeler ekleyebilirsiniz
- Uygulama debugger'da her durduğunda console.table(localStorage) ile localStorage snapshot'ı alabilirsiniz
- DOM değişiklik breakpoint'i ile Watch ifadelerini birlikte kullanırsanız, DOM alt ağacı değişikliklerinden sonra snapshot'ları bir diziye kaydedebilirsiniz
```
(window.doms = window.doms || []).push(document.documentElement.outerHTML)
```
- DOM değişiklik breakpoint'leri yürütmeyi durdurmayacak şekilde ayarlanamaz
Çağrı yığınını izleme
- Yükleme spinner'ını gösteren ve gizleyen fonksiyonlar varken yalnızca gösterme çağrılarının kaldığı sorunu ararken, console.trace'i koşullu breakpoint'e koyabilirsiniz
- Gösterme fonksiyonunun son stack trace'inde çağıranı tıklayarak ilgili çağrı konumuna gidebilirsiniz
Program davranışını çalışma anında değiştirme
- Koşullu breakpoint ifadesinde fonksiyon argümanlarının üzerine yazarsanız, tarayıcı içinde program davranışını anında değiştirebilirsiniz
- Örneğin getPerson fonksiyonundaki id değerini değiştirebilirsiniz
- id=1 gibi true olarak değerlendirilen ifadeler debugger'ı durdurur; durmamasını istiyorsanız sonuna , false ekleyebilirsiniz
Hızlı performans ölçümü
- Koşullu breakpoint değerlendirme süresi de araya girdiği için hassas performans profillemesi için uygun değildir
- Hızlı ölçüm gerektiğinde başlangıç noktası koşuluna console.time('label'), bitiş noktası koşuluna console.timeEnd('label') koyarak çalışma süresini konsola yazdırabilirsiniz

Durma koşullarını daha hassas hale getirmek

Fonksiyon argüman sayısını kullanma
- Geçerli fonksiyon yalnızca 3 argümanla çağrıldığında durmak istiyorsanız şu koşulu kullanabilirsiniz
```
arguments.callee.length === 3
```
- Opsiyonel argümanları olan overload edilmiş fonksiyonlar için faydalıdır
- Tanımlı argüman sayısı ile fiilen geçirilen argüman sayısı farklı olduğunda durmak istiyorsanız şu koşulu kullanabilirsiniz
```
(arguments.callee.length) != arguments.length
```
- Fonksiyon çağrı konumundaki hataları bulmaya yardımcı olur
Zaman tabanlı koşullar
- Sayfa yüklendikten sonra 5 saniye geçmeden durmamasını istiyorsanız şu koşulu kullanabilirsiniz
```
performance.now() > 5000
```
- Breakpoint ile yalnızca ilk sayfa yüklemesinden sonra ilgileniyorsanız uygundur
- Breakpoint ayarlandıktan sonraki ilk 5 saniye durmasın, sonrasında dursun istiyorsanız referans zamanı global değişkende tutabilirsiniz
```
window.baseline = window.baseline || Date.now(),
(Date.now() - window.baseline) > 5000
```
- Konsolda window.baseline = Date.now() ile sayacı yeniden başlatabilirsiniz
CSS durumuna dayalı koşullar
- Hesaplanmış CSS değerlerini koşul olarak kullanıp durabilirsiniz
- Örneğin yalnızca document.body arka plan rengi kırmızıysa durmak için şu koşulu kullanabilirsiniz
```
window.getComputedStyle(document.body).backgroundColor === "rgb(255,0,0)"
```
Çalıştırma sayısı ve örnekleme
- Satır her çalıştığında sayacı artırarak iki çalıştırmada bir durabilirsiniz
```
window.counter = (window.counter || 0) + 1, window.counter % 2 === 0
```
- Rastgele örnekleme ile 10 çalıştırmada 1 kez durmak istiyorsanız şu koşulu kullanabilirsiniz
```
Math.random() < 0.1
```
Belirli konumlarda asla durmamak
- Chrome'da gutter'a sağ tıklayıp “Never Pause Here” seçerseniz, her zaman false olan bir koşullu breakpoint oluşturulur ve o satırda durulmaz
- XHR breakpoint'inde belirli satırları hariç tutarken veya belirli istisnaları yok sayarken kullanılabilir
Instance ID'lerini otomatik verme
- Sınıf constructor'ına koşullu breakpoint koyarak her instance'ı bir diziye kaydedebilirsiniz
```
(window.instances = window.instances || []).push(this)
```
- Belirli bir instance'ın benzersiz ID'si dizi indeksiyle görülebilir
```
window.instances.indexOf(instance)
```
Breakpoint'leri global olarak açıp kapatma
- Bir veya daha fazla koşullu breakpoint'i global boolean ile kontrol edebilirsiniz
- Bunu konsoldan doğrudan değiştirerek, başka bir breakpoint'ten değiştirerek veya timer ile değiştirerek yapabilirsiniz
```
window.enableBreakpoints = true
setTimeout(() => (window.enableBreakpoints = true), 5000)
```

Fonksiyon ve sınıf çağrılarını izleme

Sınıf metodu çağrılarını izleme
- Chrome'un monitor komut satırı metodunu kullanarak sınıf metodu çağrılarını kolayca izleyebilirsiniz
- Dog sınıfının tüm instance'ları için metot çağrılarını görmek istiyorsanız, prototype üzerindeki tüm property'lere monitor uygulayabilirsiniz
```
var p = Dog.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
```
- Konsolda function bark called with arguments: 2 gibi çağrı bilgileri görünür
- Yalnızca log bırakmak yerine çağrı anında yürütmeyi durdurmak istiyorsanız monitor yerine debug kullanabilirsiniz
Belirli bir instance üzerinden sınıfı izleme
- Sınıf adını bilmiyor ama bir instance'a sahipseniz, constructor'ın prototype'ı üzerinden aynı şekilde izleyebilirsiniz
```
var p = instance.constructor.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
```
- Belirli bir sınıfa sabitlenmeden, rastgele bir instance üzerinde çalışan fonksiyonlar yazarken faydalıdır
Konsoldan fonksiyon çağrısından hemen önce hata ayıklama
- Hata ayıklamak istediğiniz fonksiyonu konsoldan çağırmadan önce debugger çalıştırıp, sonraki fonksiyon çağrısına Step into yaparak fonksiyon uygulamasının içine girebilirsiniz
```
debugger; fn(1);
```
- Fonksiyonun tanımlandığı yeri bulmakla uğraşmak istemediğinizde veya fn dinamik olarak bağlandığı için kaynak konumunu bilmediğinizde faydalıdır
- Chrome'da debug(fn) çağırarak fn her çağrıldığında fonksiyon içinde durmasını da sağlayabilirsiniz

URL değişiklikleri ve özellik okuma hata ayıklaması

SPA yönlendirmesinden önce durmak
- Tek sayfalı uygulama URL'yi değiştirmeden hemen önce durmak istiyorsanız, history.pushState, history.replaceState, window.onhashchange, window.onpopstate üzerine debugger içeren fonksiyonlar bağlayabilirsiniz
```
const dbg = () => {
  debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;
```
- dbg'nin bu sürümü, gezinmeyi bozmadan durmayı sağlayan bir uygulama içermez
- window.location.replace veya window.location.assign doğrudan çağrıldığında, atamadan hemen sonra sayfa unload olacağı için bu yöntem işe yaramaz
- Chrome'da ilgili metotlara debug koyarak yönlendirme kaynağını ve o andaki durumu görebilirsiniz
```
debug(window.location.replace);
debug(window.location.assign);
```
Özellik okuma noktasını bulma
- Bir nesnedeki belirli bir property'nin ne zaman okunduğunu bilmek istiyorsanız, getter içine debugger koyabilirsiniz
```
{ get configOption() { debugger; return true; } }
```
- Bir yapılandırma seçeneğinin hangi kod tarafından nasıl kullanıldığını görmek için faydalıdır
- Bunu kaynak kodda değiştirerek veya koşullu breakpoint ile uygulayabilirsiniz

Konsoldan veri kopyalama

copy() konsol API'si ile metin kesilmeden tarayıcı bilgilerini panoya kopyalayabilirsiniz
Geçerli DOM snapshot'ını, görsel gibi kaynakların metadata'sını, büyük JSON blob'larını ve localStorage dökümlerini kopyalarken kullanılabilir

copy(document.documentElement.outerHTML)
copy(performance.getEntriesByType("resource"))
copy(JSON.parse(blob))
copy(localStorage)

HTML/CSS hata ayıklama

JS yürütmesi durmuşken DOM inceleme
- DOM inspector'da Chrome/Windows için ctrl+\ tuşlarına basarak istediğiniz anda JS yürütmesini durdurabilirsiniz
- JS'in DOM'u değiştirdiği veya mouseover gibi event'lerin DOM'u değiştirdiği durumlarda bile geçerli DOM snapshot'ını kararlı biçimde inceleyebilirsiniz
Kaybolan öğeleri inceleme
- Fareyi hareket ettirince kaybolan koşullu DOM öğelerini, konsolda 5 saniyelik timer kurup debugger çalıştırarak inceleyebilirsiniz
```
setTimeout(function() { debugger; }, 5000);
```
- 5 saniye boyunca UI'yi görünür hale getirdikten sonra JS yürütmesi durursa öğe kaybolmayacağı için geliştirici araçlarına geçip inceleyebilirsiniz
- JS yürütmesi durmuşken öğe inceleme, CSS düzenleme ve JS konsol komutları çalıştırma mümkündür
- İmleç konumu veya focus'a bağlı DOM'u incelerken etkilidir
DOM snapshot kaydetme
- Geçerli DOM'u kopyalamak için şu komutu kullanabilirsiniz
```
copy(document.documentElement.outerHTML);
```
- Her 1 saniyede bir DOM string'ini bir diziye kaydetmek için setInterval'i şöyle kullanabilirsiniz
```
doms = [];
setInterval(() => {
  const domStr = document.documentElement.outerHTML;
  doms.push(domStr);
}, 1000);
```
- Diziye kaydetmeden konsola sürekli yazdırmanız da mümkündür

Odaklanan öğeyi izleme

document.activeElement değerini periyodik olarak karşılaştırarak focus değişikliklerini konsola yazdırabilirsiniz

(function () {
  let last = document.activeElement;
  setInterval(() => {
    if (document.activeElement !== last) {
      last = document.activeElement;
      console.log("Focus changed to: ", last);
    }
  }, 100);
})();

Kalın gösterilen öğeleri bulma
- Tüm öğelerde hesaplanmış fontWeight değeri "bold" veya "700" olanları bulabilirsiniz
```
const isBold = (e) => {
  let w = window.getComputedStyle(e).fontWeight;
  return w === "bold" || w === "700";
};
Array.from(document.querySelectorAll("*")).filter(isBold);
```
- Geçerli inspector'da seçili öğenin yalnızca alt öğelerini bulmak istiyorsanız $0 üzerinden arama yapabilirsiniz
```
Array.from($0.querySelectorAll("*")).filter(isBold);
```
Seçili öğe ve event'lerle çalışma
- Konsoldaki $0, Element Inspector'da şu anda seçili olan öğeye işaret eden otomatik referanstır
- Chrome ve Edge'de daha önce incelenen öğelere $1, ondan öncekine $2 şeklinde erişebilirsiniz
- Chrome'da seçili öğenin event listener'larını görebilirsiniz
```
getEventListeners($0)
```
- Seçili öğedeki tüm event'leri hata ayıklamak için monitorEvents($0) kullanabilirsiniz
- Yalnızca belirli event gruplarını görmek istiyorsanız bir dizi verebilirsiniz
```
monitorEvents($0, ["control", "key"])
```

1 yorum

GN⁺ 2023-11-12

Hacker News yorumları

Son birkaç on yılda tarayıcılara yerleşik gelen hata ayıklama araçları gerçekten çok gelişti.
Uzun süredir JS kullanan biri olarak, tarayıcı içinde kod hata ayıklamayı bu kadar sezgisel hâle getiren insanlara derinden minnettarım.
Backend veya başka diller gibi diğer geliştirme alanlarına geçtiğimde, modern tarayıcıların varsayılan olarak sunduğu bu hata ayıklama aracı ekosistemini özlüyorum.
- Tarayıcı geliştirici araçlarını ciddi biçimde ileri taşıyan Firebug eklentisini yapan insanları da alkışlamak isterim.
- JS hata ayıklama deneyiminde özellikle neyin bu kadar özel hissettirdiğini merak ediyorum.
  Python, Java, C++ ile yıllarca çok hata ayıkladım ama araçların yetersiz olduğunu hiç hissetmedim.
  Elbette bu alanda kullanılabilecek seçenekleri bilmeyen epey kişi gördüm.
- Mükemmel değil ama bir iş arkadaşımın savunduğu VS Code ile Node.js hata ayıklama deneyiminden çok daha iyi.
  O cehennemdense konsolu seçerim.
setTimeout(function() { debugger; }, 5000); akıllıca.
Sonuçta Chrome debugger’ın kendi kendini debug ettiği özyinelemeli kaplumbağa yığınını yenmenin tek yolu debugger ifadesi.
Kötü şöhretli Myspace Sammy solucanının sam.pl’si de ziyaretçilerin obfuscate edilmiş HTML ana sayfasını kurcalamasını engellemek için hata ayıklama tuzakları kullanmıştı.
- Sık kullandığım bookmarklet’lerden biri: https://darekkay.com/blog/debugging-dynamic-content/
- Web sitesi açık Console/DevTools yan panelini engellediğinde böyle şeyler olur.
  Ana döngüyü çalıştırıp oraya buraya can sıkıcı debugger; ifadeleri yerleştirir ve bunları 30 FPS / 32 ms aralıklarla çalıştırarak DevTools’u işe yaramaz hâle getirir.
  Çünkü debugger ifadesini “yok saymanın” bir yolu yoktur.
- 5 saniye beklemek istemiyorsanız betik yürütmeyi duraklatma kısayolu cmd-\ kullanabilirsiniz.
  Sayfa o anda çalışan JS satırında durur ve sorunlu öğeyi her zamanki gibi inceleyebilirsiniz.
- Tarayıcı üreticilerinin DevTools’ta açıkça etkinleştirilen bir seçenek olarak bırakıp, varsayılan olarak debugger ifadelerini yok saymasını isterdim.
  Meşru debugger ifadesi kullanım örneklerinin çoğu, kendi kodunuz üzerinde çalışıyorsanız basit breakpoint’lerle değiştirilebilir.
- Dur, hepsi bu mu? Fazla basit ama çok iyi.
queryObjects’ın eksik olması göze çarpıyor.
Belirli bir constructor ile oluşturulmuş tüm nesnelerin listesini döndüren epey çılgın bir API.
Örneğin queryObjects(Function) ile heap’teki tüm fonksiyonların listesini alabilirsiniz.
Bir modülün içindeki “private” fonksiyonları bile döndürür.
- Açıkçası bunu duyurmak istememek bile haklı görülebilir.
  Gerçekten çılgın bir özellik ve muhtemelen Chromium’a özel.
Watch değişkenlerini bir türlü düzgün kullanamıyorum.
Scope ve yenileme kuralları fazlasıyla anlaşılmaz; sadece global değişkenler izlenebiliyor sanıyorsunuz ama o bile beklendiği gibi çalışmıyor, bu yüzden test ederken sonunda log’ları değerlerle dolduruyorum.
Yıllardır, değişkenleri ve ayar değerlerini görüp test edebilmek için konsola Data.gui [1] tarzı bir UI konması gerektiğini düşünüyorum.
Bu CodePen’de [2] gerçekten çalıştığını görebilirsiniz.
1. https://github.com/dataarts/dat.gui
2. https://codepen.io/russellbeattie/full/kGxaqM
- Aynı hayal kırıklığını yaşadım.
  Tarayıcılarda teoride harika birçok hata ayıklama özelliği var ama pratikte güvenilir şekilde çalışıyor gibi görünmüyorlar.
  Breakpoint’lerin bile hepsinin güvenilir biçimde tutmasını sağlayamıyorum.
  Kod açılmış hâldeyken sorun yok, ama bundle edilir edilmez, minify edilmemiş olsa bile birçok debugger özelliği bozuluyor gibi geldi.
  Frontend mühendisi olmadığım için belki de bir şeyi yanlış yapıyorumdur.
- Debugger’da source map’leri kapatmayı denemek iyi olabilir.
  Hayal kırıklığının nedeni büyük ihtimalle bu; açıkken aktif hata ayıklama deneyimi bu kadar kötüyken neden hâlâ varsayılan olarak açık olduğunu anlamıyorum.
- Chrome yan çubuk panelinde minify edilmiş değişkenler doğru adla görünüyor ama watchpoint’te tanımlı olmadığı hatası vermesi sinir bozucu.
IIFE kapsamı içinde kodun çalışmasını durdurmadan IIFE’nin yerel değişkenlerine erişmenin bir yolu olsa iyi olurdu
Debugger’ı bunu yapmaya ikna etmenin bir yolu var mı?
- IIFE, hemen çağrılan fonksiyon ifadesi demektir
  https://en.m.wikipedia.org/wiki/Immediately_invoked_function...
- IIFE’nin çağırdığı bir fonksiyonda breakpoint’e girdiyseniz sadece stack’te yukarı çıkmanız yeterli
  IIFE’nin tamamen dışındaysanız bunun imkânsız olduğunu düşünüyorum
  Aradığınız değişken, çalışmadan önce veya sonra bellekte bulunmayabilir
  JavaScript’te diğer dillerdeki gibi statik değişkenler yok; bu yüzden IIFE her çağrıldığında iç değişkenler atılır
  JavaScript, web worker gibi şeyler kullanılmadığı sürece oldukça güçlü bir tek iş parçacıklı modele sahiptir; bu nedenle async/await çağrılarıyla doğrudan bir yarış durumu yaratmaya çalışmıyorsanız, IIFE kapsamı dışında böyle bir değişkenin bellekte kalması kavramı pek geçerli olmaz
  var’ı kötüye kullanıp değişkeni IIFE kapsamı dışında ilklendirirseniz, son IIFE çağrısının oluşturduğu değeri görebilirsiniz
- Yaklaşık 12 yıl önce bunu yapan bir araç geliştirmiştim
  Biraz değişiklik gerekir ama harcanan emeğe göre getirisi yüksek
  https://github.com/kristopolous/_inject
  İstediğiniz bir anda neredeyse her fonksiyon bağlamında dolaşıp ne olduğunu görebilirsiniz
  Bağlamın yok edilmesini engellemek için referans sayacını kötüye kullanan bir yöntem
  İstemci tarafı JS ile çok uğraştığım dönemde gerçekten kullanışlıydı
  Bunun düzgün yapılmış killer app sürümü, herhangi bir bağlamda REPL açmak olurdu
  Mevcut hâliyle bile iyi kullanmak için epey uzmanlık gerekiyor
- Aradığınız şey logpoint mi?
  https://firefox-source-docs.mozilla.org/devtools-user/debugg...
  Düzenleme: Bağlantılı yazıda kelimenin tam anlamıyla ilk ele alınan şeyin bu olduğunu şimdi fark ettim
- Chrome’da https://news.ycombinator.com/item?id=38226743#38231705 adresinde açıklanan closure’ı Watch paneliyle inceleyip [[Scopes]] sözde özelliğine bakabilirsiniz
  Firefox’ta bir yolu yok gibi görünüyor
Tamlık adına Werkzeug önerilebilir
Django backend geliştirmede kullanıyorum ve inanılmaz faydalı
İstisna oluşan herhangi bir yerde, istediğiniz zaman tarayıcı içinde “PDB” kabuğu kullanmanızı sağlıyor
- Tarayıcıda Werkzeug’ü açmak istediğiniz yere sadece 1/0 koymanız yeterli, kolay
- nose.js ve tarayıcı dâhil her yerde böyle bir deneyim istiyorum
  Çok basit ve sezgisel
- Hâlâ django-extension/runserver_plus gerekiyor mu?
Sürekli kullandığım bir numara, yüklenen script’leri UI metinleriyle arayıp debug etmektir
Network paneline gidip ağ isteği kaydını başlatın, sol kenar çubuğunu açın ve bulmak istediğiniz kodu veya UI metnini arayın
Genellikle tuhaf bir paketlenmiş JS chunk dosyasının içinde bulunur; sonuca tıklayınca o dosyanın ağ isteği açılır
Dosyanın içinde herhangi bir yere sağ tıklayıp “Open in Sources” benzeri bir öğeyi seçerseniz debugger’a geçersiniz
Artık debugger ifadesi koyabilirsiniz; bu süreçte source map’ler de muhtemelen yüklenir
Uzun süre Python/Elixir programcısı olarak çalıştım ve pdb.set_trace() ile IEx.pry()’ı çok kullandım
Yakın zamanda çok dağınık bir NodeJS backend devraldım ve düzgün debug araçları olmadan kalan saçlarımı yoluyorum
console.log ile debug etmeye geri döndüm ama kendimi ilkel insan gibi hissediyorum
Bu kadar popüler bir ekosistemde düzgün bir debug REPL’i olmadığına inanamıyorum; nereye bakmam gerektiğini söyleyebilir misiniz?
- Var
  node --inspect-brk kullanabilirsiniz; VS Code veya Chrome DevTools ile bağlanabilirsiniz
  Zor kısım, TypeScript dönüşümü gibi build araçlarının nodejs komutunun önünde olup olmadığı
  Sadece node çalıştırıyorsanız oldukça kolay
  Debug REPL’i JavaScript konsolunun kendisidir
- VSCode geliştirici araçlarını kullanırsanız NodeJS’te de oldukça sağlam debug yapabilirsiniz
  Debug seçeneklerine eklerseniz breakpoint koyup fonksiyonların içine adım adım girebilirsiniz
  Çoğu şey nesnelerin içinde kapsüllendiği için JavaScript debug etmek için oldukça iyi
- Başkalarının söylediği gibi, istediğiniz şey --inspect veya --inspect-brk
  VSCode’da “open JavaScript debug terminal” komutunu da kullanabilirsiniz
  Bu komut, herhangi bir node komutunun otomatik olarak debugger bağlı şekilde başladığı bir terminal açar
- Yeterli olmayabilir ama az önce python snoop’u öğrendim
  https://pypi.org/project/snoop/
  Derin izleme için bir decorator
- Elixir REPL’de güzel olan şey, Erlang REPL’e benzer şekilde çalışan bir prosese bağlanabilmeniz gibi görünüyor
  Node JS ekosisteminde böyle bir özellik görmedim
“Debugging Property Reads” bölümünde, koşullu breakpoint kullanarak {configOption: true} ifadesini {get configOption() { debugger; return true; }} biçimine nasıl dönüştürdüğünü merak ediyorum
- Bu, koşullu breakpoint başlığı altındaki içerik değil
  Konsolda değerin üzerine bir getter yazabilirsiniz; yazma izniniz varsa kaynak kodda doğrudan da değiştirebilirsiniz
Bunu kesin öğrenmem gerekiyor gibi geliyor; acaba buna özel bir kitap ya da öğrenme kaynağı var mı?
Yoksa web geliştirme ve frontend’i durmadan derinlemesine kurcalamaktan başka çare yok mu?
- Chrome ekibinin “What’s new in DevTools” serisini takip etmeyi gerçekten öneririm.
  Yoğun çalışırken sürüm notlarını okumak için bir bağlantıya tıklamak pek cazip gelmeyebilir, ama yeni bir sürüm çıktığında 5 dakika göz atmak bile kesinlikle değer.
  Birkaç dakikalık, sindirmesi kolay videolar da var; hızlı bir genel bakış edinmek için iyi oluyor.
  Amaç yeni özellikleri tanıtmak olsa da, deneyimime göre aracın mevcut sınırlarını anlamayı da sık sık sağlıyor.

Tarayıcıda kullanılan hata ayıklama teknikleri

Koşullu breakpoint'leri hata ayıklama aracına dönüştürmek

Logpoint ve tracepoint

Watch Pane'de konsol API kullanımı

Çağrı yığınını izleme

Program davranışını çalışma anında değiştirme

Hızlı performans ölçümü

Durma koşullarını daha hassas hale getirmek

Fonksiyon argüman sayısını kullanma

Zaman tabanlı koşullar

CSS durumuna dayalı koşullar

Çalıştırma sayısı ve örnekleme

Belirli konumlarda asla durmamak

Instance ID'lerini otomatik verme

Breakpoint'leri global olarak açıp kapatma

Fonksiyon ve sınıf çağrılarını izleme

Sınıf metodu çağrılarını izleme

Belirli bir instance üzerinden sınıfı izleme

Konsoldan fonksiyon çağrısından hemen önce hata ayıklama

URL değişiklikleri ve özellik okuma hata ayıklaması

SPA yönlendirmesinden önce durmak

Özellik okuma noktasını bulma

Konsoldan veri kopyalama

HTML/CSS hata ayıklama

JS yürütmesi durmuşken DOM inceleme

Kaybolan öğeleri inceleme

DOM snapshot kaydetme

Odaklanan öğeyi izleme

Kalın gösterilen öğeleri bulma

Seçili öğe ve event'lerle çalışma

İlgili okumalar

1 yorum

Hacker News yorumları