Tidak ada situs web yang dibangun dengan sempurna. Seperti semua produk yang dibuat oleh manusia, kesalahan kode adalah bagian dari proses. Itulah mengapa penting untuk menguji secara menyeluruh setiap situs web baru yang Anda buat untuk memastikan bahwa itu bebas dari kesalahan untuk memberikan pengalaman terbaik kepada pengguna Anda. 

Anda tidak boleh menguji situs web tanpa mencoba kit DevTools Google Chrome terlebih dahulu. ^(DevTools)Mode pengembang Chrome^(Chrome) memungkinkan Anda untuk mencoba dan menguji situs baru (atau yang sudah ada) secara menyeluruh untuk menemukan dan memperbaiki bug. Ini juga dapat memberi Anda wawasan tentang bagaimana situs lain dijalankan, termasuk melihat kode sumber. 

Inilah semua yang perlu Anda ketahui tentang mode pengembang browser Google Chrome , alat apa yang dimilikinya, dan cara menggunakannya secara efektif.

Apa itu Mode Pengembang Chrome?^{(What Is Chrome Developer Mode?)}

Saat kami merujuk ke mode pengembang Chrome , kami tidak berbicara tentang mode pengembang^{(same developer mode)} yang sama yang akan Anda lihat di Chromebook^{(Chromebooks)} . Yang kami maksud adalah alat pengembangan Chrome yang ekstensif (disebut Google DevTools ) yang ada di dalam browser itu sendiri.

Ini adalah alat yang dirancang untuk menguji, menganalisis, dan dengan sengaja merusak (jika perlu) halaman web yang Anda muat di browser Google Chrome untuk tujuan pengujian. Pada tingkat dasar, Anda dapat menggunakan DevTools untuk melihat kode sumber situs web, memungkinkan Anda mengintip di balik layar untuk melihat bagaimana sebuah situs dibangun dan seberapa baik itu berjalan.

Namun, Google DevTools^{(Google DevTools)} menawarkan lebih dari ini. Anda dapat menggunakan mode pengembang Chrome untuk mengubah halaman setelah dimuat, menjalankan perintah konsol Google Chrome untuk mengontrol dan memanipulasi halaman, serta menjalankan tes kecepatan dan jaringan untuk memantau lalu lintas web.

Anda juga dapat mengemulasi perangkat lain, termasuk sistem operasi dan resolusi layar yang berbeda, dalam mode Chrome DevTools . Ini memungkinkan Anda melihat apakah sebuah situs memiliki desain web responsif, dan di mana konten dan tata letak situs akan berubah bergantung pada resolusi atau jenis perangkat.

Meskipun alat ini ditujukan untuk pengembang atau penguji web profesional, ini juga berguna bagi pengguna Chrome standar untuk mengetahui cara mereka menggunakan rangkaian DevTools . Jika Anda melihat masalah dengan situs yang tidak dapat Anda selesaikan, beralih ke mode pengembang Chrome dapat membantu Anda melihat apakah masalahnya ada pada situs atau browser Anda.

Cara Mengakses Menu Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Ada beberapa cara Anda dapat mengakses menu Google Chrome DevTools , tergantung pada alat yang ingin Anda gunakan.

Cara termudah untuk melakukannya adalah dari menu Google Chrome . Untuk melakukan ini, klik ikon menu tiga titik^{(three-dots menu icon)} di kanan atas. Dari menu yang muncul, klik More Tools > Developer Tools .

Ini akan membuka kit DevTools di menu baru di sisi kanan tab atau jendela Chrome yang terbuka.^(Chrome)

Anda juga dapat melakukan ini dengan menggunakan pintasan keyboard. Dari PC Windows atau Linux^{(Linux PC)} , buka browser Chrome dan tekan tombol F12 . Anda juga dapat menekan tombol Ctrl + Alt + J atau Ctrl + Alt + I di tab atau jendela Chrome yang terbuka .

Di macOS, tekan F12 atau tekan tombol Option + Command + J atau Option + Command + I untuk membuka menu Chrome DevTools . Ini akan membuka konsol Chrome , dengan opsi untuk pindah ke alat Chrome lainnya di bagian atas menu DevTools .

Jika mau, Anda dapat melihat kode sumber untuk situs web (membuka tab Elemen menu ^(Elements)DevTools dalam prosesnya) pada halaman web mana pun yang terbuka dengan mengeklik kanan dan mengeklik opsi Inspeksi^{(Inspect )} .

Menggunakan Chrome DevTools^{(Using Chrome DevTools)}

Seperti yang telah kami singgung secara singkat, Anda dapat menggunakan kit Chrome DevTools untuk melihat kode sumber situs web di bawah tab Elemen . ^(Elements)Ini akan memungkinkan Anda menganalisis kode di balik halaman yang Anda muat, serta melihat pesan kesalahan (menunjukkan masalah dengan cara situs dimuat) di konsol Chrome di bawah tab Konsol .^(Console)

Anda juga dapat melihat berbagai sumber konten dari situs web di bawah tab Sumber . ^(Sources)Misalnya, jika situs menggunakan jaringan pengiriman konten (CDN)^{(using a content delivery network (CDN))} , media dari situs akan dicantumkan sebagai sumber yang berbeda di sini.

Mode pengembang Chrome^(Chrome) memungkinkan Anda mengunduh konten itu secara langsung, atau melakukan analisis konten yang lebih kompleks.

Jika Anda ingin menguji kinerja situs, Anda dapat memantau dan merekam penggunaan jaringan Anda di bawah tab Jaringan . ^(Network)Ini akan menunjukkan kecepatan, ukuran, dan jenis permintaan jaringan yang dibuat antara browser Anda dan situs.

