Fondasi: Komputermu, Web, dan Alat Kerjamu · 7/7
Editor dan DevTools browser
Dua jendela yang akan kamu tatap bertahun-tahun. Kuasai bagian yang menghemat waktumu berjam-jam.
Baca 20 menit
Setelah pelajaran ini kamu bisa
- Mencari di seluruh codebase, bukan cuma di file yang terbuka
- Melompat ke definisi dan menemukan semua pemakaian sebuah simbol
- Memakai breakpoint debugger alih-alih console.log
- Memeriksa sebuah elemen, sebuah network request, dan sebuah cookie tersimpan
Dua jendela ini akan mengambil sebagian besar hidup kerjamu. Menguasai sepuluh shortcut di masing-masingnya adalah satu jam paling menguntungkan yang kamu habiskan bulan ini.
Editor kamu
| Aksi | Kenapa penting |
|---|---|
| Cari di semua file | Satu-satunya cara menjawab "ini dipakai di mana?" di codebase nyata |
| Go to definition | Ikuti sebuah function ke tempat ia ditulis, bukan menebak |
| Find all references | Sebelum mengubah function, lihat semua pemanggilnya. Kebiasaan ini yang mencegah kerusakan. |
| Buka file berdasarkan nama | Lebih cepat dari pohon folder mana pun begitu proyek punya 300 file |
| Rename symbol | Mengganti nama di semua pemakaian dengan aman, tidak seperti find-and-replace |
| Multi-cursor | Edit sepuluh baris serupa sekaligus |
DevTools browser
- Elements — DOM yang hidup, bukan kode sumbermu. Edit style di sini untuk bereksperimen; tidak ada yang tersimpan.
- Console — error, dan prompt JavaScript yang jalan di konteks halaman itu sendiri.
- Network — setiap request, status, ukuran, timing, header, dan body-nya. Tempat kamu memastikan apa yang sebenarnya dikirim server.
- Sources — kodenya, lengkap dengan breakpoint.
- Application — cookie, localStorage, sessionStorage. Tempat kamu memeriksa apakah cookie session ada dan apakah ia
HttpOnly.
Breakpoint lebih baik dari console.log
console.log menunjukkan satu nilai yang kebetulan kamu pikir perlu dicetak. Breakpoint menjeda eksekusi dan membiarkanmu memeriksa *semua* variable dalam scope, menelusuri call stack ke atas, dan maju satu baris sekaligus. Saat sebuah bug membingungkan, bedanya sangat besar.
- Buka Sources, temukan file-mu, klik nomor baris untuk memasang breakpoint.
- Picu kodenya. Eksekusi berhenti di sana.
- Arahkan kursor ke variable mana pun untuk melihat nilainya; pakai panel Scope untuk melihat semuanya.
- Step over (baris berikutnya), step into (masuk ke dalam function), atau resume.
- Baca panel Call Stack untuk melihat siapa yang memanggil ini.
Tambahkan `debugger;` di baris sebelum log, lalu buka DevTools browser dan tekan Jalankan. Eksekusi akan berhenti dan kamu bisa memeriksa `total`.
Hasil
Tekan Jalankan untuk melihat hasilnya.
Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.
Tugas praktik
Di proyek ini, pakai editor untuk menemukan setiap file yang menyebut negotiateLocale. Lalu pakai "go to definition" untuk membuka tempat ia ditulis, dan baca isinya. Terakhir, buka halaman ini di DevTools, temukan Network request-nya, dan lihat header response-nya.
Hasil yang diharapkan
Kamu seharusnya menemukan definisinya plus pemakaiannya di proxy dan di sebuah file test.