Giriş
Günümüzde yazarlar, web uygulamalarını oluşturmak için birçok soyutlama kullanabilir. Birçok yazar, uygulamalarını daha üst düzey bir perspektiften yazmak için Web Platformu'nun sağladığı alt düzey API'lerle doğrudan arayüz oluşturmak yerine çerçevelerden, derleme araçlarından ve derleyicilerden yararlanır.
Örneğin, Angular çerçevesinin üzerine oluşturulan bileşenler, TypeScript'te HTML şablonlarıyla yazılır. Arka planda Angular CLI ve webpack, her şeyi JavaScript'e ve paket olarak derleyip tarayıcıya gönderir.
DevTools'ta web uygulamalarında hata ayıkladığınızda veya profil oluşturduğunuzda, şu anda yazdığınız kod yerine kodunuzun derlenmiş sürümünü görür ve bu sürümde hata ayıklayabilirsiniz. Ancak yazar olarak bunu istemezsiniz:
- Küçültülmüş JavaScript kodunda değil, orijinal JavaScript kodunuzda hata ayıklama yapmak istiyorsunuz.
- TypeScript'i kullanırken JavaScript'de değil, orijinal TypeScript kodunuzda hata ayıklama yapmak istersiniz.
- Angular, Lit veya JSX gibi şablon oluşturma yöntemleri kullandığınızda, sonuç olarak ortaya çıkan DOM'de her zaman hata ayıklamak gerekmez. Bileşenlerin hatalarını kendiniz gidermek isteyebilirsiniz.
Genel olarak, kendi kodunuzu yazdığınız şekilde hata ayıklamak istersiniz.
Kaynak haritalar bu açığı bir dereceye kadar kapatsa da Chrome Geliştirici Araçları ve ekosistemin bu alanda yapabileceği daha çok şey var.
Şimdi bunları inceleyelim.
Yazılan ve dağıtılan kod
Şu anda Kaynaklar Paneli'ndeki dosya ağacında gezinirken derlenmiş ve genellikle küçültülmüş paketin içeriğini görebilirsiniz. Bunlar, tarayıcının indirdiği ve çalıştırdığı gerçek dosyalardır. Geliştirici Araçları bunu Dağıtılan Kod olarak adlandırır.
Pek pratik değildir ve genellikle anlaşılması zordur. Yazar olarak Dağıtılan Kod'u değil, yazdığınız kodu görmek ve kodda hata ayıklamak istersiniz.
Bunu telafi etmek için artık ağaçta Yazar Kodu'nu gösterebilirsiniz. Bu sayede ağaç, IDE'nizde gördüğünüz kaynak dosyalara daha çok benzer. Bu dosyalar artık Yayınlanan 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 halinde gruplandır'ı işaretleyin.
"Yalnızca benim kodum"
Bağımlılıkları kullanırken veya bir çerçeveyi temel alırken üçüncü taraf dosyaları size engel olabilir. Çoğu zaman yalnızca kendi kodunuzu görmek istersiniz. node_modules klasörünün içine gizlenmiş bir üçüncü taraf kitaplığını değil.
Bu eksikliği gidermek için DevTools'ta varsayılan olarak etkin olan ek bir ayar vardır: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. Bu listeyi DevTools > Ayarlar > Yoksay Listesi'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 ya da klasörleri gizler.
Angular 14.1.0 sürümü itibarıyla node_modules ve webpack klasörlerinin içeriği bu şekilde işaretlendi. Bu nedenle, bu klasörler, içindeki dosyalar ve bu tür diğer üçüncü taraf yapıları DevTools'un çeşitli yerlerinde gösterilmez.
Yazar olarak bu yeni davranışı etkinleştirmek için herhangi bir işlem yapmanız gerekmez. Bu değişikliğin uygulanması çerçeveye bağlıdır.
Yığın izlemelerinde yoksayılanlar listesindeki kod
Yoksayılanlar listesindeki bu dosyaların artık gösterilmediği yerlerden biri de yığın izlemeleridir. Yazar olarak artık daha fazla alakalı yığın izleme görebilirsiniz.
Yığın izlemenin tüm çağrı çerçevelerini görmek isterseniz dilediğiniz zaman Daha fazla çerçeve göster bağlantısını tıklayabilirsiniz.
Hata ayıklama ve kodunuzda adımlama sırasında gördüğünüz çağrı yığınları için de aynı durum geçerlidir. Çerçeveler veya paketleyiciler DevTools'u üçüncü taraf komut dosyaları hakkında bilgilendirdiğinde DevTools, tüm alakasız çağrı çerçevelerini otomatik olarak gizler ve adım adım hata ayıklama sırasında göz ardı edilen kodları atlar.
Dosya ağacında yoksayılanlar listesindeki kod
DevTools'daki Ayarlar > Deneyler bölümünde İçerik listesindeki dosyaları ve klasörleri Kaynaklar panelindeki Yazar Kodu dosya ağacından gizle'yi işaretleyerek, yoksayılanlar listesindeki dosyaları ve klasörleri Kaynaklar panelindeki Yazar Kodu dosya ağacından gizleyebilirsiniz.
Örnek Angular projesinde node_modules ve webpack klasörleri artık gizlidir.
"Hızlı Aç" menüsünde yoksayılan kod
Yoksayılanlar listesinde yer alan kodlar yalnızca dosya ağacında değil, "Hızlı Aç" menüsünde de (Control+P (Linux/Windows) veya Command+P (Mac)) gizlenir.
Yığın izlemelerinde daha fazla iyileştirme
İlgili yığın izlemeleri (stack trace) daha önce ele almış olan Chrome Geliştirici Araçları, yığın izlemelerde (stack trace) daha da fazla iyileştirme sundu.
Bağlı Yığın İzlemeleri
Bazı işlemler eşzamansız olarak gerçekleşecek şekilde planlandığında DevTools'taki yığın izlemeleri şu anda yalnızca sorunun bir kısmını gösterir.
Örneğin, varsayımsal bir framework.js dosyasında çok basit bir planlayıcı verilmiştir:
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 bir geliştiricinin bunu example.js dosyasındaki kendi kodunda nasıl kullanabileceği:
function someTask() {
console.trace("done!");
}
function businessLogic() {
scheduler.schedule(someTask);
}
businessLogic();
someTask yöntemine bir kesme noktası eklerken veya konsolda yazdırılan izlemeyi incelerken bu işlemin "temel nedeni" olan businessLogic() çağrısından bahsedilmediğini görürsünüz.
Bunun yerine, yalnızca görev yürütmeye yol açan çerçeve planlama mantığını görürsünüz ve bu göreve yol açan etkinlikler arasındaki nedensel bağlantıları anlamanıza yardımcı olacak içerik haritası yoktur.
“Eşzamansız Yığın Etiketleme” adlı yeni özellik sayesinde eşzamansız kodun her iki parçasını birbirine bağlayarak hikayenin tamamını anlatmak mümkün.
Eşzamansız Stack Tagging API, console.createTask() adlı yeni bir console yöntemi kullanıma sundu. 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ülmekte olan asynkron işlevin bağlamı arasında bağlantı oluşturur.
Yukarıdaki makeScheduler işlevine uygulandığında kod şu şekilde 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() değerinin artık yığın izlemeye dahil edildiğini fark edin. Bununla birlikte, görevde artık genel requestAnimationFrame yerine tanıdık bir ad someTask var.
Samimi Telefon Çerçeveleri
Çerçeveler bir proje oluştururken genellikle her türlü şablon dilinden kod üretir. Örneğin, HTML görünümlü kodu sonunda tarayıcıda çalışan düz JavaScript'e dönüştüren Angular veya JSX şablonları. Bazen bu tür oluşturulan işlevlere çok kullanışlı olmayan isimler verilir. Bu isimler, sıkıştırıldıktan sonra tek harfli isimler veya sıkıştırılmamış olsalar bile belirsiz ya da tanıdık olmayan isimler olabilir.
Örnek projede buna örnek olarak yığın izlemede gördüğünüz AppComponent_Template_app_button_handleClick_1_listener verilebilir.
Chrome Geliştirici Araçları, bu sorunu çözmek için artık kaynak eşlemeleri aracılığıyla bu işlevlerin yeniden adlandırılmasını desteklemektedir. Bir kaynak haritasında işlev kapsamının başlangıcı için bir ad girişi varsa çağrı çerçevesi, yığın izlemede bu adı göstermelidir.
Yazar olarak bu yeni davranışı etkinleştirmek için herhangi bir işlem yapmanız gerekmez. Bu değişikliğin uygulanması çerçeveye bağlıdır.
Geleceğe dönük olarak
Bu yayında özetlenen 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. Özellikle de Geliştirici Araçları'nda profil oluşturma deneyiminin nasıl iyileştirileceği üzerine konuştuk.
Chrome Geliştirici Araçları ekibi, çerçeve yazarlarını bu yeni özellikleri benimsemeleri için teşvik eder. Örnek Olay: Geliştirici Araçları ile Daha İyi Angular Hata Ayıklama başlıklı makalede, bu özelliğin nasıl uygulanacağıyla ilgili yol gösterici bilgiler verilmektedir.