Giriş
Günümüzde yazarlar Web uygulamalarını oluştururken birçok soyutlamadan yararlanabiliyor. Birçok yazar, Web Platformu'nun sağladığı alt düzey API'larla doğrudan arayüz oluşturmak yerine, uygulamalarını daha üst düzey bir bakış açısıyla yazmak için çerçevelerden yararlanır, araçlar ve derleyiciler oluşturur.
Örneğin, Angular çerçevesi temel alınarak oluşturulan bileşenler, TypeScript'te HTML şablonlarıyla yazılır. Arka planda ise Angular KSA ve web paketi, her şeyi JavaScript'e ve paket adı verilen bir pakette derler ve bu paket daha sonra tarayıcıya gönderilir.
Geliştirici Araçları'nda web uygulamalarında hata ayıklarken veya profil oluştururken şu anda, yazdığınız kod yerine kodunuzun bu derlenmiş sürümünü görebilir ve hata ayıklayabilirsiniz. Ama yazar olarak bunu istemezsiniz:
- Küçültülmüş JavaScript kodunda hata ayıklama değil, orijinal JavaScript kodunuzdaki hataları ayıklamak istiyorsunuz.
- TypeScript kullanırken JavaScript'te hata ayıklamak istemiyorsanız, orijinal TypeScript kodunuzdaki hataları ayıklamak istersiniz.
- Angular, Lit veya JSX'te olduğu gibi şablon oluşturma yöntemini kullandığınızda, ortaya çıkan DOM'da her zaman hata ayıklamaya gerek kalmaz. Bileşenlerin kendi hatalarını ayıklamak isteyebilirsiniz.
Genel olarak, büyük olasılıkla yazdığınız şekilde kendi kodunuzdaki hataları ayıklamak istersiniz.
Kaynak haritaları bu boşluğu zaten bir ölçüde kapatsa da Chrome Geliştirici Araçları ve ekosistemin bu alanda yapabileceği daha fazla şey vardır.
Şimdi bunları inceleyelim.
Yazılan Kod ile Dağıtılan Kod Karşılaştırması
Şu anda, Kaynaklar Paneli'ndeki dosya ağacında gezinirken, derlenen ve genellikle küçültülmüş olan paketin içeriklerini görebiliyorsunuz. Bunlar, tarayıcının indirdiği ve çalıştırdığı asıl dosyalardır. DevTools buna Dağıtılan Kod adını verir.
Bu yöntem çok kullanışlı değildir ve genellikle anlaşılması zordur. Yazar olarak, Dağıtılan Kod'u değil, yazdığınız kodu görmek ve hata ayıklamak istersiniz.
Bunu telafi etmek için artık ağacın bunun yerine Yazılmış Kod'u göstermesini sağlayabilirsiniz. Bu, ağacın IDE'nizde gördüğünüz kaynak dosyalara daha çok benzemesini sağlar ve bu dosyalar artık Dağıtılan Kod'dan ayrılır.
Chrome Geliştirici Araçları'nda bu seçeneği etkinleştirmek için Ayarlar > Denemeler'e gidin ve Kaynakları Yazılan ve Dağıtılan ağaçlar olarak gruplandır'ı işaretleyin.
"Sadece benim kodum"
Bağımlılıkları kullanırken veya bir çerçeve üzerine derleme yaparken üçüncü taraf dosyaları size engel olabilir. Çoğu zaman yalnızca kendi kodunuzu görmek istersiniz, node_modules klasöründe saklı kalmış üçüncü taraf kitaplığını görmek istemezsiniz.
Bunu telafi etmek için Geliştirici Araçları'nda varsayılan olarak etkinleştirilen ek bir ayar bulunur: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. Bu aracı DevTools > Ayarlar > Yoksayma Listesi bölümünde bulabilirsiniz.
Bu ayar etkinleştirildiğinde Geliştirici Araçları, bir çerçeve veya derleme aracının yoksayılacak olarak işaretlediği tüm dosya veya klasörleri gizler.
Angular 14.1.0 sürümünden itibaren node_modules ve webpack klasörlerinin içeriği bu şekilde işaretlenmiştir. Bu nedenle, bu klasörler, içlerindeki dosyalar ve bu tür diğer üçüncü taraf yapıları Geliştirici Araçları'nın çeşitli yerlerinde görünmez.
Yazar olarak bu yeni davranışı etkinleştirmek için herhangi bir şey yapmanız gerekmez. Bu değişikliği uygulamak, çerçeveye bağlıdır.
Yığın izlemelerde yoksayılan kodlar
Yoksayılanlar listesindeki bu dosyaların artık görünmediği yerlerden biri yığın izlemelerdedir. Yazar olarak artık daha fazla ilgili yığın izlemeleri görebilirsiniz.
Yığın izlemenin tüm çağrı çerçevelerini görmek istiyorsanız dilediğiniz zaman Daha fazla çerçeve göster bağlantısını tıklayabilirsiniz.
Aynı durum kodda hata ayıklarken ve kodunuzda ilerlerken gördüğünüz çağrı yığınları için de geçerlidir. Çerçeveler veya paketleyiciler, Geliştirici Araçları'na üçüncü taraf komut dosyaları hakkında bilgi verdiğinde Geliştirici Araçları, alakasız tüm çağrı çerçevelerini otomatik olarak gizler ve adım hata ayıklama sırasında yoksayılanlar listesine eklenen kodların üzerinden atlar.
Dosya ağacındaki yoksayılanlar listesine eklenen kod
Yoksayılanlar listesindeki dosya ve klasörleri Kaynaklar panelindeki Yazılan Kod dosya ağacından gizlemek için Ayarlar > Geliştirici Araçları'ndaki Denemeler bölümündeki Kaynak ağaç görünümünde yoksayılanlar listesindeki kodu gizle kutusunu işaretleyin.
Örnek Angular projesinde node_modules ve webpack klasörleri artık gizlidir.
"Hızlı Aç" menüsündeki kod yok sayılır
Yoksayılanlar listesindeki kod yalnızca dosya ağacından gizlenmez, aynı zamanda “Hızlı Aç” menüsünden de gizlenir (Control+P (Linux/Windows) veya Command+P (Mac)).
Yığın izlemelerle ilgili daha fazla iyileştirme
İlgili yığın izlemelere (stack trace) önceden değinilen Chrome Geliştirici Araçları, yığın izlemelerle ilgili daha da fazla iyileştirme sundu.
Bağlı Yığın İzleri
Bazı işlemler eşzamansız olarak gerçekleşecek şekilde planlandığında, DevTools'daki yığın izlemeler şu anda hikayenin yalnızca bir kısmını anlamaktadır.
Örneğin, varsayımsal bir framework.js dosyasındaki çok basit bir zamanlayıcıyı aşağıda görebilirsiniz:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
tasks.push({ f });
},
work() {
while (tasks.length) {
const { f } = tasks.shift();
f();
}
},
};
}
const scheduler = makeScheduler();
function loop() {
scheduler.work();
requestAnimationFrame(loop);
};
loop();
... ve geliştiricinin bunu bir example.js dosyasında kendi kodunda nasıl kullanabileceği:
function someTask() {
console.trace("done!");
}
function businessLogic() {
scheduler.schedule(someTask);
}
businessLogic();
someTask yönteminde bir ayrılma noktası eklerken veya konsolda yazdırılan izi incelerken, bu işlemin "kök nedeni" olan businessLogic() çağrısından bahsedilmiyor.
Bunun yerine, yalnızca görevin yürütülmesini sağlayan çerçeve zamanlama mantığını görürsünüz ve bu göreve yönlendiren etkinlikler arasındaki nedensel bağlantıları anlamanıza yardımcı olacak yığın izlemede içerik haritası bulunmaz.
“Eş Zamansız Yığın Etiketleme” adlı yeni bir özellik sayesinde, eşzamansız kodun her iki parçasını birbirine bağlayarak hikayenin tamamını anlatmak mümkün.
Eş Zamansız Yığın Etiketleme API'si, console.createTask() adlı yeni bir console yöntemini kullanıma sunuyor. API imzası aşağıdaki gibidir:
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
console.createTask() çağrısı, daha sonra görevin içeriğini f çalıştırmak için kullanabileceğiniz bir Task örneği döndürür.
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
Görev, oluşturulduğu bağlam ile yürütülen eşzamansız işlevin içeriği arasındaki bağlantıyı oluşturur.
Yukarıdaki makeScheduler işlevine uygulandığında kod şöyle olur:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
const task = console.createTask(f.name);
tasks.push({ task, f });
},
work() {
while (tasks.length) {
const { task, f } = tasks.shift();
task.run(f); // instead of f();
}
},
};
}
Bu sayede Chrome Geliştirici Araçları artık daha iyi bir yığın izleme (stack trace) gösterebiliyor.
businessLogic() öğesinin artık yığın izlemeye nasıl dahil olduğuna dikkat edin. Ayrıca, görevin daha önce olduğu gibi genel requestAnimationFrame yerine tanıdık bir adı (someTask) var.
Kullanışlı Telefon Çerçeveleri
Çerçeveler, bir proje oluştururken genellikle HTML görünümlü kodu nihayetinde tarayıcıda çalışacak düz JavaScript'e dönüştüren Angular veya JSX şablonları gibi her türlü şablon dilinden kod üretir. Bazen, üretilen bu tür işlevlere pek kolay görünmeyen adlar verilir. Küçültüldükten sonra tek harfli adlar veya küçük oldukları halde anlaşılmasalar bile net olmayan ya da bilinmedik adlar verilebilir.
Örnek projede, yığın izlemede gördüğünüz AppComponent_Template_app_button_handleClick_1_listener bunun bir örneğidir.
Bu sorunu gidermek için Chrome Geliştirici Araçları artık bu işlevleri kaynak eşlemeleri aracılığıyla yeniden adlandırmayı desteklemektedir. Kaynak eşlemesinde işlev kapsamının başlangıcı için bir ad girişi varsa, çağrı çerçevesinin yığın izlemede bu adı görüntülemesi gerekir.
Yazar olarak bu yeni davranışı etkinleştirmek için herhangi bir şey yapmanız gerekmez. Bu değişikliği uygulamak, çerçeveye bağlıdır.
Geleceğe dönük olarak
Bu yayında belirtilen eklemeler sayesinde, Chrome Geliştirici Araçları size daha iyi bir hata ayıklama deneyimi sunabilir. Ekibin keşfetmek istediği başka alanlar da var. Özel olarak, Geliştirici Araçları'nda profil oluşturma deneyiminin nasıl iyileştirileceğine bakalım.
Chrome Geliştirici Araçları ekibi, çerçeve yazarlarını bu yeni özellikleri benimsemeye teşvik eder. Örnek Olay: Geliştirici Araçları ile Better Angular Hata Ayıklama, bu özelliğin nasıl uygulanacağıyla ilgili yol gösterici bilgiler sağlar.