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 dari perspektif tingkat yang lebih tinggi.

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

Saat men-debug atau membuat profil aplikasi Web di DevTools, Anda saat ini dapat melihat dan men-debug versi kode yang dikompilasi ini, bukan kode yang sebenarnya Anda tulis. Sebagai seorang penulis, Anda tidak menginginkan hal ini:

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

Secara keseluruhan, Anda mungkin ingin men-debug kode Anda sendiri seperti yang Anda tulis.

Meskipun peta sumber sudah menutup kesenjangan ini, ada banyak hal yang dapat dilakukan Chrome DevTools dan ekosistem di area ini.

Mari kita lihat.

Kode yang Ditulis versus yang Di-deploy

Saat ini, ketika menavigasi hierarki file di Panel Source, Anda dapat melihat konten paket yang dikompilasi—dan sering kali diminifikasi—. File ini adalah file sebenarnya yang didownload dan dijalankan oleh 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 ditulis, bukan Kode yang Di-deploy.

Untuk mengimbanginya, Anda sekarang dapat meminta hierarki menampilkan Kode yang Ditulis. Hal ini membuat hierarki lebih mirip dengan file sumber yang bisa Anda lihat di IDE, dan file ini sekarang dipisahkan dari Kode yang Di-deploy.

Untuk mengaktifkan opsi ini di Chrome DevTools, buka Setelan > Eksperimen dan centang Kelompokkan sumber ke dalam hierarki yang Ditulis dan Di-deploy.

“Hanya kode saya”

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

Untuk mengatasi hal ini, DevTools mengaktifkan setelan tambahan secara default: Otomatis tambahkan skrip pihak ketiga yang diketahui ke daftar yang diabaikan. Anda dapat menemukannya di DevTools > Setelan > Daftar Pengabaian.

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

Mulai Angular v14.1.0, konten folder node_modules dan webpack 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 memungkinkan perilaku baru ini. Penerapan perubahan ini bergantung pada framework.

Abaikan kode yang tercantum dalam stack trace

Satu tempat di mana file yang tercantum dalam daftar diabaikan ini tidak lagi muncul adalah di pelacakan tumpukan. Sebagai penulis, Anda kini bisa melihat pelacakan tumpukan yang relevan yang lebih banyak.

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

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

Abaikan kode yang tercantum di hierarki file

Untuk menyembunyikan file dan folder yang ada dalam daftar yang diabaikan dari hierarki file Authored Code di panel Sources, centang Sembunyikan kode yang tercantum dalam tampilan hierarki sumber di Setelan > Eksperimen di DevTools.

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

Abaikan kode yang tercantum di menu “Quick Open”

Kode yang tercantum dalam daftar yang 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

Jika beberapa operasi dijadwalkan agar terjadi secara asinkron, stack trace 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 penyebutan panggilan businessLogic() yang merupakan "penyebab root" operasi ini.

Sebagai gantinya, Anda hanya akan melihat logika penjadwalan framework yang menyebabkan eksekusi tugas dan tidak ada breadcrumb dalam stack trace untuk membantu Anda mengetahui tautan kausal antar-peristiwa yang mengarah ke tugas ini.

Berkat fitur baru yang disebut “Pemberian Tag Stack Asinkron”, Anda bisa mengisahkan keseluruhan cerita dengan menautkan kedua bagian kode asinkron bersama-sama.

Asynchronous Stack Tagging API memperkenalkan metode console baru 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 hal ini, Chrome DevTools kini dapat menampilkan pelacakan tumpukan yang lebih baik.

Perhatikan bahwa businessLogic() kini disertakan dalam stack trace. Bukan cuma itu, tugas ini memiliki nama yang sudah dikenal someTask, bukan requestAnimationFrame generik 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 tampak HTML menjadi JavaScript biasa yang akhirnya berjalan di browser. Terkadang, fungsi yang dihasilkan jenis ini diberi nama yang tidak terlalu mirip — baik nama dengan huruf tunggal setelah diminifikasi atau nama yang tidak jelas atau asing bahkan jika tidak.

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

Untuk mengatasi hal ini, Chrome DevTools kini mendukung penggantian nama fungsi ini melalui peta sumber. Jika source map 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 memungkinkan perilaku baru ini. Penerapan perubahan ini bergantung pada framework.

Rencana ke depan

Berkat tambahan yang diuraikan dalam postingan ini, Chrome DevTools bisa menawarkan pengalaman proses debug yang lebih baik. Ada lebih banyak area yang ingin dijelajahi oleh 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.