Untuk apa Chrome DevTools?

Chrome DevTools adalah set alat pembuatan laman web dan penyahpepijatan yang dibina di dalam Google Chrome. Sudah tentu, kita juga boleh menggunakannya dalam versi sumber terbuka; Kromium.

Anda boleh mengakses alat Chrome untuk pembangun dengan menekan kombinasi kunci Ctrl + Shift + I, juga dengan mengarahkan kursor ke elemen dan mengklik kanan pada Inspect.

Komponen

Apabila kami membuka Chrome DevTools, kami melihat bahawa anda munculpanel n di sebelah kanan halaman yang sedang kami layari. Untuk bahagiannya, panel ini eIa dibahagikan kepada tab yang sesuai dengan setiap alat. Pada gilirannya, alat dibahagikan kepada beberapa bahagian.
Bahagian tersebut adalah:

• Elemen: Menunjukkan pelbagai komponen halaman.
• Konsol: Membolehkan anda menjalankan diagnostik semasa pengembangan atau berinteraksi dengan kod Javascript seperti yang anda lakukan dengan terminal Linux.
• Sumber: Memudahkan debug kod Javascript dan bekerja dengan fail tempatan.
• Rangkaian: Membantu memantau dan meningkatkan prestasi halaman.
• Garis Masa: Membolehkan rakaman dan penerokaan pelbagai peristiwa yang berlaku semasa lawatan ke laman web.
• Aplikasi: Menyiasat semua sumber yang dimuat; antara lain, pangkalan data IndexedDB atau Web SQL, penyimpanan tempatan dan sesi, kuki, cache aplikasi, gambar, fon, dan helaian gaya.
• Keselamatan: Mengesan masalah keselamatan dalam kod.

Mari lihat untuk apa kita boleh menggunakan Chrome DevTools

Betulkan perkara yang tidak berfungsi

Perkara itu berlaku kepada setiap pembangun. Tuliskan kodnya, sahkan bahawa tidak ada kesalahan, namun pada saat kebenaran halaman tidak berfungsi sebagaimana mestinya. Alat Konsol menunjukkan kesalahan yang berlaku pada masa pelaksanaan.

Kurangkan masa memuatkan

Sekiranya halaman memerlukan masa yang lama untuk dimuat, pengguna akan bosan dan pergi ke laman web lain. Nasib baik, era laman web Flash dan pengenalan animasi mereka sudah berakhir. Bagaimanapun tab Rangkaian Chrome DevTools memudahkan untuk mengetahui elemen mana yang menunda beban. Kita boleh mengulangi ujian untuk kelajuan sambungan yang berbeza.

Ubah kod

Di tab Elemen kita boleh lihat elemen halaman, kod html yang berkaitan dan sifat css. Kita juga boleh mengubahnya.

Kita boleh mengedit teks halaman menggunakan perintah

document.designMode = 'on';

Cuba saiz skrin yang berbeza

Tablet, telefon pintar, TV pintar, komputer desktop. Senarai peranti yang kami gunakan untuk melayari Internet semakin bertambah. Dengan Chrome DevTools kita dapat menguji sama ada halaman kelihatan bagus dengan saiz yang berbeza.

penandaarasan

Dalam Pengurusan, istilah penanda aras bermaksud belajar dari amalan terbaik bagi mereka yang melakukan perkara yang sama seperti kita. Dengan Chrome DevTolls, jika kita suka reka bentuk laman web, kita boleh lihat lembaran gaya kod html dan css dan salin ke laman web kami.

Mendapatkan Chrome DevTools

Chrome DevTools tersedia di penyemak imbas Google Chrome dan Chromium. Chromium berada di repositori sebaran utama. Ia juga boleh dipasang dari kedai Ketapkan. Untuk Google chrome anda boleh datang sini. dalam format DEB dan RPM