Ringkasan panel sumber

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Gunakan panel Sumber Chrome DevTools untuk:

Lihat file

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

Panel Halaman.

Cara panel Halaman 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.
  • Level kedua, seperti developers.google.com pada screenshot di atas, mewakili origin.
  • Tingkat ketiga, tingkat keempat, dan seterusnya, mewakili direktori dan resource yang dimuat dari asal 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 isinya di panel Editor. Anda dapat melihat semua jenis {i>file<i}. Untuk gambar, Anda akan melihat pratinjau gambar.

Melihat file di panel Editor.

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

Tooltip error sintaksis inline.

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

Mengedit CSS di panel Editor.

Agar perubahan JavaScript diterapkan, tekan Command+S (Mac) atau Control+S (Windows, Linux). DevTools tidak menjalankan kembali 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.

Mengedit JavaScript di panel Editor.

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

DevTools akan menghapus perubahan CSS dan JavaScript saat Anda memuat ulang halaman. Lihat Menyiapkan Ruang Kerja 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 Console untuk memasukkan library jQuery ke halaman, agar Anda dapat menjalankan perintah jQuery dari Console:

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 Snippet dan menjalankannya dengan beberapa klik tombol, kapan pun Anda membutuhkannya. DevTools menyimpan Snippet ke sistem file Anda. Misalnya, periksa Snippet yang menyisipkan library jQuery ke halaman.

Snippet yang menyisipkan library jQuery ke halaman.

Untuk menjalankan Snippet:

  • Buka file di panel Snippets, lalu klik Run Tombol Run. pada panel tindakan di bagian bawah.
  • Buka Command Menu, hapus karakter >, ketik !, ketik nama Snippet Anda, 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 alat proses debug Chrome DevTools. Ide umumnya adalah menetapkan titik henti sementara, yang merupakan tempat penghentian yang disengaja dalam kode Anda, lalu melanjutkan eksekusi kode, baris demi baris.

Menjeda pada titik henti sementara.

Saat menjalankan kode, Anda dapat melihat dan mengubah nilai semua properti dan variabel yang saat ini ditetapkan, menjalankan JavaScript di Konsol, dan lainnya.

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

Fokus hanya pada kode Anda

Chrome DevTools memungkinkan Anda fokus 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:

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

Untuk mempelajari lebih lanjut, lihat:

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. Pada dasarnya, hal ini memungkinkan Anda menggunakan DevTools sebagai editor kode.

Lihat Mengedit File dengan Ruang Kerja untuk memulai.