{"id":22332,"date":"2022-08-24T18:36:30","date_gmt":"2022-08-24T11:36:30","guid":{"rendered":"\/tutorial\/?p=22332"},"modified":"2023-01-18T15:58:58","modified_gmt":"2023-01-18T08:58:58","slug":"cara-inspect-element","status":"publish","type":"post","link":"\/id\/tutorial\/cara-inspect-element","title":{"rendered":"Cara inspect element di berbagai browser, gampang!"},"content":{"rendered":"<p>Kalau Anda bekerja di bidang IT, atau minimal sering browsing website, inspect element adalah fitur yang akan sangat berguna. Memahami cara inspect element di browser memungkinkan Anda memanipulasi area front-end website, termasuk file <a href=\"\/id\/tutorial\/apa-itu-html\">HTML<\/a>,&nbsp;<a href=\"\/id\/tutorial\/apa-itu-css\">CSS<\/a>,&nbsp;<a href=\"\/id\/tutorial\/apa-itu-javascript\">JavaScript<\/a>, dan gambarnya.<\/p><p>Selain itu, Inspect Element juga bisa digunakan untuk menguji skrip, debug error, dan menemukan metadata halaman web.<\/p><p>Hampir semua browser utama sudah menyertakan fitur ini secara default. Nah, oleh karena itu, kami sudah menyiapkan artikel ini, yang akan membahas cara menggunakan Inspect Element di Chrome, Safari, dan Mozilla Firefox.<\/p><p>Kami juga akan membahas berbagai fungsi inspect element, termasuk untuk mengedit elemen halaman, menginspeksi class CSS, dan mengaktifkan Mode Desain Responsif. Yuk, pastikan untuk membaca sampai selesai, ya!<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-ID.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/public\" alt=\"\" class=\"wp-image-27589\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-apa-fungsi-inspect-element\">Apa Fungsi Inspect Element?<\/h2><p>Ada sejumlah fungsi <a href=\"https:\/\/support.hostinger.com\/id\/articles\/2152545-bagaimana-cara-menginspeksi-elemen-website\" target=\"_blank\" rel=\"noopener\">Inspect Element<\/a>&nbsp;yang bisa Anda manfaatkan, misalnya untuk:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mengedit CSS secara <strong>langsung<\/strong><\/strong>&nbsp;&#8210;&nbsp;Anda bisa menggunakan fitur ini untuk melakukan pengeditan di panel CSS dan melihat perubahannya secara langsung.<\/li>\n\n\n\n<li><strong>Mengetes layout &#8210;&nbsp;<\/strong>fitur ini bisa digunakan untuk mengetes berbagai layout website.<\/li>\n\n\n\n<li><strong>Diagnostik debug<\/strong>&nbsp;&#8210;&nbsp;membantu&nbsp;melakukan maintenance website, karena fitur ini bisa mengecek apakah ada kode yang rusak di website.<\/li>\n\n\n\n<li><strong>Mengedit sementara elemen halaman<\/strong>&nbsp;&#8210;&nbsp;Anda bisa menggunakan fitur ini untuk mengubah elemen halaman hanya dari sisi Anda, tanpa mengubah kodenya secara permanen.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-siapa-yang-perlu-menggunakan-inspect-element\">Siapa yang Perlu Menggunakan Inspect Element?<\/h2><p>Kegunaan Inspect Element sebenarnya ada banyak sekali, terutama bagi:<\/p><ul class=\"wp-block-list\">\n<li><strong>Web developer<\/strong> &ndash; setelah menulis kode, Anda bisa mengujinya di halaman web menggunakan fitur ini. Inspect Element juga bisa digunakan untuk menemukan error atau bug di website.<\/li>\n\n\n\n<li><strong>Content writer<\/strong>&nbsp;&ndash; dengan Inspect Element, Anda bisa menyembunyikan informasi sensitif dari halaman web sebelum mengambil screenshot untuk keperluan <a href=\"\/id\/tutorial\/apa-itu-content-marketing\">content marketing<\/a>. Manipulasi halaman dengan Inspect Element akan jauh lebih cepat daripada menggunakan software edit foto.<\/li>\n\n\n\n<li><strong>Digital marketer<\/strong>&nbsp;&ndash; Anda bisa mengecek sejauh mana upaya <a href=\"\/id\/tutorial\/apa-itu-seo\">SEO<\/a> kompetitor, metadata website, keyword target, dan status indeks Google website mereka.<\/li>\n\n\n\n<li><strong>Staf CS (Customer Support)<\/strong>&nbsp;&ndash; fitur ini berguna bagi tim CS untuk membantu menunjukkan error pada tim web developer dan mengatasinya.<\/li>\n\n\n\n<li><strong>Desainer<\/strong>&nbsp;&ndash; Anda bisa memodifikasi desain website dan melihat perubahannya sebelum diterapkan. Dengan fitur ini, Anda juga bisa melihat preview halaman web di komputer desktop atau perangkat seluler. Tentu saja, ini akan menghemat waktu dan membuat komunikasi dengan klien menjadi lebih efisien.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-cara-inspect-element-di-chrome-dengan-developer-tools\">Cara Inspect Element di Chrome dengan Developer Tools<\/h2><p>Nah, sebelum membahas cara menggunakan Inspect Element di Chrome, kami akan menjelaskan dulu apa itu Developer Tools. Jadi, ini adalah panel yang dilengkapi dengan Inspect Tool, dan terdiri dari 3 bagian utama:<\/p><ul class=\"wp-block-list\">\n<li><strong>Panel Elements\/Document Object Model (DOM)<\/strong>&nbsp;&ndash; panel ini memuat struktur DOM halaman dan menyediakan akses ke kode source HTML. Bagian ini ada di taskbar atas Chrome Developer Tools.<\/li>\n\n\n\n<li><strong>Panel CSS<\/strong>&nbsp;&ndash; di sini, Anda bisa mengubah, menambah, dan menghapus properti CSS untuk mengubah aturan gaya halaman web. Panel CSS terletak di bagian tengah Developer Tools, di bawah&nbsp;<strong>Styles<\/strong>.<\/li>\n\n\n\n<li><strong>Console<\/strong>&nbsp;&ndash; menampilkan pesan yang tercatat dalam log dan menjalankan kode JavaScript. Bagian ini muncul di taskbar tombol Developer Tools.<\/li>\n<\/ul><p>Untuk cara Inspect Element di Google Chrome, ikuti langkah berikut:<\/p><ol class=\"wp-block-list\">\n<li>Buka sebuah website di&nbsp;<strong>Google Chrome<\/strong>.&nbsp;Di sini, kami menggunakan <strong>hostinger.co.id<\/strong>.<\/li>\n\n\n\n<li>Klik&nbsp;<strong>tiga titik vertikal<\/strong> di menu bar atas Chrome, pilih <strong>More tools<\/strong>&nbsp;(Fitur lainnya), lalu pilih <strong>Developer tools<\/strong> (Alat pengembang).<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-mengakses-developer-tools-chrome.png\/public\" alt=\"cara mengakses developer tools chrome\" class=\"wp-image-22337\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-mengakses-developer-tools-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-mengakses-developer-tools-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-mengakses-developer-tools-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-mengakses-developer-tools-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Atau, gunakan shortcut keyboard <strong>Ctrl + Shift + I<\/strong>&nbsp;untuk Windows atau Linux, dan <strong>Cmd + Option + I<\/strong> untuk macOS.<\/p><p>Cari lainnya, Anda bisa mengklik kanan halaman web di mana saja, lalu memilih <strong>Inspect<\/strong> (Inspeksi) untuk mengakses panel <strong>Developer tools<\/strong> (Alat pengembang).<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-inspect-element.png\/public\" alt=\"membuka inspect element\" class=\"wp-image-22338\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-inspect-element.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-inspect-element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-inspect-element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-inspect-element.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Setelah tab <strong>Elements<\/strong>&nbsp;(Elemen) muncul di jendela browser, Anda bisa mengedit source code halaman. Ubah ukuran area tool inspeksi dengan menarik sudutnya agar lebih mudah dibaca.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-elements.png\/public\" alt=\"panel elements\" class=\"wp-image-22339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-elements.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-elements.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-elements.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-elements.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Secara default, panel&nbsp;<strong>Elements<\/strong> (Elemen) akan muncul di sisi kanan jendela browser. Kalau ingin mengubah lokasinya atau memindahkannya ke jendela sendiri, klik&nbsp;<strong>tiga titik vertikal<\/strong> di pojok kanan atas panel, lalu pilih <strong>Dock side<\/strong> (Dok samping) yang Anda inginkan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1913\" height=\"921\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/public\" alt=\"mengubah lokasi panel elements\" class=\"wp-image-22341\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/w=1913,fit=scale-down 1913w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-elements.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1913px) 100vw, 1913px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>Untuk melihat versi seluler halaman web, klik&nbsp;<strong><strong><strong>Toggle device toolbar<\/strong><\/strong><\/strong> (Alihkan toolbar perangkat) di pojok kiri atas panel. Di atas preview, Anda bisa mengubah variabel untuk mengetes performa halaman dengan berbagai resolusi layar atau saat bandwidth dibatasi.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1899\" height=\"921\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/public\" alt=\"website dengan berbagai resolusi\" class=\"wp-image-22343\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/w=1899,fit=scale-down 1899w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-dengan-berbagai-resolusi.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1899px) 100vw, 1899px\" \/><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Tips Berguna<\/h4>\n                    <p>Apabila ingin menginspeksi elemen tertentu, Anda bisa melakukan cara inspect element dengan mengklik kanan elemen tersebut dan memilih opsi Inspect (Inspeksi). Tool <strong>Inspect Element<\/strong> akan terbuka, langsung mengarah ke kode elemen yang Anda pilih tersebut.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Anda bisa menggunakan Inspect Element untuk mengubah, menghapus, atau menyembunyikan konten website dan mengecek class CSS.&nbsp;Sebaiknya <a href=\"\/id\/tutorial\/cara-menghapus-cache-history-di-browser\">bersihkan cache browser<\/a> secara teratur untuk memastikan Anda melihat tampilan asli halaman web.<\/p><p>Oke, selanjutnya, kami akan membahas lebih lanjut cara menggunakan Inspect Element untuk melakukan fungsi tertentu.<\/p><h3 class=\"wp-block-heading\" id=\"h-mengubah-elemen\">Mengubah Elemen<\/h3><p>Untuk mengubah elemen halaman, Anda perlu mengubah&nbsp;source code CSS atau&nbsp;<a href=\"\/id\/tutorial\/html-cheat-sheet\">HTML<\/a> halaman. Dengan cara ini, Anda bisa mengedit teks dan elemen gayanya, seperti ketebalan, ukuran, dan warna font.<\/p><p>Di panel DOM, Anda bisa mengedit teks sederhana. Berikut cara melakukannya:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;website apa saja di <strong>Google Chrome<\/strong>. Kami menggunakan&nbsp;<strong>hostinger.co.id<\/strong> lagi dalam contoh ini.<\/li>\n\n\n\n<li>Klik kanan di mana saja pada halaman web, dan pilih&nbsp;<strong>Inspect<\/strong>&nbsp;(Inspeksi) untuk membuka <strong><strong>Developer tools<\/strong><\/strong> (Alat pengembang).<\/li>\n\n\n\n<li>Setelah membuka kotak&nbsp;<strong>Elements<\/strong> (Elemen), gunakan&nbsp;tool <strong>Inspect<\/strong> (Inspeksi) berupa <strong>ikon kursor<\/strong> di kiri atas panel untuk menandai elemen source code yang ingin diubah.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1551\" height=\"617\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/public\" alt=\"\" class=\"wp-image-22707\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/w=1551,fit=scale-down 1551w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/ikon-kursor-inspect-element-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1551px) 100vw, 1551px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Klik kanan kode yang ditandai di dalam DOM tree dan pilih <strong><strong>Edit as HTML<\/strong><\/strong>&nbsp;(Edit sebagai HTML). Atau, klik dua kali teks yang ingin Anda ubah.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1919\" height=\"919\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/public\" alt=\"edit sebagai html di chrome\" class=\"wp-image-22355\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/w=1919,fit=scale-down 1919w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-sebagai-html-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Kotak editor akan diperluas, sehingga Anda bisa mengubah teks tersebut. Elemen teks biasanya berada dalam tanda kutip.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/kotak-editor-di-chrome.png\/public\" alt=\"kotak editor di chrome\" class=\"wp-image-22356\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/kotak-editor-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/kotak-editor-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/kotak-editor-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/kotak-editor-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>Selesaikan pengeditan elemen untuk melihat preview teks yang diubah.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1917\" height=\"795\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/public\" alt=\"berhasil mengedit teks di chrome\" class=\"wp-image-22357\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/w=1917,fit=scale-down 1917w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/berhasil-mengedit-teks-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1917px) 100vw, 1917px\" \/><\/figure><\/div><p>Nah, cara mengubah gaya (style) elemen web juga mirip dengan di atas. Tapi, Anda akan menggunakan panel CSS. Pada contoh ini, kami utamanya menggunakan <strong>element.style<\/strong>, yang berisi berbagai properti yang bisa dipilih dan ditambahkan ke halaman web.<\/p><p>Ikuti langkah-langkah ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;website apa saja di <strong>Google Chrome<\/strong>. Seperti sebelumnya, kami akan menggunakan <strong>hostinger.co.id<\/strong>.<\/li>\n\n\n\n<li>Klik kanan di mana saja pada website, lalu pilih&nbsp;<strong>Inspect<\/strong> (Inspeksi).<\/li>\n\n\n\n<li>Gunakan tool <strong>Inspect<\/strong>&nbsp;(Inspeksi) untuk menandai salah satu elemen.<\/li>\n\n\n\n<li>Klik properti&nbsp;<strong>element.style<\/strong>&nbsp;di bagian atas panel CSS, lalu tambahkan deklarasi gaya yang diinginkan di dalam kurung kurawal. Di contoh ini, kami menambahkan warna background oranye ke blok teks:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengganti-warna-backgorund-di-chrome.png\/public\" alt=\"mengganti warna backgorund di chrome\" class=\"wp-image-22359\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengganti-warna-backgorund-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengganti-warna-backgorund-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengganti-warna-backgorund-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengganti-warna-backgorund-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Kalau Anda ingin menambahkan deklarasi gaya lain, pilih properti&nbsp;<strong>element.style<\/strong>&nbsp;lagi. Web inspector akan menambahkan baris kosong lain yang bisa Anda isi. Dalam contoh ini, kami menambahkan properti kedua untuk menampilkan teks dalam huruf miring:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-gaya-font-di-chrome.png\/public\" alt=\"mengubah gaya font di chrome\" class=\"wp-image-22360\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-gaya-font-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-gaya-font-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-gaya-font-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-gaya-font-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>Ketika Anda mengarahkan kursor pada properti CSS tersebut, akan muncul kotak centang di sebelah kiri setiap baris. Kosongkan centang untuk menyembunyikan gaya yang tadi sudah diterapkan. Atau, Anda bisa mengklik properti atau nilai untuk menggantinya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-centang-elemen-di-chrome.png\/public\" alt=\"menghapus centang elemen di chrome\" class=\"wp-image-22361\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-centang-elemen-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-centang-elemen-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-centang-elemen-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-centang-elemen-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-menyembunyikan-atau-menghapus-elemen\">Menyembunyikan atau Menghapus Elemen<\/h3><p>Developer Tools juga memungkinkan Anda menyembunyikan elemen website di halaman web. Dengan fitur <strong>Hide Element<\/strong> (Sembunyikan Elemen), panel CSS bisa membuat properti visibilitas untuk menyembunyikan konten apa pun tanpa menghapusnya.<\/p><p>Untuk melakukannya, ikuti langkah-langkah berikut:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;salah satu website di <strong>Google Chrome<\/strong>. Di sini, kami masih menggunakan <strong>hostinger.co.id<\/strong>.<\/li>\n\n\n\n<li>Klik kanan di bagian mana pun pada halaman web, lalu pilih&nbsp;<strong>Inspect<\/strong> (Inspeksi).<\/li>\n\n\n\n<li>Aktifkan fitur&nbsp;<strong>Inspect<\/strong>&nbsp;(Inspeksi) dan klik elemen yang ingin Anda sembunyikan.<\/li>\n\n\n\n<li>Klik kanan kode yang ditandai pada&nbsp;<strong>DOM tree<\/strong>, lalu pilih&nbsp;<strong>Hide Element<\/strong> (Sembunyikan Elemen). Properti visibilitas baru akan muncul di&nbsp;<strong>panel CSS<\/strong>. Hapus centang untuk membatalkan perubahan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-elemen-di-chrome.png\/public\" alt=\"menyembunyikan elemen di chrome\" class=\"wp-image-22368\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-elemen-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-elemen-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-elemen-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-elemen-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Kalau Anda ingin menghapus elemen HTML, klik kanan kode yang ditandai dan pilih&nbsp;<strong><strong>Delete element<\/strong><\/strong> (Hapus elemen). Refresh halaman kalau ingin mengembalikan tampilan dari kode yang dihapus.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-elemen-di-chrome.png\/public\" alt=\"menghapus kode elemen di chrome\" class=\"wp-image-22367\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-elemen-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-elemen-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-elemen-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-elemen-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Tips Berguna<\/h4>\n                    <p>Anda bisa membatalkan semua perubahan yang sudah dibuat pada tool Inspect Element dengan menekan Ctrl+Z di Windows dan Linux, atau Command+Z di macOS.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-inspeksi-class-css\">Inspeksi Class CSS<\/h3><p>Apabila Anda merupakan seorang web designer, inspect element adalah fitur yang efektif untuk mengecek kode desain web. Anda juga bisa menyalinnya untuk mengatur gaya bagian website menggunakan class CSS.<\/p><p>Berikut cara melakukannya:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;suatu website di <strong>Google Chrome<\/strong>. Yap, kami menggunakan <strong>hostinger.co.id<\/strong> lagi sebagai contoh.<\/li>\n\n\n\n<li>Klik kanan di mana saja pada halaman web, lalu pilih&nbsp;<strong>Inspect<\/strong> (Inspeksi).<\/li>\n\n\n\n<li>Aktifkan tool <strong>Inspect<\/strong>&nbsp;(Inspeksi) dan arahkan kursor ke elemen yang ingin Anda cek. Informasi dasarnya seperti warna, font, dan margin akan muncul, dan panel DOM akan menyoroti kode sumbernya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengecek-info-css-elemen-di-chrome.png\/public\" alt=\"mengecek info css elemen di chrome\" class=\"wp-image-22369\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengecek-info-css-elemen-di-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengecek-info-css-elemen-di-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengecek-info-css-elemen-di-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengecek-info-css-elemen-di-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Anda juga bisa menemukan gaya CSS tertentu dengan menekan&nbsp;<strong>Ctrl+Shift +F<\/strong>&nbsp;di Windows dan Linux, atau&nbsp;<strong>Command+Option+F<\/strong>&nbsp;di macOS.<\/li>\n\n\n\n<li>Tab pencarian akan muncul di bagian bawah panel. Masukkan istilah pencarian Anda, dan tool inspector akan menampilkan hasilnya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-kotak-pencarian-inspect-element-chrome.png\/public\" alt=\"membuka kotak pencarian inspect element chrome\" class=\"wp-image-22370\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-kotak-pencarian-inspect-element-chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-kotak-pencarian-inspect-element-chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-kotak-pencarian-inspect-element-chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-kotak-pencarian-inspect-element-chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-cara-inspect-element-di-browser-lain\">Cara Inspect Element di Browser Lain<\/h2><p>Sebagian besar browser punya fitur yang mirip dengan Inspect Element di Google Chrome. Meskipun cara kerja fitur-fiturnya hampir sama persis, langkah untuk mengaktifkannya akan berbeda.<\/p><h3 class=\"wp-block-heading\" id=\"h-cara-inspect-element-di-safari\">Cara Inspect Element di Safari<\/h3><p>Sebelum menggunakan tool Inspect Element di Safari, Anda harus mengaktifkan menu&nbsp;<strong><strong>Develop<\/strong><\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Pilih&nbsp;<strong>Safari<\/strong>&nbsp;di menu bar dan pilih&nbsp;<strong><strong>Preferences&nbsp;<\/strong><\/strong>dari menu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"487\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/preferensi-safari-di-macos.png\/public\" alt=\"preferensi safari di macos\" class=\"wp-image-22371\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/preferensi-safari-di-macos.png\/w=487,fit=scale-down 487w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/preferensi-safari-di-macos.png\/w=242,fit=scale-down 242w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/preferensi-safari-di-macos.png\/w=121,fit=scale-down 121w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Pilih&nbsp;<strong><strong>Advanced&nbsp;<\/strong><\/strong>dan centang kotak di sebelah&nbsp;<strong><strong>Show Develop menu in menu bar<\/strong><\/strong>&nbsp;untuk mengaktifkan Inspect Element.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-develop-menu-di-safari.png\/public\" alt=\"mengaktifkan develop menu di safari\" class=\"wp-image-22372\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-develop-menu-di-safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-develop-menu-di-safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-develop-menu-di-safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-develop-menu-di-safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Setelah Anda mengaktifkan fitur tersebut, opsi&nbsp;<strong><strong>Develop&nbsp;<\/strong><\/strong>akan ditambahkan ke menu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"43\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/develop-menu-di-macos.png\/public\" alt=\"menu develop di macos\" class=\"wp-image-22373\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/develop-menu-di-macos.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/develop-menu-di-macos.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/develop-menu-di-macos.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/develop-menu-di-macos.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Berikut cara Inspect Element di Safari:<\/p><ol class=\"wp-block-list\">\n<li>Buka browser <strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Klik kanan di mana saja pada halaman dan pilih&nbsp;<strong>Inspect Element<\/strong>, atau gunakan shortcut keyboard <strong>Command+Option+I<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-menggunakan-inspect-element-di-safari.png\/public\" alt=\"\" class=\"wp-image-22708\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-menggunakan-inspect-element-di-safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-menggunakan-inspect-element-di-safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-menggunakan-inspect-element-di-safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-menggunakan-inspect-element-di-safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Atau, pilih&nbsp;<strong><strong>Develop&nbsp;<\/strong><\/strong>-&gt;&nbsp;<strong><strong>Show Web Inspector<\/strong><\/strong>&nbsp;dari menu bar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"808\" height=\"656\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menampilkan-web-inspector-di-safari.png\/public\" alt=\"menampilkan web inspector di safari\" class=\"wp-image-22375\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menampilkan-web-inspector-di-safari.png\/w=808,fit=scale-down 808w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menampilkan-web-inspector-di-safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menampilkan-web-inspector-di-safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menampilkan-web-inspector-di-safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 808px) 100vw, 808px\" \/><\/figure><\/div><p>Tool Inspect Element di Safari akan muncul di bagian bawah jendela browser secara default. Untuk mengubah lokasinya, klik ikon untuk meletakkan panel di sisi kanan, atau membukanya di jendela sendiri.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-web-inspector.png\/public\" alt=\"\" class=\"wp-image-22710\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-web-inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-web-inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-web-inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Panel Web Inspector terdiri dari 2 kolom: kolom pertama menampilkan source code HTML, dan yang kedua menampilkan CSS. Gunakan kursor untuk memilih antarmuka serta melihat setiap kode dan baris yang sesuai untuk setiap area.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"392\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-web-inspector.png\/public\" alt=\"panel web inspector\" class=\"wp-image-22377\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-web-inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-web-inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-web-inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Atau, inspect halaman secara langsung dengan mengklik tombol&nbsp;tool <strong>Inspect<\/strong>&nbsp;di pojok kiri atas panel. Seiring Anda mengarahkan kursor, tool ini akan menunjukkan source code terkait.<\/p><p>Seperti tool Inspect Element di Chrome, Safari memungkinkan Anda mengedit, menghapus, dan menambahkan elemen halaman web.<\/p><p>Ikuti cara mengubah bagian halaman di Safari berikut ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Buka sebuah website. Di contoh ini, kami menggunakan&nbsp;<strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Klik kanan kode HTML pada panel&nbsp;<strong>Elements<\/strong>&nbsp;dan arahkan kursor ke&nbsp;<strong>Edit<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengedit-kode-dengan-web-inspector.png\/public\" alt=\"mengedit kode dengan web inspector\" class=\"wp-image-22378\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengedit-kode-dengan-web-inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengedit-kode-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengedit-kode-dengan-web-inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengedit-kode-dengan-web-inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Pilih opsi dari menu&nbsp;<strong>Edit<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/opsi-edit-di-web-inspector.png\/public\" alt=\"opsi edit di web inspector\" class=\"wp-image-22379\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/opsi-edit-di-web-inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/opsi-edit-di-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/opsi-edit-di-web-inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/opsi-edit-di-web-inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Web Inspector akan meminta Anda memasukkan teks baru, lalu tool ini akan secara real-time menampilkan perubahan yang dibuat.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-teks-dengan-web-inspector.png\/public\" alt=\"mengubah teks dengan web inspector\" class=\"wp-image-22380\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-teks-dengan-web-inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-teks-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-teks-dengan-web-inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-teks-dengan-web-inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Untuk menambahkan elemen baru ke halaman, ikuti langkah-langkah berikut:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Buka website apa saja. Kami menggunakan <strong>hostinger.com<\/strong> lagi di sini.<\/li>\n\n\n\n<li>Klik kanan salah satu baris kode, lalu pilih opsi dari menu <strong><strong>Add<\/strong><\/strong>. Di contoh ini, kami memilih&nbsp;<strong>Child<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"738\" height=\"669\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-child-element-dengan-web-inspector.png\/public\" alt=\"menambahkan child element dengan web inspector\" class=\"wp-image-22381\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-child-element-dengan-web-inspector.png\/w=738,fit=scale-down 738w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-child-element-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-child-element-dengan-web-inspector.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Tentukan elemennya.&nbsp;Dalam contoh ini, kami menambahkan&nbsp;<strong>&lt;h1&gt;<\/strong>. Anda bisa menambahkan kode apa pun lagi di sebelahnya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"761\" height=\"610\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-kode-baru-dengan-web-inspector.png\/public\" alt=\"menambahkan kode baru dengan web inspector\" class=\"wp-image-22382\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-kode-baru-dengan-web-inspector.png\/w=761,fit=scale-down 761w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-kode-baru-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-kode-baru-dengan-web-inspector.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure><\/div><p>Berikut cara menghapus elemen halaman:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Buka sebuah website. Kami mengakses <strong>hostinger.com<\/strong> pada contoh ini.<\/li>\n\n\n\n<li>Pilih kode apa pun, lalu tekan&nbsp;<strong><strong>Delete<\/strong><\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"758\" height=\"623\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-html-dengan-web-inspector.png\/public\" alt=\"menghapus kode html dengan web inspector\" class=\"wp-image-22383\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-html-dengan-web-inspector.png\/w=758,fit=scale-down 758w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-html-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-kode-html-dengan-web-inspector.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/figure><\/div><p>Atau, Anda juga bisa mengklik kanan baris kode, lalu pilih&nbsp;<strong>Delete<\/strong>&nbsp;-&gt;&nbsp;<strong>Node<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"759\" height=\"667\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-node-dengan-web-inspector.png\/public\" alt=\"menghapus node dengan web inspector\" class=\"wp-image-22384\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-node-dengan-web-inspector.png\/w=759,fit=scale-down 759w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-node-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menghapus-node-dengan-web-inspector.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Untuk menyembunyikan elemen halaman web yang diinginkan, cukup klik kanan kode yang ingin Anda sembunyikan dan pilih&nbsp;<strong><strong>Toggle Visibility<\/strong><\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"735\" height=\"669\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-kode-dengan-web-inspector.png\/public\" alt=\"menyembunyikan kode dengan web inspector\" class=\"wp-image-22385\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-kode-dengan-web-inspector.png\/w=735,fit=scale-down 735w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-kode-dengan-web-inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menyembunyikan-kode-dengan-web-inspector.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/figure><\/div><p>Selain itu, Safari memiliki&nbsp;<strong><strong>Responsive Design Mode<\/strong><\/strong>&nbsp;yang memungkinkan Anda melihat preview website di berbagai perangkat, seperti layar desktop dan perangkat seluler. Ini cara menggunakannya:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Akses website apa saja.&nbsp;Di sini, kami masih menggunakan&nbsp;<strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Pilih opsi&nbsp;<strong>Develop<\/strong> di menu bar.<\/li>\n\n\n\n<li>Pilih&nbsp;<strong><strong>Enter Responsive Design Mode<\/strong><\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"817\" height=\"552\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-safari.png\/public\" alt=\"responsive design mode di safari\" class=\"wp-image-22386\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-safari.png\/w=817,fit=scale-down 817w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Mode ini akan menampilkan opsi perangkat dan resolusi layar yang tersedia untuk preview website.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"587\" height=\"607\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menggunakan-responsive-design-mode-di-safari.png\/public\" alt=\"menggunakan responsive design mode di safari\" class=\"wp-image-22388\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menggunakan-responsive-design-mode-di-safari.png\/w=587,fit=scale-down 587w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menggunakan-responsive-design-mode-di-safari.png\/w=290,fit=scale-down 290w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menggunakan-responsive-design-mode-di-safari.png\/w=145,fit=scale-down 145w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-cara-inspect-element-di-mozilla-firefox\">Cara Inspect Element di Mozilla Firefox<\/h3><p>Browser Mozilla Firefox juga menyertakan fitur inspeksi elemen ini secara default.&nbsp;Nah, ini cara menggunakan inspect element di Mozilla Firefox:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Buka sebuah website.&nbsp;Kami kembali menggunakan&nbsp;<strong>hostinger.co.id<\/strong> di contoh ini.<\/li>\n\n\n\n<li>Klik kanan di bagian mana pun pada halaman, dan pilih&nbsp;<strong>Inspect<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-inspect-element-di-firefox.png\/public\" alt=\"\" class=\"wp-image-22711\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-inspect-element-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-inspect-element-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-inspect-element-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/cara-inspect-element-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Anda juga bisa mengklik menu&nbsp;<strong>tiga garis<\/strong>&nbsp;-&gt;&nbsp;<strong><strong>More tools<\/strong><\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"360\" height=\"818\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengakses-more-tools-di-firefox.png\/public\" alt=\"mengakses more tools di firefox\" class=\"wp-image-22390\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengakses-more-tools-di-firefox.png\/w=360,fit=scale-down 360w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengakses-more-tools-di-firefox.png\/w=132,fit=scale-down 132w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengakses-more-tools-di-firefox.png\/w=66,fit=scale-down 66w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Pilih&nbsp;<strong><strong>Web Developer Tools<\/strong><\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"264\" height=\"375\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-web-developer-tools-di-firefox.png\/public\" alt=\"membuka web developer tools di firefox\" class=\"wp-image-22391\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-web-developer-tools-di-firefox.png\/w=264,fit=scale-down 264w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-web-developer-tools-di-firefox.png\/w=211,fit=scale-down 211w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuka-web-developer-tools-di-firefox.png\/w=106,fit=scale-down 106w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/><\/figure><\/div><p>Atau, Anda bisa menggunakan shortcut keyboard&nbsp;<strong>Ctrl+Shift+I<\/strong>&nbsp;untuk menggunakan&nbsp;<strong>Inspect Element<\/strong>.<\/p><p>Panel inspector browser akan muncul di bagian bawah jendela secara default.&nbsp;Untuk mengubah lokasinya, klik menu&nbsp;<strong>tiga titik<\/strong>&nbsp;di pojok kanan atas panel dan pilih opsi tampilan lainnya.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"208\" height=\"267\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-inspector-di-firefox.png\/public\" alt=\"mengubah lokasi panel inspector di firefox\" class=\"wp-image-22392\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-inspector-di-firefox.png\/w=208,fit=scale-down 208w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengubah-lokasi-panel-inspector-di-firefox.png\/w=117,fit=scale-down 117w\" sizes=\"(max-width: 208px) 100vw, 208px\" \/><\/figure><\/div><p>Dengan tool ini, Anda bisa memilih elemen tertentu untuk menemukan kodenya. Klik tool <strong>Inspect<\/strong> di pojok kiri atas panel untuk mengaktifkan mode pemilihan.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"499\" height=\"162\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-tool-inspeksi-di-firefox.png\/public\" alt=\"mengaktifkan tool inspeksi di firefox\" class=\"wp-image-22393\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-tool-inspeksi-di-firefox.png\/w=499,fit=scale-down 499w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-tool-inspeksi-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/mengaktifkan-tool-inspeksi-di-firefox.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/figure><\/div><p>Cara kerja panel Inspector&nbsp;di Firefox mirip dengan Chrome dan Safari.&nbsp;Source code HTML diberi kode warna:&nbsp;<strong>biru<\/strong>&nbsp;untuk konten,&nbsp;<strong>kuning<\/strong>&nbsp;untuk margin, dan&nbsp;<strong>ungu<\/strong>&nbsp;untuk padding.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1917\" height=\"913\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/public\" alt=\"meletakkan kursor di atas elemen halaman\" class=\"wp-image-22394\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/w=1917,fit=scale-down 1917w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/meletakkan-kursos-di-atas-elemen-halaman.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1917px) 100vw, 1917px\" \/><\/figure><\/div><p>Untuk mengubah elemen halaman di Firefox, ikuti cara ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Buka salah satu website. Contoh di sini masih menggunakan&nbsp;<strong>hostinger.co.id<\/strong>.<\/li>\n\n\n\n<li>Klik kanan di bagian tertentu pada halaman web, dan pilih&nbsp;<strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Klik dua kali untuk mengubah teks.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/memilih-teks-yang-diedit-di-firefox.png\/public\" alt=\"memilih teks yang diedit di firefox\" class=\"wp-image-22395\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/memilih-teks-yang-diedit-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/memilih-teks-yang-diedit-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/memilih-teks-yang-diedit-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/memilih-teks-yang-diedit-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Atau, klik kanan dan pilih&nbsp;<strong><strong>Edit as HTML<\/strong><\/strong>&nbsp;untuk memodifikasi teks.&nbsp;Area edit akan diperluas agar Anda bisa menulis kode.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"420\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-halaman-sebagai-html-di-firefox.png\/public\" alt=\"edit halaman sebagai html di firefox\" class=\"wp-image-22396\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-halaman-sebagai-html-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-halaman-sebagai-html-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-halaman-sebagai-html-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-halaman-sebagai-html-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Untuk menambahkan teks baru, pilih&nbsp;<strong><strong>Create New Code<\/strong><\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"418\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuat-node-baru-di-firefox.png\/public\" alt=\"membuat node baru di firefox\" class=\"wp-image-22397\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuat-node-baru-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuat-node-baru-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuat-node-baru-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/membuat-node-baru-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>Untuk menghapus kode, cukup klik dua kali dan tekan&nbsp;<strong>Backspace<\/strong>&nbsp;atau&nbsp;<strong>Delete<\/strong>.<\/li>\n<\/ol><p>Sementara itu, untuk mengubah style elemen, ikuti cara ini:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Buka sebuah website. Kami masih menggunakan <strong>hostinger.co.id<\/strong> sebagai contoh.<\/li>\n\n\n\n<li>Buka panel&nbsp;<strong>Inspector<\/strong>, lalu buka <strong>Filter Styles<\/strong>&nbsp;di bagian bawah.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1917\" height=\"785\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/public\" alt=\"panel filter gaya\" class=\"wp-image-22398\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/w=1917,fit=scale-down 1917w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/panel-filter-gaya.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1917px) 100vw, 1917px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Hapus centang di samping salah satu deklarasi CSS untuk menonaktifkan gaya.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1919\" height=\"785\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/public\" alt=\"menonaktifkan gaya di firefox\" class=\"wp-image-22399\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/w=1919,fit=scale-down 1919w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menonaktifkan-gaya-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Klik bagian tersebut, dan tool Inspect Element Firefox akan menyediakan baris baru untuk menambahkan kode baru.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1919\" height=\"787\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/public\" alt=\"menambahkan baris baru di firefox\" class=\"wp-image-22400\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/w=1919,fit=scale-down 1919w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/menambahkan-baris-baru-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure><\/div><p>Mozilla Firefox juga punya <strong><strong>Responsive Design Mode<\/strong><\/strong>&nbsp;untuk preview beberapa preset resolusi layar. Ini cara melakukannya:<\/p><ol class=\"wp-block-list\">\n<li>Buka&nbsp;<strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Akses website apa pun.&nbsp;Dalam contoh ini, kami membuka&nbsp;<strong>hostinger.co.id<\/strong>.<\/li>\n\n\n\n<li>Buka panel&nbsp;<strong>Inspector<\/strong>&nbsp;dan klik ikon&nbsp;<strong>Responsive Design Mode<\/strong>&nbsp;di pojok kanan atas.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1515\" height=\"911\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/public\" alt=\"responsive design mode di firefox\" class=\"wp-image-22401\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/w=1515,fit=scale-down 1515w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/responsive-design-mode-di-firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1515px) 100vw, 1515px\" \/><\/figure><\/div><p>Atau, klik menu&nbsp;<strong>tiga garis<\/strong>&nbsp;-&gt;&nbsp;<strong><strong>More tools<\/strong><\/strong>&nbsp;-&gt;&nbsp;<strong><strong>Responsive Design Mode<\/strong><\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"267\" height=\"387\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/akses-responsive-design-mode-di-firefox.png\/public\" alt=\"akses responsive design mode di firefox\" class=\"wp-image-22402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/akses-responsive-design-mode-di-firefox.png\/w=267,fit=scale-down 267w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/akses-responsive-design-mode-di-firefox.png\/w=207,fit=scale-down 207w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/akses-responsive-design-mode-di-firefox.png\/w=103,fit=scale-down 103w\" sizes=\"(max-width: 267px) 100vw, 267px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Kalau mode tersebut diaktifkan, Anda bisa mengecek kecepatan koneksi dan rasio piksel perangkat.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1913\" height=\"859\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/public\" alt=\"pratinjau di firefox pada perangkat lain\" class=\"wp-image-22403\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/w=1913,fit=scale-down 1913w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/pratinjau-di-firefox-pada-perangkat-lain.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1913px) 100vw, 1913px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Selesai! Kini Anda sudah tahu cara inspect element di Chrome, Safari, dan Mozilla Firefox.<\/p><p>Inspect Element adalah fitur yang memungkinkan pengguna memanipulasi, mengedit, atau menambahkan kode ke halaman web dari sisi mereka, tanpa mengubah kode aslinya.<\/p><p>Fitur ini sangat berguna untuk menguji desain website, debugging, mengecualikan informasi sensitif dari screenshot, meneliti metadata, dan menemukan keyword yang tersembunyi.<\/p><p>Semoga artikel ini berhasil membantu Anda mempelajari cara Inspect Element dan beberapa implementasinya, ya. Ada pertanyaan atau saran? Jangan ragu untuk menyampaikannya lewat komentar di bawah ini!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kalau Anda bekerja di bidang IT, atau minimal sering browsing website, inspect element adalah fitur yang akan sangat berguna. Memahami cara inspect element di browser memungkinkan Anda memanipulasi area front-end website, termasuk file HTML,&nbsp;CSS,&nbsp;JavaScript, dan gambarnya. Selain itu, Inspect Element juga bisa digunakan untuk menguji skrip, debug error, dan menemukan metadata halaman web. Hampir semua [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-inspect-element\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":371,"featured_media":22334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Inspect element adalah fitur browser yang berguna untuk berbagai hal. Baca cara inspect element di Chrome dan web browser lainnya di sini!","rank_math_focus_keyword":"cara inspect element","footnotes":""},"categories":[4983],"tags":[],"class_list":["post-22332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-inspect-element","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-inspect-element-using-google-chrome","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/22332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/371"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=22332"}],"version-history":[{"count":31,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/22332\/revisions"}],"predecessor-version":[{"id":29036,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/22332\/revisions\/29036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/22334"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=22332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=22332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=22332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}