Proses debug web modern di Chrome DevTools

Bramus

Victor Porof

Pengantar

Saat ini, penulis dapat menggunakan banyak abstraksi untuk membangun aplikasi Web mereka. Alih-alih berinteraksi langsung dengan API tingkat rendah yang disediakan Platform Web, banyak penulis memanfaatkan framework, alat build, dan compiler untuk menulis aplikasi mereka dari perspektif tingkat tinggi.

Misalnya, komponen yang dibuat di atas framework Angular ditulis dalam TypeScript dengan template HTML. Di balik layar, Angular CLI dan webpack mengompilasi semuanya ke JavaScript dan menjadi paket yang kemudian dikirimkan ke browser.

Ketika men-debug atau membuat profil aplikasi Web di DevTools, Anda saat ini akan melihat dan men-debug versi kode Anda yang dikompilasi ini, bukan kode yang sebenarnya Anda tulis. Namun, sebagai penulis, Anda tidak menginginkan hal ini:

• Anda tidak ingin men-debug kode JavaScript yang diminifikasi, tetapi ingin men-debug kode JavaScript asli Anda.
• Saat menggunakan TypeScript, Anda tidak ingin men-debug JavaScript, tetapi ingin men-debug kode TypeScript asli.
• Saat Anda menggunakan template seperti dengan Angular, Lit, atau JSX, Anda tidak selalu ingin men-debug DOM yang dihasilkan. Anda mungkin ingin men-debug komponen itu sendiri.

Secara keseluruhan, Anda mungkin ingin men-debug kode Anda sendiri saat Anda menulisnya.

Meskipun peta sumber sudah cukup mirip dengan ini, masih ada banyak hal yang dapat dilakukan Chrome DevTools dan ekosistem di area ini.

Mari kita lihat.

Kode Ditulis versus Di-deploy

Saat ini, ketika menavigasi pohon file di Panel Sumber, Anda bisa melihat konten yang dikompilasi—dan sering diminifikasi—bundel. Ini adalah file sebenarnya yang didownload dan dijalankan browser. DevTools menyebutnya sebagai Kode yang Di-deploy.

Hal ini tidak terlalu berguna dan sering kali sulit dipahami. Sebagai penulis, Anda ingin melihat dan men-debug kode yang Anda tulis, bukan Kode yang Di-deploy.

Sebagai kompensasi, sekarang Anda dapat membuat agar hierarki menampilkan Kode Penulis. Hal ini membuat hierarki lebih mirip dengan file sumber yang Anda lihat di IDE, dan file ini sekarang terpisah dari Kode yang Di-deploy.

Untuk mengaktifkan opsi ini di Chrome DevTools, buka Settings > Experiments, lalu centang Group sources into Authored and Deployed tree.

"Hanya kode saya"

Saat menggunakan dependensi atau membangun di atas framework, file pihak ketiga dapat menghalangi Anda. Biasanya, Anda hanya ingin melihat kode Anda saja, bukan kode library pihak ketiga yang ada di folder node_modules.

Sebagai penggantinya, DevTools memiliki setelan tambahan yang diaktifkan secara default: Otomatis menambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan. Anda dapat menemukannya di DevTools > Settings > Abaikan Daftar.

Dengan mengaktifkan setelan ini, DevTools akan menyembunyikan file atau folder apa pun yang telah ditandai oleh framework atau fitur build sebagai untuk diabaikan.

Mulai Angular v14.1.0, konten folder node_modules dan webpack-nya telah ditandai sebagaimana mestinya. Oleh karena itu, folder ini, file di dalamnya, dan artefak pihak ketiga lainnya tidak muncul di berbagai tempat di DevTools.

Sebagai penulis, Anda tidak perlu melakukan apa pun untuk mengaktifkan perilaku baru ini. Mengimplementasikan perubahan ini bergantung pada framework.

Kode yang tercantum dalam stack trace

Salah satu tempat file yang tercantum dalam daftar yang diabaikan ini tidak lagi muncul adalah di pelacakan tumpukan. Sebagai penulis, Anda sekarang bisa melihat pelacakan tumpukan yang lebih relevan.

Jika ingin melihat semua frame panggilan dari stack trace, Anda dapat mengklik link Show more frames.

Hal yang sama berlaku untuk stack panggilan yang Anda lihat saat melakukan proses debug dan menelusuri kode Anda. Saat framework atau bundler memberi tahu DevTools tentang skrip pihak ketiga, DevTools secara otomatis menyembunyikan semua frame panggilan yang tidak relevan dan melompat ke kode yang tercantum dalam daftar yang diabaikan saat proses debug langkah.

Kode yang dicantumkan dalam hierarki file

