Giriş
Günümüzde yazarlar, web uygulamalarını oluşturmak için birçok soyutlama kullanabilir. Birçok yazar, Web Platformu'nun sağladığı alt düzey API'lerle doğrudan arayüz oluşturmak yerine çerçevelerden yararlanır, uygulamalarını daha üst düzey bir perspektiften yazmak için araçlar ve derleyiciler geliştirir.
Ö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ı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. Bunu istemezsiniz, ancak bir yazar olarak:
- 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, yazdığınız kodda kendi kodunuzdaki hataları ayıklamak isteyebilirsiniz.
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.
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.
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 > 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 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 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 izlemelerde yoksayılanlar listesine eklenen kod
Yoksayılanlar listesindeki bu dosyaların artık gösterilmediği yerlerden biri, yığın izlemelerdedir. Yazar olarak artık daha alakalı yığın izlemeler 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
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şlemlerin eşzamansız olarak gerçekleşmesi planlandığında, Geliştirici Araçları'ndaki yığın izlemeler şu anda hikayenin yalnızca bir kısmını anlatır.
Örneğin, varsayımsal bir framework.js
dosyasındaki çok basit bir planlayı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 kendi kodunda bir example.js
dosyasında 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 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. Dahası, görev eskisi gibi genel requestAnimationFrame
yerine tanıdık bir ada sahip someTask
.
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 işlevlere çok kolay olmayan adlar verilir. Bu adlar küçültüldükten sonra tek harfli adlar veya küçük olsa bile belirsiz ya da tanıdık olmayan adlar 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 özetlenen 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 de 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.