Giriş
Günümüzde yazarlar, Web uygulamalarını oluşturmak için birçok soyutlamadan yararlanabiliyor. 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 oluşturulan bileşenler, TypeScript'te HTML şablonlarıyla yazılır. Bu aşamanın altında Angular CLI ve webpack her şeyi JavaScript'e dönüştürüp paket adı verilen bir pakette birleştirir. 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 aslında yazdığınız kod yerine kodunuzun bu derlenmiş sürümünü görebilir ve hata ayıklayabilirsiniz. Bunu istemezsiniz, ancak bir yazar olarak:
- Küçültülmüş JavaScript kodunda hata ayıklamak istemiyorsanız orijinal JavaScript kodunuzdaki hataları ayıklamak istersiniz.
- TypeScript kullanırken JavaScript hatalarını ayıklamak istemezsiniz, orijinal TypeScript kodunuzda hata ayıklamak 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 kendi hatalarını ayıklamak isteyebilirsiniz.
Genel olarak, yazdığınız kodda kendi kodunuzdaki hataları ayıklamak isteyebilirsiniz.
Kaynak haritaları zaten bu açığı bir ölçüde kapatsa da Chrome Geliştirici Araçları ve ekosistemin bu alanda yapabileceği daha pek çok şey var.
Şimdi bunları inceleyelim.
Yazılmış 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örüyorsunuz. Bunlar, tarayıcının indirdiği ve çalıştırdığı gerçek dosyalardır. Geliştirici Araçları'nda buna Dağıtılan Kod denir.
Pek pratik değildir ve genellikle anlaşılması zordur. Bir yazar olarak, Dağıtılan Kod'u değil, yazdığınız kodu görmek ve hata ayıklamak istersiniz.
Bu hatayı telafi etmek için artık ağacın bunun yerine Yazar Kodu'nu göstermesini sağlayabilirsiniz. Bu işlem, ağacın IDE'nizde gördüğünüz kaynak dosyalarına 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'i tıklayın 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üne gizlenmiş bir üçüncü taraf kitaplığını değil.
Bu durumu telafi etmek için Geliştirici Araçları'nda varsayılan olarak etkin olan ek bir ayar bulunur: Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle. Bu aracı DevTools'nda bulabilirsiniz > Ayarlar > Yoksayma Listesi.
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şaretlenmiştir. Bu nedenle bu klasörler, içlerindeki dosyalar ve buna benzer 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 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 Daha fazla kare göster bağlantısını tıklayabilirsiniz.
Aynı durum, kodunuzda hata ayıklama ve adım adım uygulama sırasında gördüğünüz çağrı yığınları için de geçerlidir. Çerçeveler veya paketleyiciler, Geliştirici Araçları'nı üçüncü taraf komut dosyaları hakkında bilgilendirdiğinde Geliştirici Araçları, tüm alakasız çağrı çerçevelerini otomatik olarak gizler ve adım hatası ayıklama sırasında yoksayılanlar listesindeki kodları atlar.
Dosya ağacında yoksayılanlar listesine eklenen kod
Yoksayılanlar listesindeki dosya ve klasörleri Kaynaklar panelindeki Yazılan Kod dosya ağacında gizlemek için Ayarlar'daki Kaynaklar ağaç görünümünde yoksayılanlar listesindeki kodu gizle kutusunu işaretleyin > Geliştirici Araçları'ndaki denemeler'i tıklayın.
Örnek Angular projesinde node_modules ve webpack klasörleri artık gizleniyor.
"Hızlı Aç" menüsünde yoksayılanlar listesine eklenen kod
Yoksayılanlar listesindeki kod yalnızca dosya ağacında değil, aynı zamanda "Hızlı Aç" menüsünden de gizlenir (Control+P (Linux/Windows) veya Command+P (Mac)).
Yığın izlemelerde yapılan diğer iyileştirmeler
İ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 İzleri
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önteminin içinde bir ayrılma noktası eklerken veya konsolda yazdırılan izleri incelerken, bu işlemin "kök nedeni" olan businessLogic() çağrısından bahsedilmiyor.
Bunun yerine, yalnızca görevin yürütülmesine yol açan çerçeve planlama mantığını görürsünüz. Bu göreve yönlendiren etkinlikler arasındaki nedensel bağlantıları anlamanıza yardımcı olması için yığın izlemede içerik haritası bulunmaz.
“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 Yığın Etiketleme API'si, console.createTask() adlı yeni bir console yöntemini 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 eş zamansız işlevin bağlamı arasındaki bağlantıyı oluşturur.
Yukarıdaki makeScheduler işlevine uygulandığında kod şuna dönüşür:
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() özelliğinin artık yığın izlemeye nasıl dahil edildiğine dikkat edin. Dahası, görev eskisi gibi genel requestAnimationFrame yerine tanıdık bir ada sahip someTask.
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 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 bunun bir örneği, yığın izlemede (stack trace) gördüğünüz AppComponent_Template_app_button_handleClick_1_listener şeklindedir.
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. Kaynak eşlemede, 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: DevTools ile Daha İyi Açısal Hata Ayıklama, bunun nasıl uygulanacağına ilişkin yol gösterici bilgiler sunar.