Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

Anda mungkin pernah mendengar tentang fitur canggih ini di browser Chrome Anda - Alat Pengembangan Chrome. Dan meskipun benar, bahwa sebagian besar berguna bagi pengembang web, ada kalanya berguna bagi pengguna internet rata-rata. Pada artikel ini, kami akan fokus pada hal-hal bermanfaat yang dapat Anda lakukan dengan alat pengembang Chrome. Seperti, cara melewati batasan yang ditetapkan oleh situs web, mencari tahu font, warna, dan gambar yang tersembunyi di permukaan atau bahkan lupa kata sandi.

Bagaimana cara membuka alat Pengembang di Chrome?

Untuk membuka alat pengembang Chrome di Google Chrome, klik Sesuaikan chrome (⋮)>Lebih banyak alat -> Alat pengembang.Anda juga bisaklik kanan di halaman yang ingin Anda edit dan pilihMemeriksa. Saya suka menggunakan keyboard pendekCtrl + Shift + I(Cmd + Option + I untuk Mac).

Secara default, ini membuka jendela baru ke kanan, tetapi saya lebih suka menyimpannya di bawah, karena ini memberi saya lebih banyak ruang untuk memperluasnya. Untuk memindahkan jendela ke bawah klik tombol 3 titik vertikal di kanan atas (⋮) lalu pilih opsi docking bawah. Anda juga dapat menyalakanmode gelap dari Pengaturan, membuatnya lebih enak di mata. Sekarang saat buka elemen inspeksi, perubahan saya akan teringat.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

Baca juga:Cara mengganti background google chrome

10 Tip Alat Pengembang Chrome

1. Edit Halaman Web

Sekarang, ini adalah penggunaan alat Pengembang yang paling dasar tetapi harus disertakan. Anda dapat mengedit sementara halaman Web (seperti Wikipedia) di browser Anda. Untuk melakukan ini, buka halaman web yang ingin Anda edit di Chrome dan klik kanan dan pilih Inspect Element. Buka tab konsol (harus menjadi opsi kedua dari atas), selanjutnya tempel baris kode berikut dan tekan enter.

document.body.contentEditable = true

Ini akan membuat seluruh halaman web dapat diedit seperti dokumen Word lainnya. Cukup klik di mana saja dan mulailah mengetik. Meskipun ingat semua efek akan hilang setelah Anda menyegarkan halaman. Jadi, pastikan Anda mengambil screenshot halaman tersebut sebelum menutup browser.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

2. Buka Sandi yang disimpan

Katakanlah Anda ingin masuk ke Instagram di ponsel Anda, tetapi Anda tidak ingat kata sandinya. Untungnya, Anda menyimpannya di browser Anda. Sekarang, alih-alih melalui proses reset kata sandi yang melelahkan, Anda dapat menggunakan alat pengembang untuk mengungkapkan kata sandi yang tersembunyi.

Klik kanan bidang kata sandi lalu pilih "Memeriksa elemen."Ini akan membuka jendela pemeriksa dokumen dan yang harus Anda lakukan adalah mengganti kata"kata sandi"Dengan"teks" dalamjenis kata sandibidang masukan. Dan ini akan mengungkapkan kata sandi yang disembunyikan dalam tanda bintang.

Pada artikel ini, kami akan fokus pada hal-hal bermanfaat yang dapat Anda lakukan dengan alat pengembang Chrome. Seperti, cara melewati batasan yang ditetapkan oleh situs web, mencari tahu font, warna, dan gambar yang tersembunyi di permukaan atau bahkan lupa kata sandi.

3. Ambil Screenshot dari halaman web

Tahukah Anda bahwa Anda dapat mengambil screenshot halaman web menggunakan Chome Dev Tools tanpa menggunakan Plugin tambahan? Fiturnya cukup sederhana dan hanya menawarkan dua pengaturan, Bagian yang terlihat dari halaman web, seluruh halaman web. Itu dapat menangkap tangkapan layar untuk versi seluler halaman web dan Anda dapat memilih beberapa tata letak seluler dari menu tarik-turun di atas.

Untuk menangkap tangkapan layar, buka alat pengembang Chrome. Buka tab Konsol, dan tekanctrl + shift + M(windows) ataucmd + opt + M(Mac). Selanjutnya, klikMenu 3 titik di kanan atasdari halaman web dan pilihTangkap Tangkapan Layar atau Tangkap tangkapan layar ukuran penuh. Selesai, tangkapan layar Anda akan disimpan di folder unduhan.

klik, kanan, tpage, akan, jendela, pilih, ingin, seperti, buka, google, elemen, hanya, screenshot, kata sandi, membawa

Baca juga:7 Ekstensi Tangkapan Layar Chrome Terbaik untuk Setiap Kebutuhan

Ada cara lain untuk mengambil tangkapan layar dan Anda selalu dapat memasang ekstensi tangkapan layar atau menggunakan pintasan tangkapan layar asli komputer, prtsc (windows) dan cmd + shift + 4 (MacOS) tetapi metode ini berfungsi dengan baik.