Untuk menyembunyikan file dan folder yang tercantum dalam daftar yang diabaikan dari hierarki file Kode yang Ditulis di panel Sumber, centang Sembunyikan kode yang dicantumkan dalam daftar yang diabaikan di tampilan hierarki sumber di Setelan > Eksperimen di DevTools.

Dalam contoh project Angular, folder node_modules dan webpack kini disembunyikan.

Kode yang dicantumkan dalam menu “Buka Cepat”

Kode yang dicantumkan dan diabaikan tidak hanya disembunyikan dari hierarki file, tetapi juga disembunyikan dari menu “Quick Open” (Control+P (Linux/Windows) atau Command+P (Mac)).

Peningkatan lainnya pada pelacakan tumpukan

Setelah membahas pelacakan tumpukan yang relevan, Chrome DevTools memperkenalkan lebih banyak peningkatan pada pelacakan tumpukan.

Stack Trace Tertaut

Ketika beberapa operasi dijadwalkan terjadi secara asinkron, pelacakan tumpukan di DevTools saat ini hanya menceritakan sebagian dari cerita.

Misalnya, berikut adalah penjadwal yang sangat sederhana dalam file framework.js fiktif:

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();

... dan cara developer dapat menggunakannya dalam kode mereka sendiri dalam file example.js:

function someTask() {
  console.trace("done!");
}

function businessLogic() {
  scheduler.schedule(someTask);
}

businessLogic();

Saat menambahkan titik henti sementara di dalam metode someTask atau saat memeriksa rekaman aktivitas yang dicetak di konsol, Anda tidak melihat panggilan businessLogic() yang merupakan “akar penyebab” operasi ini.

Sebagai gantinya, Anda hanya melihat logika penjadwalan framework yang mengarah ke eksekusi tugas dan tidak ada breadcrumb dalam stack trace untuk membantu Anda mengetahui hubungan kausal di antara peristiwa yang mengarah ke tugas ini.

Berkat fitur baru yang disebut “Async Stack Tagging”, Anda dapat menceritakan keseluruhan cerita dengan menghubungkan kedua bagian kode asinkron secara bersamaan.

Async Stack Tagging API memperkenalkan metode console baru yang bernama console.createTask(). Tanda tangan API adalah sebagai berikut:

interface Console {
  createTask(name: string): Task;
}

interface Task {
  run<T>(f: () => T): T;
}

Panggilan console.createTask() menampilkan instance Task yang nantinya dapat Anda gunakan untuk menjalankan f konten tugas.

// Task Creation
const task = console.createTask(name);

// Task Execution
task.run(f);

Tugas ini membentuk link antara konteks tempatnya dibuat dan konteks fungsi asinkron yang sedang dieksekusi.

Diterapkan ke fungsi makeScheduler dari atas, kode menjadi berikut:

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();
      }
    },
  };
}

Berkat ini, Chrome DevTools kini dapat menampilkan pelacakan tumpukan yang lebih baik.

Perhatikan bagaimana businessLogic() sekarang disertakan dalam pelacakan tumpukan. Selain itu, tugas memiliki nama someTask yang tidak asing lagi, bukan requestAnimationFrame umum seperti sebelumnya.

Frame Panggilan yang Ramah

Framework sering kali menghasilkan kode dari semua jenis bahasa template saat membuat project, seperti template Angular atau JSX yang mengubah kode yang terlihat dalam HTML menjadi JavaScript biasa yang pada akhirnya berjalan di browser. Kadang-kadang, jenis fungsi yang dihasilkan ini diberi nama yang tidak terlalu ramah — baik nama huruf tunggal setelah diminifikasi atau nama yang tidak jelas atau asing bahkan ketika mereka sebenarnya tidak.

Dalam project contoh, contohnya adalah AppComponent_Template_app_button_handleClick_1_listener yang Anda lihat di stack trace.

Untuk mengatasinya, Chrome DevTools kini mendukung penggantian nama fungsi-fungsi ini melalui peta sumber. Jika peta sumber memiliki entri nama untuk awal cakupan fungsi, frame panggilan harus menampilkan nama tersebut dalam stack trace.

Sebagai penulis, Anda tidak perlu melakukan apa pun untuk mengaktifkan perilaku baru ini. Mengimplementasikan perubahan ini bergantung pada framework.

Rencana ke depan

Berkat penambahan yang diuraikan dalam postingan ini, Chrome DevTools dapat menawarkan pengalaman proses debug yang lebih baik kepada Anda. Ada lebih banyak area yang ingin dijelajahi tim. Khususnya, cara meningkatkan pengalaman pembuatan profil di DevTools.

Tim Chrome DevTools mendorong penulis framework untuk mengadopsi kemampuan baru ini. Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools menawarkan panduan tentang cara menerapkannya.