Google Chrome adalah salah satu browser web populer untuk pengembangan web, karena fitur-fiturnya yang canggih. Alat Pengembang Chrome^{(Chrome Developer Tools)} bisa sangat berguna saat debugging. Sebagian besar dari kita sudah tahu bahwa kita dapat mengedit CSS langsung menggunakan Chrome Dev Tools , tetapi ada lebih banyak kiat yang akan kami bagikan kepada Anda hari ini.

Kiat Alat Pengembangan Chrome

Ada banyak trik yang tidak diketahui dan tersembunyi dari Alat Pengembang Chrome^{(Chrome Dev Tools)} dan kami akan melihat trik yang paling berguna di antara mereka. Untuk membuka alat pengembang di Chrome , tekan F12 di keyboard Anda dan coba trik berikut.

1. Temukan dan Buka file apa saja

Saat kami melakukan pengembangan web, kami menangani banyak file HTML , CSS , JS, dan lainnya. ^(CSS)Saat kami ingin men-debug apa pun, kami membuka alat Chrome Dev . Anda dapat dengan cepat mencari dan menemukan file tertentu untuk mempermudah pekerjaan Anda. Cukup^(Just) , tekan Ctrl + P dan mulailah mengetik nama file. Ini membantu Anda menemukan file tertentu dari daftar file.

2. Cari di dalam file sumber

Dalam trik sebelumnya, kami mengetahui cara mencari file tertentu. Anda bahkan dapat mencari string tertentu di semua file yang dimuat. Tekan Ctrl + Shift + F untuk mencari string dalam file. Ini juga mendukung ekspresi reguler.

3. Pergi ke baris tertentu

Setelah Anda membuka file sumber apa pun dan ingin pindah ke baris tertentu, tekan Ctrl + G dan berikan nomor baris dan tekan enter.

4. Memilih Elemen DOM di tab Konsol^(Console)

Dev Tools juga memungkinkan Anda memilih elemen di konsol.

• $() – Mengembalikan^(Returns) kemunculan pertama dari pemilih CSS yang cocok.^(CSS)
• $$() – Ini mengembalikan array elemen yang cocok dengan pemilih CSS yang diberikan.^(CSS)

Untuk perintah konsol lainnya, buka posting ini.^{(this post.)}

5. Manfaatkan beberapa tanda sisipan

Terkadang, Anda ingin mengatur beberapa tanda sisipan di tempat yang berbeda dan Anda dapat melakukannya dengan mudah di alat Dev Chrome^{(Chrome Dev)} dengan menahan tombol Ctrl dan mengklik di mana Anda ingin meletakkannya. Kemudian mulailah menulis dan Anda akan melihat bahwa ditempatkan di berbagai tempat yang dipilih.

6. Simpan Log

Pertahankan^(Preserve) log membantu Anda mempertahankan log meskipun halaman dimuat. Centang opsi di samping Pertahankan log^{(Preserve log )} di log Konsol^(Console) dan log dipertahankan. Ini menampilkan log sebelum halaman dibongkar dan membantu untuk menyelidiki bug.

7. Gunakan kode kecantikan bawaan

Chrome Dev Tools memiliki code beautifier bawaan yang disebut pretty print “{}” . Alat pengembang menunjukkan kode yang diperkecil dan tidak begitu mudah dibaca. Klik^(Click) tombol cetak cantik yang ditampilkan di kiri bawah pada file sumber terbuka, untuk menampilkan file sumber dalam format yang dapat dibaca manusia.

8. Apakah situs web Anda ramah seluler? Cek disini

Chrome Dev Tools juga memungkinkan kami untuk memeriksa apakah situs web mobile-friendly atau tidak. Anda dapat memeriksa tampilan situs web Anda di berbagai perangkat. Buka alat Chrome Dev dan di bawah tab Emulation , Anda dapat mengajukan berbagai perangkat. ^{(Emulation )}Pilih perangkat yang Anda inginkan dan uji tampilan situs web Anda di perangkat itu.

Untuk lebih jelasnya simak video berikut ini.

9. Meniru Sensor dan Lokasi Geografis^{(Geographical Location)}

Anda bahkan dapat meniru sensor seperti layar sentuh dan akselerometer. Anda bahkan dapat meniru lokasi geografis. Untuk melakukan ini, Emulation -> Sensors.

10. Pilih kemunculan berikutnya dari kata saat ini

Jika Anda ingin mengganti kata Di semua kemunculannya, pilih kata tersebut dan tekan Ctrl + D untuk memilih kemunculan berikutnya dari kata yang dipilih. Kemudian, Anda dapat mengedit kata itu dalam semua kemunculannya dalam satu bidikan.

11. Ubah Format Warna

Cukup gunakan Shift + Click pada pratinjau warna untuk mengubah perubahan antara format rgba, heksadesimal, dan hsl.

12. Tambahkan^(Add) perubahan ke file lokal melalui ruang kerja

Kami dapat mengedit file sumber dan membuat beberapa perubahan pada CSS , JavaScript , dan file lainnya di alat Chrome Dev . Untuk menambahkan perubahan ini ke file lokal, maka tidak perlu menyalin dan menempelkan perubahan dari ruang kerja ke file di disk. Alat Pengembang Chrome^{(Chrome Dev)} memungkinkan Anda untuk mencocokkan file dan memperbarui file lokal dengan perubahan yang telah Anda lakukan di alat pengembang. Untuk menyelesaikan ini, klik kanan pada file sumber di sisi kiri pada tab Sumber^{(Sources )} dan pilih Tambahkan Folder ke ruang kerja.^{(Add Folder to workspace.)}

Semoga ini membantu.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the pоpular web browsers for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Google Chrome Tips and Tricks terbaik untuk pengguna Windows PC

• 3 Tip & Trik Berguna Untuk Menggunakan Catatan Tempel

• Cara mengunduh Font dari Website menggunakan Developer Tools

• Restart Chrome, Edge or Firefox tanpa kehilangan tab di Windows 11/10

• Tips menggunakan Inspect Element dari Google Chrome browser

• Cara Memperbaiki 403 Forbidden Error pada Google Chrome

• 15 VPN Terbaik untuk Google Chrome ke Access Blocked Sites

• Combine Semua Your Email Accounts menjadi satu Gmail Inbox

• Cara mengaktifkan Java di semua browser web utama

• Perbaiki Putar Otomatis YouTube Tidak Berfungsi

• Cara Buka Blokir Adobe Flash Player di Google Chrome

• Cara Mengaktifkan Jangan Lacak di Chrome, Firefox, Edge, dan Opera

• Ekspor kata sandi dari Chrome, Firefox, Opera, Microsoft Edge, dan Internet Explorer

• Google Chrome untuk Mac: Cara mendapatkannya!

• Cara mematikan Pemberitahuan Chrome: Semua yang perlu Anda ketahui

• Cara mematikan Pemberitahuan Chrome di Android: Panduan Lengkap

• Perbaiki masalah: Google Chrome menggunakan banyak prosesor (CPU) ketika saya mengunjungi situs web

• Cara Mendapatkan Rid dari Yahoo Search di Chrome

• Versi Chrome apa yang saya miliki?6 cara untuk mengetahuinya

• Cara menggunakan ponsel browser emulator di Chrome, Firefox, Edge, dan Opera