4. Gunakan Color Picker

Saya menyukai warna minimal dan lebih sering daripada tidak, saya menggulir gambar minimal di Google untuk mendapatkan inspirasi untuk fitur gambar dan thumbnail. Atau katakan, jika skema warna situs web tertentu menarik perhatian Anda, dan ingin mengetahui warna apa yang mereka gunakan, Anda selalu dapat memasang ekstensi pemilih warna. Tetapi ada cara yang lebih cepat untuk melakukannya.

Munculkan alat Pengembangan Chrome, di sisi kiri klikGaya tab, klik kotak kecil di sebelah warna. Ini akan memunculkan Alat pemilih warna, sekarang, klik di mana saja di halaman web, yang warnanya ingin Anda ketahui dan pemilih warna akan memberi Anda kode hex. Cukup salin kode hex dan tempel di Photoshop.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro5. Ubah Situs Web ke Tata Letak Seluler

Setiap kali Anda membuka situs web, banyak data Anda dikirim di bawah tenda, seperti alamat IP Anda, tanggal dan waktu yang tepat, URL, dari mana Anda berasal, dan Agen-pengguna.

Agen pengguna membantu situs web untuk mengidentifikasi browser Anda. Dan dalam beberapa kasus, mengubah agen pengguna membantu. Misalnya, jika Anda ingin memeriksa apakah situs web Anda responsif atau tidak. Tetapi favorit saya adalah mengakses versi situs web yang berbeda. Misalnya, beberapa situs web pemerintah di India hanya buka di Internet Explorer, atau untuk contoh global, mari kita lihat Instagram. Seperti yang Anda ketahui, Anda tidak dapat mengunggah gambar ke Instagram di komputer, tetapi Anda dapat melakukannya dari situs web selulernya. Jadi, mengapa tidak menyamarkan peramban desktop dengan peramban seluler?

Untuk melakukan ini, jalankan alat Pengembangan Chrome,Klik pada 3 titik vertikal, dan di bawah lainnyaAlat PilihKondisi jaringan. Sanahapus centang kotak yang bertuliskan,Agen pengguna, pilih secara otomatis dan dari kotak popup pilih aBrowser Seluler. Jika Anda mencoba mengakses situs web pemerintah, pilih browser lain yang kompatibel. Sekarang tutup jendela dan segarkan halaman. Seperti yang Anda lihat, ada tombol unggah yang berfungsi penuh, yang dapat Anda gunakan untuk mengunggah gambar ke Instagram dari komputer.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

6. Cari Apa Saja

Fitur berguna lainnya yang sulit ditentukan adalah penelusuran. Tab "Search" memungkinkan Anda mencari halaman web untuk konten tertentu atau elemen HTML.

Misalnya, jika Anda ingin mengetahui font apa yang digunakan situs web, Anda harus mengeklik3 titik lalu klikCari dan ketik font atau lebih tepatnyafont-family,dan Anda dapat menemukan informasi di baris kode.

Atau mari kita ambil contoh lain, saya menemukan situs web yang menggunakan video sebagai latar belakang dan saya ingin tahu video mana yang sebenarnya. Sekarang, menyimpan laman tidak akan berhasil. Sebagai gantinya, gunakan alat Pengembangan Chrome, dan telusuri"Video"gulir hasil dan lihat apakah Anda mendapatkan URL apa pun. Dalam hal ini, gunakan akal sehat, jika itu adalah file video, itu sebagian besar seperti memiliki ekstensimp4, coba itu. Dan begitulah, sekarang Anda memiliki beberapa hasil dengan mp4, salah satunya adalah file video, klik di atasnya untuk memunculkan URL. Salin URL itu dan tempel di browser, dan pergilah.

Pada artikel ini, kami akan fokus pada hal-hal bermanfaat yang dapat Anda lakukan dengan alat pengembang Chrome. Seperti, cara melewati batasan yang ditetapkan oleh situs web, mencari tahu font, warna, dan gambar yang tersembunyi di permukaan atau bahkan lupa kata sandi.

7. Hapus Popup

Fitur lain yang berguna dari i adalah menghapus pop-up dari situs web. Misalnya, Quora- situs web jawaban pertanyaan populer yang menawarkan konten hanya kepada anggotanya. Jika Anda datang ke situs ini dari Google dan mencoba membaca lebih dari satu halaman, sebuah pop-up akan muncul meminta Anda untuk mendaftar. Berikut adalah cara menghapusnya, klik kanan pada halaman dan tampilkan elemen Inspect.Pindahkan kursor Anda ke baris kode sampai jendela pop-up (menutupi konten) disorot. Setelah selesai,hapus baris kode itu. Terkadang ada lapisan transparan lain di badan halaman, yang membuat link tidak merespons. Hapus itu juga.

Baca baca:Cara melihat Konten yang Diblokir di Situs Web

