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 bakış açısıyla 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 inşa edilen bileşenler, HTML şablonlarıyla TypeScript'te 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ıklama veya profil oluşturma işlemi yaparken şu anda yazdığınız kod yerine, kodunuzun derlenmiş sürümünü görüp bu sürümde hata ayıklama yapabilirsiniz. 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 şablonlar kullandığınızda, her zaman ortaya çıkan DOM'da hata ayıklama yapmak istemezsiniz. 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 kod 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.
Bu yöntem pek 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 kodda hata ayıklamak istersiniz.
Bunun yerine, 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 > Deneysel'e gidin ve Kaynakları Yazar ve Dağıtılmış ağaçlar halinde gruplandır'ı işaretleyin.
"Yalnızca benim kodum"
Bağımlılıklar kullanırken veya bir çerçevenin üzerine kod oluştururken üçüncü taraf dosyaları işinize engel olabilir. Çoğu zaman, node_modules klasöründe gizlenmiş bir üçüncü taraf kitaplığının kodunu değil, yalnızca kendi kodunuzu görmek istersiniz.
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 DevTools, bir çerçevenin veya derleme aracının yoksayılacak olarak işaretlediği tüm dosyaları veya 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
Yoksayılanlar listesinde yer alan dosyaları ve klasörleri Kaynaklar panelindeki Yazar Kodu dosya ağacından gizlemek için DevTools'daki Ayarlar > Deneysel bölümünde Yoksayılanlar listesinde yer alan kodu kaynaklar ağacı görünümünde gizle'yi işaretleyin.
Ö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
Alakalı yığın izlemeleri zaten ele alınmış olan Chrome Geliştirici Araçları, yığın izlemelerde daha da fazla iyileştirme sunuyor.
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 hikayenin bir kısmını anlatıyor.
Ö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ı eklediğinizde 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 bir özellik sayesinde, eş zamansız kodun her iki parçasını da birbirine bağlayarak hikayenin tamamını anlatabilirsiniz.
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 izlemesi 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.
Dostluk Görüşmesi Çerçeveleri
Çerçeveler, proje oluştururken genellikle her türlü şablonlama dilinden kod oluşturur. Örneğin, HTML benzeri kodu tarayıcıda çalışacak basit 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.
Bu sorunu gidermek için Chrome DevTools artık kaynak haritalar 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 açıklanan eklemeler sayesinde Chrome Geliştirici Araçları size daha iyi bir hata ayıklama deneyimi sunabilir. Ekip, keşfetmek istediği daha fazla alan var. Özellikle, DevTools'daki profil oluşturma deneyimini iyileştirme.
Chrome DevTools ekibi, çerçeve yazarlarını bu yeni özellikleri kullanmaya teşvik ediyor. Ö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.