Frontend Academy · Pelajaran

Alat Pembangun: Membuka dan Menggunakan DevTools

Buka Chrome DevTools, periksa elemen, baca konsol, pantau permintaan rangkaian dan edit CSS secara langsung dalam pelayar.

Pelajaran 4 daripada 413 langkah

Alat Pembangun: Membuka dan Menggunakan DevTools ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 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.

Apakah Itu DevTools Pelayar?

Setiap pelayar moden disertakan dengan set alat pembangun terbina dalam. DevTools membolehkan anda memeriksa HTML dan CSS, menyahpepijat JavaScript, memprofil prestasi, memantau permintaan rangkaian dan banyak lagi — semuanya tanpa meninggalkan pelayar.

Membuka DevTools

Buka DevTools dengan F12 (Windows/Linux) atau Cmd+Option+I (Mac). Anda juga boleh mengklik kanan mana-mana elemen dan memilih Periksa. Pintasan Ctrl+Shift+J / Cmd+Option+J membuka terus Konsol.

Panel Elemen

Panel Elemen menunjukkan pepohon DOM secara langsung. Klik mana-mana elemen untuk memilihnya dan melihat gaya terhitungnya dalam anak tetingkap Gaya. Anda boleh mengklik dua kali untuk mengedit nilai HTML atau CSS secara masa nyata — perubahan berlaku serta-merta tetapi tidak disimpan ke fail anda.

Mengedit CSS Secara Langsung

Dalam anak tetingkap Gaya, klik mana-mana nilai sifat untuk mengubahnya. Tambahkan peraturan baharu dengan butang +. Gunakan kotak pilihan togol untuk melumpuhkan peraturan. Ini ialah cara terpantas untuk mencuba CSS tanpa beralih ke penyunting anda.

Panel Konsol

Konsol menunjukkan mesej yang direkodkan, amaran dan ralat. Anda juga boleh menaip JavaScript secara terus dan melaksanakannya. Gunakan console.log(), console.warn(), console.error() dan console.table() untuk mengeluarkan data semasa penyahpepijatan.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

Panel Rangkaian

Panel Rangkaian menunjukkan setiap permintaan HTTP yang dibuat oleh halaman. Pilih permintaan untuk melihat pengepalanya, melihat pratonton badan respons dan memeriksa carta air terjun pemasaan. Tapis mengikut jenis: XHR/Ambil, JS, CSS, Imej, Fon.

Membaca Pemasaan Permintaan

Setiap permintaan menunjukkan: Beratur, Carian DNS, Sambungan Awal, SSL, Permintaan Dihantar, Menunggu (TTFB) dan Muat Turun Kandungan. TTFB (Masa Hingga Bait Pertama) mencerminkan masa respons pelayan.

Mengehadkan Rangkaian

Gunakan menu lungsur pengehad pada panel Rangkaian untuk mensimulasikan keadaan 3G perlahan atau luar talian. Ini mendedahkan isu prestasi yang tidak kelihatan pada jalur lebar pantas dan membantu anda membina pengalaman yang berfungsi untuk pengguna dengan sambungan yang lemah.

Mod Peranti

Klik ikon peranti (Ctrl+Shift+M / Cmd+Shift+M) untuk memasuki Mod Peranti. Simulasikan ruang pandang mudah alih, DPR, peristiwa sentuhan dan keadaan rangkaian. Pilih daripada pratetap seperti iPhone 14 atau tetapkan lebar tersuai.

Panel Sumber

Panel Sumber membolehkan anda membaca dan menetapkan titik henti dalam fail JavaScript anda. Titik henti menghentikan pelaksanaan supaya anda boleh memeriksa nilai pemboleh ubah, tindanan panggilan dan menelusuri kod baris demi baris dengan F10 (langkau langkah) dan F11 (masuk ke langkah).

Titik Henti dan Penyahpepijat

Tambah titik henti dengan mengklik nombor baris dalam Sumber. Apabila pelaksanaan dijeda, tuding pada pemboleh ubah untuk melihat nilainya atau taipkan pemboleh ubah itu dalam Konsol. Gunakan anak tetingkap Timbunan Panggilan untuk melihat fungsi yang membawa kepada titik ini.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Semakan Pantas

Panel DevTools yang manakah memaparkan semua permintaan HTTP yang dibuat oleh halaman, termasuk kod status dan masa tindak balasnya?

Jawab dalam pelajaran interaktif

Imbas Kembali: Kit Alat DevTools Anda

Elemen: periksa dan sunting DOM langsung. Konsol: log dan jalankan JavaScript. Rangkaian: pantau trafik HTTP. Sumber: tetapkan titik henti dan nyahpepijat. Mod Peranti: uji reka letak responsif. Menguasai keempat-empat panel ini akan mengubah aliran kerja penyahpepijatan anda.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Alat Pembangun: Membuka dan Menggunakan DevTools” percuma?

Ya — teks penuh “Alat Pembangun: Membuka dan Menggunakan DevTools” 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 “Alat Pembangun: Membuka dan Menggunakan DevTools”?

Buka Chrome DevTools, periksa elemen, baca konsol, pantau permintaan rangkaian dan edit CSS secara langsung dalam pelayar. 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 4 daripada 4.

Berapa lamakah pelajaran “Alat Pembangun: Membuka dan Menggunakan DevTools” 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

DNS dan HTTP Pelayar: Kitar Hayat Permintaan
HTML, CSS dan JavaScript: Tugas Setiap Lapisan
Cara Halaman Dipaparkan: Penghurai DOM CSSOM, Susun Atur dan Cat
Alat Pembangun: Membuka dan Menggunakan DevTools

← Kembali ke Frontend Academy