Ringkasan panel sumber

Kayce Basques

Sofia Emelianova

Gunakan panel Sources Chrome DevTools untuk:

• Melihat file.
• Edit CSS dan JavaScript.
• Buat dan simpan Snippets JavaScript, yang dapat Anda jalankan di halaman mana pun. Cuplikan adalah mirip dengan bookmarklet.
• Men-debug JavaScript.
• Siapkan Workspace, sehingga perubahan yang Anda lakukan di DevTools disimpan ke kode di file Anda sistem file.

Lihat file

Gunakan panel Page untuk melihat semua resource yang telah dimuat halaman.

Cara panel Page diatur:

• Tingkat atas, seperti top pada screenshot di atas, mewakili frame HTML. Anda akan menemukan top di setiap halaman yang Anda kunjungi. top mewakili frame dokumen utama.
• Tingkat kedua, seperti developers.google.com pada screenshot di atas, mewakili origin.
• Tingkat ketiga, tingkat keempat, dan seterusnya, mewakili direktori dan resource yang dimuat dari origin tersebut. Misalnya, pada screenshot di atas, jalur lengkap ke resource devsite-googler-button adalah developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Klik file di panel Page untuk melihat kontennya di panel Editor. Anda dapat melihat semua jenis {i>file<i}. Untuk gambar, Anda akan melihat pratinjau gambar.

Catatan: Perlu diketahui bahwa panel Halaman hanya mencantumkan stylesheet yang dimuat dan di-deploy.

Edit CSS dan JavaScript

Gunakan panel Editor untuk mengedit CSS dan JavaScript. DevTools memperbarui halaman untuk menjalankan kode baru Anda.

Editor juga membantu Anda melakukan debug. Misalnya, hasil ini menggarisbawahi dan menampilkan tooltip error inline di samping error sintaksis dan masalah lainnya, seperti pernyataan @import dan url() CSS yang gagal, serta atribut href HTML dengan URL yang tidak valid.

Jika mengedit background-color elemen, Anda akan melihat bahwa perubahan telah diterapkan segera.

Agar perubahan JavaScript diterapkan, tekan Command+S (Mac) atau Control+S (Windows, Linux). DevTools tidak menjalankan ulang skrip, jadi satu-satunya perubahan JavaScript yang berlaku adalah perubahan yang Anda buat di dalam fungsi. Misalnya, perhatikan bagaimana console.log('A') tidak berjalan, sedangkan console.log('B') berjalan.

Jika DevTools menjalankan ulang seluruh skrip setelah melakukan perubahan, teks A akan dicatat dalam log ke Konsol.

DevTools menghapus perubahan CSS dan JavaScript saat Anda memuat ulang halaman. Lihat Menyiapkan Workspace untuk mempelajari cara menyimpan perubahan pada sistem file Anda.

Membuat, menyimpan, dan menjalankan Cuplikan

Cuplikan adalah skrip yang dapat Anda jalankan di halaman mana pun. Bayangkan Anda berulang kali mengetik kode berikut di Konsol, untuk memasukkan library jQuery ke halaman, sehingga Anda dapat menjalankan perintah jQuery dari Konsol:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Sebagai gantinya, Anda dapat menyimpan kode ini di Snippet dan menjalankannya dengan beberapa klik tombol, kapan saja sehingga Anda memerlukannya. DevTools menyimpan Cuplikan ke sistem file Anda. Misalnya, periksa Snippet yang menyisipkan library jQuery ke halaman.

Untuk menjalankan Snippet:

• Buka file di panel Snippets, lalu klik Run pada panel tindakan di bagian bawah.
• Buka Menu Perintah, hapus karakter >, ketik !, ketik nama Snippet, lalu tekan Enter.

Lihat Menjalankan Cuplikan Kode dari Halaman Mana Pun untuk mempelajari lebih lanjut.

JavaScript Debug

Daripada menggunakan console.log() untuk menyimpulkan di mana kesalahan JavaScript Anda, pertimbangkan untuk menggunakan Sebagai gantinya, alat debug Chrome DevTools. Ide umumnya adalah untuk menetapkan titik henti sementara, penghentian yang disengaja dalam kode Anda, dan kemudian menjalankan eksekusi kode, satu baris demi baris baik.

Saat Anda menjalani kode, Anda dapat melihat dan mengubah nilai semua yang saat ini ditentukan dan variabel, jalankan JavaScript di Konsol, dan banyak lagi.

Lihat Memulai dengan Proses Debug JavaScript untuk mempelajari dasar-dasar proses debug di DevTools.

Fokus hanya pada kode Anda

Catatan: Fitur berikut tersedia dari Chrome versi 106.

Chrome DevTools memungkinkan Anda berfokus hanya pada kode yang Anda tulis dengan memfilter derau yang dihasilkan oleh framework dan alat build yang Anda manfaatkan saat membangun aplikasi web.

Untuk memberi Anda pengalaman proses debug web modern, DevTools melakukan hal berikut:

• Memisahkan kode yang ditulis dan di-deploy. Untuk membantu Anda menemukan kode dengan lebih cepat, panel Sumber memisahkan kode yang Anda buat dari kode yang dipaketkan dan diminifikasi.
• Mengabaikan kode pihak ketiga yang diketahui:
  • Panel Sumber menyembunyikan sumber tersebut dari hierarki file di panel Halaman.
  • Konsol menyembunyikan frame tersebut dari stack trace.
  • Menu Open File menyembunyikan file tersebut dari hasil penelusuran.

Selain itu, jika didukung oleh framework, Call Stack di debugger dan pelacakan tumpukan di Konsol akan menampilkan histori lengkap operasi asinkron.

Untuk mempelajari lebih lanjut, lihat:

• Proses debug web modern di Chrome DevTools
• Studi Kasus: Proses Debug Angular yang Lebih Baik dengan DevTools

Siapkan Workspace

Secara default, saat Anda mengedit file di panel Sumber, perubahan tersebut hilang saat Anda memuat ulang pada halaman. Ruang kerja memungkinkan Anda untuk menyimpan perubahan yang Anda buat di DevTools ke file Anda sistem file. Pada dasarnya, hal ini memungkinkan Anda menggunakan DevTools sebagai editor kode.

Lihat Mengedit File dengan Ruang Kerja untuk memulai.