Chrome DevTools: Elements Console Network
Navigasi panel Elements, Console dan Network untuk memeriksa gaya, menyahpepijat ralat JavaScript dan memantau permintaan HTTP.
Chrome DevTools: Elements Console Network ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Membuka DevTools dengan Cekap
Klik kanan mana-mana elemen dan pilih Inspect untuk membuka DevTools dengan elemen tersebut dipilih. F12 menogol panel. Cmd+Shift+C (Mac) atau Ctrl+Shift+C (Windows) memasuki mod pemeriksaan secara terus tanpa membuka panel penuh.
Panel Elements — Pemeriksa DOM
Panel Elements memaparkan pepohon DOM langsung yang telah dihuraikan — bukannya sumber HTML mentah. Panel ini mencerminkan pengubahsuaian JavaScript. Tuding pada nod untuk menyerlahkannya pada halaman. Klik dua kali untuk mengedit HTML sebaris.
Panel Styles dan Computed
Apabila elemen dipilih, panel Styles memaparkan semua peraturan CSS yang digunakan, disusun mengikut kekhususan. Peraturan yang dipangkah telah ditindih. Panel Computed memaparkan nilai akhir yang dikira bagi setiap sifat.
Memaksa Keadaan Elemen
Klik butang :hov dalam panel Styles untuk memaksa keadaan CSS seperti :hover, :focus, :active atau :visited. Periksa gaya tuding tanpa perlu mengekalkan kursor pada kedudukan yang tepat.
Penerap Model Kotak
Panel Computed memaparkan gambar rajah model kotak interaktif: kandungan, padding, sempadan dan margin. Tuding pada setiap kawasan untuk melihat nilainya. Klik untuk mengedit nilai margin dan padding secara langsung.
Asas Console — Pembalakan dan Menjalankan Kod
Console memaparkan ralat, amaran dan catatan. Taip mana-mana ungkapan JavaScript dan tekan Enter untuk menilainya terhadap halaman langsung. Gunakan Console sebagai REPL interaktif untuk menguji cebisan kod dengan serta-merta.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Kaedah API Console
Selain console.log: console.warn() (amaran kuning), console.error() (merah), console.table() (memaparkan tatasusunan atau objek sebagai jadual), console.group() / console.groupEnd() untuk output berkumpulan, dan console.time() untuk mengukur masa.
Gambaran Keseluruhan Panel Network
Setiap permintaan HTTP (HTML, JS, CSS, imej, XHR, Fetch) muncul sebagai satu baris. Lajur memaparkan kaedah, status, saiz dan masa. Klik satu baris untuk melihat butiran penuh permintaan dan respons.
Menapis Permintaan Network
Gunakan bar penapis untuk mencari mengikut URL atau menapis mengikut jenis: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. Penapis XHR/Fetch paling berguna apabila menyahpepijat panggilan API daripada JavaScript.
Memeriksa Permintaan dan Respons
Pilih satu permintaan network untuk melihat: Headers (permintaan dan respons), Preview (JSON/HTML berformat), Response (badan mentah), Timing (fasa sambungan). Tab Payload memaparkan parameter badan POST.
Pendikitan — Mensimulasikan Network Perlahan
Klik menu lungsur pendikitan (lalai: No throttling) untuk mensimulasikan Slow 3G, Fast 3G atau Offline. Kotak pilihan Disable cache menghalang pelayar daripada menggunakan sumber yang dicache semasa pengujian.
Semakan Pantas
Di manakah dalam Chrome DevTools anda boleh melihat semua peraturan CSS yang digunakan pada elemen terpilih, termasuk peraturan yang telah ditindih?
Imbas Kembali: Panel Chrome DevTools
Elements: periksa dan edit DOM serta CSS langsung. Paksa keadaan pseudo untuk memeriksa gaya tuding. Console: catat, nyahpepijat dan jalankan JS secara langsung. Network: pantau semua permintaan HTTP, periksa pengepala dan respons, serta lakukan pendikitan untuk mensimulasikan sambungan perlahan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Chrome DevTools: Elements Console Network” percuma?
Ya — teks penuh “Chrome DevTools: Elements Console Network” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Chrome DevTools: Elements Console Network”?
Navigasi panel Elements, Console dan Network untuk memeriksa gaya, menyahpepijat ralat JavaScript dan memantau permintaan HTTP. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Chrome DevTools: Elements Console Network” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Chrome DevTools: Elements Console Network
- VSCode: Sambungan, Emmet dan Pintasan
- Persediaan Prettier dan ESLint
- Keserasian Pelayar dan caniuse.com