Misalnya, saat halaman pertama kali dimuat, situs akan memuat konten halaman itu sendiri, tetapi mungkin juga meminta data dari database pihak ketiga. Misalnya, saat Anda masuk, ini mungkin meminta database yang akan muncul sebagai permintaan jaringan di sini.

Anda dapat menganalisis ini lebih lanjut di bawah tab Performa^{(Performance )} , tempat Anda dapat merekam penggunaan browser Chrome Anda secara lebih mendalam, termasuk merekam tangkapan layar di berbagai titik. Ini akan mencatat berapa lama waktu yang dibutuhkan untuk memuat situs Anda untuk analisis lebih lanjut.

Google Chrome memiliki reputasi keras pada memori PC Anda^{(being hard on your PC memory)} , sehingga Anda dapat menguji penggunaan memori JavaScript situs Anda di bawah tab Memori . ^(Memory)Profil pengujian Chrome yang berbeda^{(Different Chrome)} dapat digunakan di sini, dengan informasi lebih lanjut tentang pengujian ini di laman dokumentasi Chrome DevTools^{(Chrome DevTools documentation page)} .

Untuk analisis yang lebih mendalam tentang konten situs Anda, serta penyimpanan browser apa pun yang mungkin digunakannya (misalnya, untuk mencatat data), Anda dapat mencari melalui tab Aplikasi . ^{(Application)}Anda dapat melihat informasi cookie situs di sini di bawah bagian Cookie^(Cookies) , atau menghapus penyimpanan yang digunakan dengan mengklik opsi Hapus penyimpanan^{(Clear storage)} .

Jika Anda khawatir tentang keamanan situs Anda, Anda dapat memeriksa seberapa baik kinerjanya di bawah tab Keamanan . ^{(Security )}Ini akan memberi Anda gambaran umum singkat tentang analisis keamanan Chrome untuk suatu halaman, termasuk apakah halaman tersebut memiliki sertifikat SSL yang benar dan tepercaya.^(SSL)

Jika Anda ingin membuat laporan tentang kinerja situs Anda, termasuk jika memenuhi standar pengguna biasa dan jika kinerja situs dapat memengaruhi pengoptimalan mesin telusur, Anda dapat mengeklik tab Mercusuar . ^(Lighthouse)Ini menawarkan pengaturan yang dapat Anda centang atau hapus centang untuk laporan Anda—klik Buat laporan^{(Generate report)} untuk membuat laporan yang akan dilihat.

Ini hampir tidak menggores permukaan potensi yang dapat dibawa oleh mode pengembang Chrome ke pengembang. Jika Anda ingin mempelajari lebih lanjut, dokumentasi Chrome DevTools^{(Chrome DevTools documentation)} akan membantu Anda dengan alat dan fitur yang ditawarkan, termasuk cara membuat pengujian pengguna Anda sendiri dengannya. 

Trik Google Chrome Tingkat Lanjut^{(Advanced Google Chrome Tricks)}

Sebagian besar pengguna Chrome tidak akan pernah tahu bahwa kit Google Chrome DevTools ada di browser mereka, tetapi bagi pengguna yang kuat, ini tetap merupakan cara yang sangat berguna untuk menguji dan menganalisis situs web. Ada juga ekstensi Chrome pihak ketiga untuk pengembang web yang^{(Chrome extensions for web developers)} tersedia untuk membantu menguji situs Anda lebih lanjut.

Jika Anda membuat situs web dasar^{(building a basic website)} , beralih ke mode pengembang Chrome dapat membantu Anda menemukan kesalahan dengan situs Anda yang tidak langsung terlihat. Anda hanya dapat melakukan ini jika Chrome berfungsi dengan benar, jadi jika Anda mengalami masalah dengan Chrome yang mogok^{(struggling with Chrome crashes)} , Anda mungkin perlu menyetel ulang atau memasang ulang peramban terlebih dahulu.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all productѕ made by humans, code errors are part оf the procesѕ. That’s why it’s important to thоroughly test any new website you build to make sure that it’ѕ as free of errors as possible to give your users thе best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• IsiOtomatis Google Chrome: Panduan Lengkap

• 10 Ekstensi Privasi Terbaik untuk Chrome (2022)

• Gunakan 4 Plugin Chrome Ini Untuk Mengenkripsi Pesan Gmail Anda

• Setelan Konten Google Chrome: Panduan Lengkap

• Apa Layanan Panggilan Konferensi Terbaik – Aplikasi Terbaik Dibandingkan

• Gunakan HP Print and Scan Doctor untuk Memperbaiki Masalah Umum Printer

• 3 Alat untuk Mendiagnosis dan Memecahkan Masalah dengan Monitor Anda

• Cara Merobek DVD & Blu-Ray Anda dengan Mudah Dengan MakeMKV

• 4 Aplikasi Perangkat Lunak Penerusan Port Terbaik dan Cara Menggunakannya

• Pengurai Email Zapier: 3 Cara Kreatif Menggunakannya

• Ekstensi Keamanan Online Avast: Apakah Layak Digunakan?

• Tes Piksel Mati Untuk Memperbaiki Piksel Terjebak Di Monitor Anda

• 5 Pengaya Privasi Firefox Terbaik untuk Keamanan Online

• Cara Kerja Situs Web: Pelajari Apa yang Ada di Balik Terpal

• 5 Situs Unduh APK Aman Terbaik untuk Aplikasi Android

• 5 Program Perangkat Lunak Terbaik untuk Mengelola Monitor Ganda

• Utilitas Penyetelan CPU, Kartu Video, dan RAM Terbaik

• 11 Perangkat Lunak Tangkapan Layar Gratis Terbaik untuk Windows

• 7 Alat Penghapus Bloatware Terbaik untuk Windows

• Cara Menggunakan Pengelola Paket Windows untuk Menginstal Program Windows