Tutorial Pembangunan Chrome Tutorial, Tips, Trik

Google Chrome adalah salah satu penyemak imbas web yang popular untuk pembangunan web, kerana ciri-ciri canggih itu. Alat Pembangun Chrome boleh sangat berguna semasa debug. Kebanyakan kita sudah tahu bahawa kita boleh mengedit CSS secara langsung menggunakan Alat Dev Chrome, tetapi terdapat lebih banyak petua yang akan kami kongsikan dengan anda hari ini.

Petua Alat Pembangunan Chrome

Terdapat banyak helah Chrome yang tidak diketahui dan tersembunyi Alat dan kami akan mencari helah yang paling berguna di kalangan mereka. Untuk membuka alat pemaju dalam Chrome, tekan F12 pada papan kekunci anda dan cuba helah berikut.

1. Cari dan Buka sebarang fail

Apabila kita melakukan pembangunan web, kita berurusan dengan banyak HTML, CSS, JS dan fail lain. Apabila kami mahu melakukan debug apa-apa, kami membuka alat Chrome Dev. Anda boleh dengan mudah mencari dan mencari fail tertentu untuk menjadikan tugas anda lebih mudah. Cuma, tekan Ctrl + P dan mulakan menaip nama fail. Ini membantu anda mencari fail tertentu dari senarai fail.

2. Cari dalam fail sumber

Dalam silap mata sebelumnya, kami dapat mengetahui bagaimana mencari fail tertentu. Anda juga boleh mencari rentetan tertentu dalam semua fail yang dimuatkan. Tekan Ctrl + Shift + F untuk mencari rentetan dalam fail. Ia juga menyokong ungkapan biasa.

3. Pergi ke baris tertentu

Setelah anda membuka sebarang fail sumber dan ingin pindah ke baris tertentu, kemudian tekan Ctrl + G dan berikan nombor baris dan tekan enter

4. Memilih Elemen DOM di dalam butang Konsol

Alat Dev juga membolehkan anda memilih elemen dalam konsol.

• $ () - Mengembalikan kejadian pertama pemilih CSS padanan.
• $$ () - Ia mengembalikan pelbagai elemen yang sepadan dengan pemilih CSS yang diberikan.

Untuk perintah konsol yang lebih banyak, tuju ke pos ini.

5. Menggunakan beberapa keretapi

Kadang-kadang, anda mahu menetapkan pelbagai karpet di tempat yang berbeza dan anda boleh melakukannya dengan mudah di alat Dev Chrome dengan memegang kekunci Ctrl dan mengklik di mana anda mahu meletakkannya. Kemudian mula menulis dan anda akan melihat yang diletakkan di pelbagai tempat yang dipilih.

6. Memelihara Log

Memelihara log membantu anda untuk mengekalkan log walaupun halaman dimuatkan. Semak pilihan di sebelah Memelihara log dalam log Konsol dan log dipelihara. Ini menunjukkan log sebelum halaman dibongkar dan berguna untuk menyiasat pepijat.

7. Gunakan pengesan kod terbina dalam

Alat Dev Chrome mempunyai kod pengesan kod terbina yang dipanggil cetakan cantik "{}". Alat pemaju menunjukkan kod diminimumkan dan tidak begitu mudah dibaca. Klik pada butang cetak yang cantik yang ditunjukkan di sebelah kiri bawah pada fail sumber yang dibuka, untuk menunjukkan fail sumber dalam format yang boleh dibaca manusia.

8. Adakah laman web anda mesra mudah alih? Semak di sini

Alat Dev Dev juga membolehkan kami menyemak sama ada tapak web adalah mesra mudah alih atau tidak. Anda boleh menyemak bagaimana laman web anda kelihatan pada pelbagai peranti. Kepala ke alat Chrome Dev dan di bawah tab Emulasi , anda boleh memfailkan pelbagai peranti. Pilih peranti yang anda mahu dan uji bagaimana laman web anda melihat peranti itu.

Untuk maklumat lanjut, lihat video berikut

9. Mengemulasi Sensor dan Lokasi Geografi

Anda bahkan boleh mencontohi sensor seperti skrin sentuh dan pecutan. Anda juga boleh meniru lokasi geografi. Untuk melakukan ini, pergi ke Emulation -> Sensors.

10. Pilih kejadian berikutnya dari perkataan semasa

Jika anda ingin menggantikan perkataan Dalam semua kejadian itu, kemudian pilih perkataan dan tekan Ctrl + D untuk memilih kejadian seterusnya perkataan yang dipilih. Yang, anda boleh mengedit perkataan itu dalam semua kejadian itu dalam satu pukulan.

11. Format Warna Alter

Hanya gunakan Shift + Klik pada pratonton warna untuk mengubah ubah antara pemformatan rgba, heksadesimal dan hsl.

12. Tambah perubahan pada fail tempatan melalui ruang kerja

Kami dapat mengedit fail sumber dan membuat beberapa perubahan dalam CSS, Java Script dan dalam fail lain dalam alat Chrome Dev. Untuk menambah perubahan ini kepada fail setempat, maka di sini tidak perlu menyalin tampal perubahan dari ruang kerja ke fail pada cakera. Alat Dev Chrome membolehkan anda memadankan fail dan mengemas kini fail setempat dengan perubahan yang telah anda lakukan dalam alat dev. Untuk mendapatkan klik kanan ini pada fail sumber di sebelah kiri pada tab Sumber dan pilih Tambah Folder ke ruang kerja.

Untuk maklumat lanjut mengenai ruang kerja, tuju ke Chrome.com.