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

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

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ı'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 > Denemeler'i tıklayın ve Kaynakları Yazılan ve Dağıtılan ağaçlar halinde gruplandır'ı işaretleyin.

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

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

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

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.

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

Hata ayıklama sırasında Geliştirici Araçları Kaynakları Hata Ayıklayıcısının ekran görüntüsü.

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.

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

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

Chrome Geliştirici Araçları'ndaki dosya ağacında Yazılan Kodun gösterildiği ancak node_modules gösterilmeyen ekran görüntüsü.

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

"Hızlı Aç" menüsünün yer aldığı Geliştirici Araçları ekran görüntüsü.

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.

Ne zaman planlandığı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 ö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.

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

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.

Otomatik olarak oluşturulan bir işlev adını içeren yığın izlemenin ekran görüntüsü.

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.