Chrome Geliştirici Araçları'nda modern web hata ayıklaması

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.

Dağıtılan kodu gösteren Chrome Geliştirici Araçları'ndaki dosya ağacının ekran görüntüsü.

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ı'ndaki dosya ağacının, yazılan kodu gösteren ekran görüntüsü.

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.

DevTools'un Ayarları'nın ekran görüntüsü.

"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.

DevTools'un Ayarları'nın ekran görüntüsü.

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.

Geliştirici Araçları'ndaki bir yığın izlemenin ekran görüntüsü.

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.

Hata ayıklama sırasında DevTools Kaynak Hata Ayıklama Aracı'nın ekran görüntüsü.

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.

Geliştirici Araçları ayarlarının ekran görüntüsü.

Örnek Angular projesinde node_modules ve webpack klasörleri artık gizlidir.

Chrome Geliştirici Araçları'ndaki dosya ağacının ekran görüntüsü. Yazılı Kod'u gösterir ancak node_modules'i göstermez.

"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.

"Hızlı Aç" menüsünü içeren DevTools ekran görüntüsü.

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.

Ne zaman programlandığıyla ilgili bilgi vermeyen ve eş zamansız olarak yürütülen bazı kodların yığın izlemesi.

"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.

Eş zamansız olarak yürütülen bazı kodların yığın izlemesi (stack trace), planlandığı tarihle ilgili bilgiler.

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.

Otomatik olarak oluşturulmuş bir işlev adının yer aldığı yığın izleme ekran görüntüsü.

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.