Ringkasan panel sumber

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

Ringkasan

Panel Sumber memungkinkan Anda melakukan hal berikut:

Buka panel Sumber

Untuk membuka panel Sumber, 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 dimuat halaman.

Tab Halaman.

Cara tab Halaman diatur:

  • Tingkat teratas, 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 asal.
  • 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 tab Halaman untuk melihat kontennya di tab Editor. Anda dapat melihat jenis file apa pun. Untuk gambar, Anda melihat pratinjau gambar.

Melihat file di tab Editor.

Mengedit CSS dan JavaScript

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

Editor juga membantu Anda melakukan debug. Misalnya, alat ini menandai 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 tidak valid.

Tooltip error sintaksis inline.

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

Mengedit CSS di tab 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 yang Anda buat di dalam fungsi. Misalnya, perhatikan bagaimana console.log('A') tidak berjalan, sedangkan console.log('B') berjalan.

Mengedit JavaScript di tab Editor.

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

DevTools menghapus perubahan CSS dan JavaScript 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 jika Anda berulang kali mengetikkan 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 Cuplikan ke sistem file Anda. Misalnya, periksa Cuplikan yang menyisipkan library jQuery ke dalam halaman.

Cuplikan yang menyisipkan library jQuery ke halaman.

Untuk menjalankan Cuplikan:

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

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

Men-debug JavaScript

Daripada menggunakan console.log() untuk menyimpulkan di mana kesalahan JavaScript Anda, pertimbangkan untuk menggunakan alat proses debug Chrome DevTools. Gagasan umumnya adalah menetapkan titik henti sementara, yang merupakan tempat penghentian intensional dalam kode, lalu memproses eksekusi kode Anda, satu baris sekaligus.

Menjeda di titik henti sementara.

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

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

Hanya berfokus pada kode Anda

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

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

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

Untuk mempelajari lebih lanjut, lihat:

Menyiapkan Workspace

Secara default, saat Anda mengedit file di panel Sumber, perubahan tersebut akan hilang saat Anda memuat ulang halaman. Workspace memungkinkan Anda menyimpan perubahan yang Anda buat di DevTools ke sistem file Anda. Pada dasarnya, dengan **Workspaces** Anda bisa menggunakan DevTools sebagai editor kode.

Lihat Mengedit File dengan Ruang Kerja untuk memulai.