klik, kanan, tpage, akan, jendela, pilih, ingin, seperti, buka, google, elemen, hanya, screenshot, kata sandi, membawa

8. Ubah Lokasi GPS Browser Anda

Sekarang, ada 2 cara, situs web apa pun mengetahui dari mana Anda menjelajah - alamat IP dan lokasi browser Anda. Meskipun Anda dapat dengan mudah mengubah alamat IP, dengan menggunakan VPN dan Smart DNS kami, tidaklah mudah untuk mengubah lokasi browser.

Misalnya, suatu hari, saya menjelajahi CBS dengan VPN, dan semuanya berfungsi dengan baik. Tapi, ketika saya memutuskan untuk menonton saluran lokal di CBS dan itu menunjukkan kepada saya munculan menanyakan lokasi browser saya. Dan kemudian klik Izinkan, dikatakan konten tidak tersedia di lokasi saya.

Untuk memperbaikinya, bukaKonsol Pengembang, dengan mengklik kanan di layar. Di bagian bawah panel,tekan tombol tiga titik di kanan atas, lalu klik "Sensor"DariLebih. Jendela baru akan terbuka di bagian bawah jendela alat pengembang, Di bawahGeolokasi, Pilih "Lokasi khusus."Sekarang masukkan lokasi Anda berdasarkan lintang dan bujur, jika Anda tidak mengetahui nilai-nilai ini, Anda selalu dapat menggunakan peta Google. Atau pilih saja nama kotanya sepertiCalifornia. Sekarang, Muat ulang halaman, izinkan data lokasi di jendela pop-up. Dan sekarang jika saya menyegarkan laman, dan mengeklik izinkan lokasi, seperti yang Anda lihat, sekarang saya dapat mengalirkan stasiun lokal.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

9. Gunakan Penggaris

Sama seperti alat Pemilih Warna, Alat Pengembang Google Chrome juga Menyertakan Penggaris. Ini berguna saat Anda ingin mengukur piksel di seluruh tinggi dan lebar halaman.

Untuk menampilkan Penggaris, klik kanan pada halaman di mana Anda ingin menggunakan penggaris dan klik "Memeriksa elemen". Selanjutnya, Anda harus mengaktifkannya untuk pertama kalinya, klik pada 3 titik vertikal di kanan atas danPengaturan.Jendela baru akan terbuka, di bawahElemen bagian pilih Tunjukkan Penggaris pilihan.

Periksa Elemen di Chrome: 10 Tips Menggunakannya Seperti Pro

10. Batasi kecepatan unduh di Chrome

Jika Anda ingin membatasi kecepatan unduhan, Anda dapat melakukannya dengan alat Chrome Dev. Itu tidak hanya membatasi kecepatan unduh paket yang sebenarnya tetapi juga streaming. Pada dasarnya, Anda dapat mengisolasi tab dan membuat tab memuat sesuai dengan kecepatan yang baru saja Anda tetapkan. Ini berfungsi seperti pesona ketika Anda ingin membatasi bandwidth pada browser Anda saat menonton film.

Untuk mengatur kecepatan tab, buka opsi pengembang, dan klik pada tombol opsi tepat di sebelah audit dan pilih pengaturan atau Anda bisa langsung menekan tombol F1 ke buka pengaturannya. Buka tab Throttling dan klik 'Tambahkan Profil khusus '. Anda dapat memberi nama profil dan mengatur kecepatan unduh dan unggah. Setelah menambahkan angka, Klik 'Tambahkan' dan selesai.

Pada artikel ini, kami akan fokus pada hal-hal bermanfaat yang dapat Anda lakukan dengan alat pengembang Chrome. Seperti, cara melewati batasan yang ditetapkan oleh situs web, mencari tahu font, warna, dan gambar yang tersembunyi di permukaan atau bahkan lupa kata sandi.

Profil ini hanya akan berfungsi pada tab yang saat ini terbuka dan Anda harus tetap mengaktifkan jendela opsi pengembang jika tidak, pembatasan tidak akan berfungsi. Untuk mengaktifkan profil, buka tab jaringan di alat pengembang dan klik menu tarik-turun tepat di samping Luring. Pilih profil khusus dan halaman Anda sekarang dibatasi. Apa pun yang diunduh dari halaman ini akan dibatasi hingga batas yang ditentukan. Pastikan untuk tidak menutup jendela elemen inspeksi atau menyegarkan halaman.

klik, kanan, tpage, akan, jendela, pilih, ingin, seperti, buka, google, elemen, hanya, screenshot, kata sandi, membawa

Bagaimana Anda menggunakan alat Pengembang Chrome?

Secara keseluruhan, alat pengembang memiliki lebih banyak kasus penggunaan daripada mengotak-atik situs web favorit Anda. Singkatnya, apa pun yang tidak dilakukan situs web di sisi server dapat diubah dengan alat pengembang Chrome. Atau, Anda dapat menggunakan ekstensi Pengembang Web untuk mendapatkan akses sekali klik ke semua fitur dan lainnya.

Lihat Juga