Ringkasan panel sumber

Kayce Basques

Sofia Emelianova

Gunakan panel Sumber untuk melihat dan mengedit resource situs Anda, seperti stylesheet, file JavaScript, dan gambar.

Ringkasan

Panel Sumber memungkinkan Anda melakukan hal berikut:

• Lihat file.
• Edit CSS dan JavaScript.
• Buat dan simpan Cuplikan JavaScript, yang dapat Anda jalankan di halaman mana pun. Cuplikan mirip dengan bookmarklet.
• Debug JavaScript.
• Siapkan Ruang Kerja, sehingga perubahan yang Anda buat di DevTools akan disimpan ke kode di sistem file Anda.

Membuka panel Sumber

Untuk membuka panel Sources, ikuti langkah-langkah berikut:

1. Buka DevTools.
2. Buka Menu perintah dengan menekan:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Mulai ketik sources, pilih Tampilkan panel Sumber, lalu tekan Enter.

Atau, di sudut kanan atas, pilih more_vert Opsi lainnya > Alat lainnya > Sumber.

Lihat file

Klik tab Halaman untuk melihat semua resource yang telah dimuat halaman.

Cara tab Halaman diatur:

• Tingkat teratas, seperti top pada screenshot di atas, merepresentasikan frame HTML. Anda akan menemukan top di setiap halaman yang Anda kunjungi. top merepresentasikan frame dokumen utama.
• Level kedua, seperti developers.google.com pada screenshot di atas, merepresentasikan origin.
• Level ketiga, level keempat, dan seterusnya, merepresentasikan 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 tab Halaman untuk melihat isinya di tab Editor. Anda dapat melihat semua jenis file. Untuk gambar, Anda akan melihat pratinjau gambar.

Mengedit CSS dan JavaScript

Klik tab Editor untuk mengedit CSS dan JavaScript. DevTools memperbarui halaman untuk menjalankan kode baru Anda.

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

Jika Anda mengedit background-color elemen, Anda akan melihat bahwa perubahan tersebut langsung diterapkan.

Agar perubahan JavaScript diterapkan, tekan Command+S (Mac) atau Control+S (Windows, Linux). DevTools tidak menjalankan ulang skrip, sehingga satu-satunya perubahan JavaScript yang diterapkan 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, maka teks A akan dicatat ke Konsol.

DevTools menghapus perubahan CSS dan JavaScript Anda saat Anda memuat ulang halaman. Lihat Menyiapkan Workspace untuk mempelajari cara menyimpan perubahan ke 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 menyisipkan 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 dalam Cuplikan dan menjalankannya dengan beberapa klik tombol, kapan saja Anda membutuhkannya. DevTools menyimpan Snippet ke sistem file Anda. Misalnya, periksa Cuplikan yang menyisipkan library jQuery ke dalam halaman.

Untuk menjalankan Cuplikan:

• Buka file di tab Cuplikan, lalu klik Jalankan di panel tindakan di bagian bawah.
• Buka Menu Perintah, hapus karakter >, ketik !, ketik nama Cuplikan Anda, lalu tekan Enter.

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

Men-debug JavaScript

Daripada menggunakan console.log() untuk menyimpulkan letak kesalahan JavaScript Anda, sebaiknya gunakan alat proses debug Chrome DevTools. Ide umumnya adalah menetapkan titik henti sementara, yang merupakan tempat penghentian yang disengaja dalam kode Anda, lalu menelusuri eksekusi kode Anda, satu baris dalam satu waktu.

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

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

Hanya berfokus pada kode Anda

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

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

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

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

Untuk mempelajari lebih lanjut, lihat:

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

Menyiapkan Ruang Kerja

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

Lihat Mengedit File dengan Ruang Kerja untuk memulai.