Ringkasan Panel Sumber

Gunakan panel Sources Chrome DevTools untuk:

Melihat file

Gunakan panel Network untuk melihat resource yang dimuat halaman.

Panel Network
Gambar 1. Panel Network

Bagaimana panel Network diatur:

  • Tingkat atas, seperti top dalam Gambar 1, mewakili frame HTML. Anda akan menemukan top di setiap halaman yang Anda kunjungi. top mewakili frame dokumen utama.
  • Tingkat kedua, seperti developers.google.com dalam Gambar 1, mewakili asal.
  • Tingkat ketiga, tingkat keempat, dan seterusnya, mewakili direktori dan resource yang dimuat dari asal tersebut. Misalnya, dalam Gambar 1 lokasi lengkap ke resource devsite-googler-button adalah developers.google.com/_static/f6e16de9fa/css/devsite-googler-button

Klik file di panel Network untuk melihat konten di dalamnya di panel Editor. Anda dapat melihat berbagai jenis file. Untuk gambar, Anda melihat pratinjau gambar.

Melihat file di panel Editor
Gambar 2. Melihat konten jquery-bundle.js di panel Editor

Edit CSS dan JavaScript

Gunakan panel Editor untuk mengedit CSS dan JavaScript. DevTools mengupdate halaman untuk menjalankan kode baru Anda. Misalnya, jika Anda mengedit background-color elemen, Anda akan melihat perubahan tersebut langsung berlaku.

Mengedit CSS di panel Editor
Gambar 3. Mengedit CSS di panel Editor untuk mengubah warna latar belakang sebuah elemen dari biru menjadi merah

Perubahan CSS akan segera berlaku, tidak perlu menyimpan. 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, di Gambar 4, perhatikan bagaimana console.log('A') tidak berjalan, sedangkan console.log('B') berjalan. Jika DevTools menjalankan kembali seluruh skrip setelah melakukan perubahan, maka teks A akan dicatat ke Console.

Mengedit JavaScript di panel Editor
Gambar 5. Mengedit JavaScript di panel Editor

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 Snippet

Snippet adalah skrip yang dapat Anda jalankan di halaman mana pun. Bayangkan jika Anda harus berulang kali mengetikkan kode berikut di Console untuk memasukkan library jQuery ke halaman, sehingga 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.

Snippet yang memasukkan library jQuery ke halaman.
Gambar 6. Snippet yang memasukkan library jQuery ke halaman

Untuk menjalankan Snippet:

  • Buka file melalui panel Snippets, dan klik Run! Tombol Jalankan.
  • Buka Command Menu, hapus karakter >, ketik !, ketik nama Snippet Anda, lalu tekan Enter.

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

Debug JavaScript

Daripada menggunakan console.log() untuk menyimpulkan di mana kesalahan JavaScript Anda, pertimbangkan menggunakan fitur proses debug Chrome DevTools sebagai gantinya. Gagasan umumnya adalah menetapkan breakpoint, yang merupakan tempat penghentian intensional dalam kode, lalu memproses eksekusi kode Anda, satu baris sekaligus. Saat memproses kode, Anda dapat melihat dan mengubah nilai dari semua properti dan variabel yang ditetapkan saat ini, menjalankan JavaScript di Console, dan masih banyak lagi.

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

Proses Debug JavaScript
Gambar 7. Proses Debug JavaScript

Menyiapkan Workspace

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

Lihat Menyiapkan Persistensi dengan DevTools Workspace untuk memulai.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.