Tutorial Pembangunan Chrome Tutorial, Tips, Trik

Isi kandungan:

Video: Tutorial Pembangunan Chrome Tutorial, Tips, Trik

Video: Tutorial Pembangunan Chrome Tutorial, Tips, Trik
Video: 100 Coolest Classic Campers and Vintage Restorations 2024, Mac
Tutorial Pembangunan Chrome Tutorial, Tips, Trik
Tutorial Pembangunan Chrome Tutorial, Tips, Trik
Anonim

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

Image
Image

Petua Alat Pembangunan Chrome

Terdapat banyak helah alat Chrome Dev yang tidak diketahui dan tersembunyi dan kami akan mencari helah 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. Hanya, tekan Ctrl + P dan mulakan menaip nama fail. Ini membantu anda mencari fail tertentu dari senarai fail.

Image
Image

2. Cari dalam fail sumber

Dalam helah sebelum ini, kami mengetahui cara mencari fail tertentu. Anda juga boleh mencari rentetan tertentu dalam semua fail yang dimuatkan. Tekan Ctrl + Shift + F untuk mencari tali dalam fail. Ia juga menyokong ungkapan biasa.

Image
Image

3. Pergi ke barisan tertentu

Sebaik sahaja anda membuka sebarang fail sumber dan mahu pindah ke baris tertentu, kemudian tekan Ctrl + G dan berikan nombor baris dan tekan enter.

Image
Image

4. Memilih DOM Unsur dalam tab 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 arahan konsol yang lebih banyak, pergi ke pos ini.
Untuk arahan konsol yang lebih banyak, pergi ke pos ini.

5. Menggunakan pelbagai karet

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

Image
Image

6. Memelihara Log

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

Image
Image

7. Gunakan pengesan kod terbina dalam

Alat Dev Chrome mempunyai pengesan kod terbina dalam yang dipanggil cetak 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.

Image
Image

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

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

Untuk maklumat lanjut, lihat video berikut.
Untuk maklumat lanjut, lihat video berikut.

9. Mengemulasi Sensor dan Lokasi Geografi

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

Image
Image

10. Pilih kejadian seterusnya perkataan semasa

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

Image
Image

11. Mengubah Format Warna

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

Image
Image

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, klik pada fail sumber di sebelah kiri pada Sumber tab dan pilih Tambah Folder ke ruang kerja.

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

Disyorkan: