Cara Menggunakan Alat Inspect Element di Chrome: Panduan Lengkap untuk Developer

Alat Inspect Element di Google Chrome adalah antarmuka berbasis browser untuk Chrome DevTools — serangkaian utilitas debugging, profiling, dan pengeditan langsung yang dibangun langsung ke dalam browser. Alat ini memungkinkan Anda membaca dan memodifikasi struktur HTML, aturan CSS, dan eksekusi JavaScript halaman secara real time, tanpa menyentuh server atau file sumber.

Bagi pengembang web, insinyur front-end, dan penguji QA, alat ini adalah jalur tercepat dari “ada yang terlihat rusak” menjadi “saya tahu persis alasannya.” Panduan ini mencakup setiap panel utama, alur kerja praktis, dan teknik-teknik yang tidak terlalu jelas yang membedakan pengguna biasa dari pengguna mahir.

Apa Itu Chrome DevTools dan Di Mana Posisi Inspect Element?

Chrome DevTools adalah kumpulan utilitas pengembang yang tertanam di setiap browser berbasis Chromium. Panel Elements — yang dimaksud kebanyakan orang ketika mereka menyebut “Inspect Element” — hanyalah satu dari sekitar selusin panel khusus. Bersama-sama, panel-panel tersebut mencakup inspeksi DOM, debugging JavaScript, profiling jaringan, flame graph performa, snapshot heap memori, dan audit aksesibilitas.

Memahami bahwa Inspect Element adalah titik masuk ke dalam toolset yang jauh lebih besar mengubah cara Anda menggunakannya. Bug tata letak mungkin dimulai di panel Elements, memerlukan pemeriksaan override CSS di tab Computed, dan berakhir dengan analisis waterfall jaringan di panel Network — semuanya tanpa meninggalkan browser.

Cara Membuka Alat Inspect Element di Chrome

Chrome menyediakan empat metode berbeda. Masing-masing dioptimalkan untuk alur kerja yang berbeda.

Metode 1: Menu Konteks Klik Kanan (Paling Presisi)

Klik kanan langsung pada elemen spesifik yang ingin Anda periksa. Pilih Inspect dari menu konteks. Chrome membuka DevTools dengan panel Elements aktif dan node DOM yang tepat tersebut sudah dipilih dan digulir ke tampilan. Ini adalah cara tercepat untuk langsung menuju elemen tertentu tanpa harus mencari secara manual melalui pohon HTML.

Metode 2: Pintasan Keyboard (Tercepat untuk Pengguna Mahir)

Perbedaannya penting: Ctrl+Shift+I membuka DevTools dalam keadaan terakhir kali Anda tinggalkan. Ctrl+Shift+C mengaktifkan pemilih elemen secara langsung, memungkinkan Anda mengklik elemen mana pun di halaman untuk langsung menuju node DOM-nya.

Metode 3: Menu Aplikasi Chrome

Navigasikan ke menu tiga titik di sudut kanan atas, lalu buka More tools > Developer Tools. Ini adalah metode yang paling tidak efisien tetapi berguna ketika pintasan keyboard dipetakan ulang oleh aplikasi lain.

Metode 4: Bilah Alamat (Jarang Digunakan)

Ketik about:blank di bilah alamat, buka DevTools, lalu navigasikan ke URL target Anda. Ini menangkap permintaan jaringan dari byte pertama, termasuk permintaan yang diaktifkan sebelum halaman selesai dimuat — berguna untuk men-debug rantai pengalihan atau pengambilan sumber daya tahap awal yang menghilang jika Anda membuka DevTools setelah halaman dimuat.

Arsitektur Panel DevTools

Ketika DevTools dibuka, Anda melihat antarmuka bertab. Setiap tab adalah alat yang berdiri sendiri. Berikut adalah uraian fungsionalnya:

Bekerja di Panel Elements

Menavigasi Pohon DOM

Panel Elements merender DOM langsung — bukan sumber HTML mentah. Ini adalah perbedaan yang kritis. Framework JavaScript seperti React, Vue, atau Angular sering kali memutasi DOM setelah HTML awal diurai. Apa yang Anda lihat di panel Elements mencerminkan keadaan terkini dari document object model, yang mungkin berbeda secara substansial dari apa yang ditampilkan view-source:.

Gunakan tombol panah untuk memperluas dan menciutkan node. Tahan Alt (Windows/Linux) atau Option (macOS) saat mengklik segitiga pengungkap untuk memperluas seluruh subpohon sekaligus — sangat berguna saat bekerja dengan pohon komponen yang sangat bersarang.

Mengedit HTML Secara Real Time

Klik dua kali pada node teks, nilai atribut, atau nama tag mana pun untuk mengeditnya secara inline. Tekan Enter untuk mengonfirmasi. Untuk mengedit HTML luar penuh dari sebuah node, klik kanan dan pilih Edit as HTML. Ini membuka editor multi-baris tempat Anda dapat menempelkan seluruh fragmen HTML.

Contoh praktis — menguji perubahan heading:

<!-- Original -->
<h1 class="hero-title">Welcome to My Site</h1>

<!-- Edited inline to test copy -->
<h1 class="hero-title">Start Your Free Trial Today</h1>

Perubahan dibatasi pada sesi browser Anda. Penyegaran halaman akan membuang semua modifikasi. Ini membuat panel Elements aman untuk eksperimen — Anda tidak dapat secara tidak sengaja merusak situs produksi dengan mengedit di sini.

Mengedit CSS di Panel Styles

Panel Styles (sisi kanan panel Elements) menampilkan setiap aturan CSS yang berlaku pada elemen yang dipilih, diurutkan berdasarkan spesifisitas. Aturan yang ditimpa muncul dengan coretan.

Untuk memodifikasi properti, klik nilainya dan ketik yang baru. Untuk menambahkan deklarasi baru, klik di dalam blok aturan mana pun setelah properti terakhir. Untuk menambahkan aturan yang sepenuhnya baru, klik ikon + di toolbar panel Styles — Chrome membuat aturan baru yang dicakupkan ke selektor elemen.

Contoh — menguji override warna latar belakang:

/* Typed directly into the Styles pane */
background-color: #1a1a2e;
color: #eaeaea;

Sub-tab Computed menampilkan nilai akhir yang diselesaikan untuk setiap properti CSS setelah cascade diterapkan. Ketika sebuah gaya tidak berperilaku seperti yang diharapkan, tab Computed memberi tahu Anda dengan tepat aturan mana yang menang dan dari mana asalnya.

Mengalihkan dan Memaksa State

Setiap deklarasi CSS memiliki kotak centang. Menghapus centangnya menonaktifkan properti tersebut tanpa menghapusnya, memungkinkan Anda menguji dampak visual dari menghapus aturan secara instan.

Untuk state interaktif, gunakan tombol :hov di toolbar panel Styles untuk memaksa pseudo-class: :hover, :focus, :active, :visited. Ini sangat penting untuk men-debug gaya yang hanya muncul saat interaksi mouse, yang sebaliknya tidak mungkin diperiksa karena memindahkan mouse ke DevTools menghapus state hover.

Visualisasi Box Model

Di bawah panel Styles, bagian Layout menampilkan diagram box model visual dengan nilai yang dapat diedit langsung untuk margin, border, padding, dan dimensi konten. Klik nilai mana pun dalam diagram untuk mengeditnya langsung. Ini lebih cepat daripada mencari aturan CSS yang relevan saat Anda perlu menyesuaikan spasi.

Menyalin HTML dan CSS

Klik kanan node DOM mana pun untuk mengakses submenu salin yang lengkap:

• Copy element — menyalin HTML luar penuh
• Copy selector — menghasilkan jalur selektor CSS ke elemen tersebut
• Copy JS path — menghasilkan ekspresi document.querySelector(...) yang dapat langsung Anda tempelkan ke Console
• Copy XPath / Copy full XPath — untuk digunakan dengan framework pengujian seperti Selenium atau Playwright

Bekerja di Panel Console

Console adalah REPL JavaScript penuh dengan akses langsung ke konteks window halaman. Setiap variabel, fungsi, dan node DOM di halaman dapat diakses di sini.

Perintah Console Praktis

Kueri dan manipulasi elemen DOM:

// Select an element and log it
const hero = document.querySelector('.hero-title');
console.log(hero.textContent);

// Modify a style property
document.body.style.backgroundColor = '#0d0d0d';

// Count all images on the page
document.querySelectorAll('img').length;

Periksa cookie dan penyimpanan:

// Read all cookies
document.cookie;

// Read a localStorage value
localStorage.getItem('user_preferences');

Singkatan $_ merujuk pada nilai ekspresi terakhir yang dievaluasi. $0 merujuk pada node DOM yang saat ini dipilih di panel Elements — jembatan yang kuat antara kedua panel.

// After selecting a node in Elements panel:
$0.classList.toggle('hidden');

Pemfilteran Console dan Level Log

Gunakan bilah filter untuk menampilkan hanya pesan Errors, Warnings, Info, atau Verbose. Dalam aplikasi besar, console dipenuhi dengan kebisingan. Memfilter ke Errors saja adalah cara tercepat untuk mengidentifikasi apa yang sebenarnya rusak saat pemuatan halaman.

Mensimulasikan Perangkat Mobile dengan Device Toolbar

Klik ikon Toggle Device Toolbar (Ctrl+Shift+M / Cmd+Shift+M) untuk masuk ke mode desain responsif. Ini lebih dari sekadar mengubah ukuran viewport.

Apa yang sebenarnya diubah oleh emulator perangkat:

• Dimensi viewport dan rasio piksel perangkat (window.devicePixelRatio)
• String user-agent (dilaporkan ke server dan dapat diakses melalui JavaScript)
• Jenis event sentuh (event mouse digantikan dengan event sentuh)
• Preset throttling jaringan (opsional, tetapi dapat dikonfigurasi)

Pilih perangkat dari dropdown untuk menerapkan spesifikasi tepatnya. Untuk pengujian kustom, gunakan mode Responsive dan seret pegangan viewport, atau ketik dimensi piksel tepat di kolom lebar/tinggi.

Jebakan yang tidak terlalu jelas: Emulator perangkat tidak mengemulasi performa CPU. Situs yang tampak berjalan lancar dalam mode mobile yang diemulasi mungkin masih berkinerja buruk di perangkat low-end yang sebenarnya. Gunakan panel Performance dengan throttling CPU diaktifkan (perlambatan 4x atau 6x) untuk penilaian yang lebih realistis.

Men-debug JavaScript di Panel Sources

Panel Sources adalah debugger berfitur lengkap. Panel ini menampilkan semua file JavaScript yang dimuat oleh halaman, termasuk file yang di-bundle dan diminifikasi.

Menetapkan Breakpoint

Klik nomor baris mana pun di panel Sources untuk menetapkan breakpoint. Ketika eksekusi mencapai baris tersebut, browser berhenti sejenak dan Anda dapat memeriksa cakupan saat ini, call stack, dan semua nilai variabel.

Jenis breakpoint di luar level baris:

• Conditional breakpoint — klik kanan nomor baris dan masukkan ekspresi; eksekusi berhenti hanya ketika ekspresi bernilai truthy
• DOM mutation breakpoint — klik kanan node DOM di panel Elements dan pilih Break on untuk berhenti ketika subtree, atribut, atau penghapusan node tersebut berubah
• XHR/Fetch breakpoint — hentikan eksekusi ketika URL permintaan jaringan cocok dengan pola
• Event listener breakpoint — berhenti pada klik, penekanan tombol, atau event DOM lainnya

Source Map

JavaScript modern biasanya di-transpile dan di-bundle. Source map memetakan kode produksi yang diminifikasi kembali ke file sumber asli. Ketika source map dikonfigurasi dengan benar, panel Sources menampilkan modul TypeScript atau ES6 asli Anda alih-alih bundle yang tidak dapat dibaca. Jika Anda melihat bundle.min.js tanpa struktur yang dapat dibaca, source map tidak ada atau tidak disajikan.

Analisis Jaringan dengan Panel Network

Buka panel Network sebelum memuat atau menyegarkan halaman. DevTools hanya merekam permintaan yang terjadi saat panel terbuka.

Membaca Waterfall

Setiap baris di panel Network mewakili satu permintaan HTTP. Kolom waterfall menampilkan waktu yang dibagi menjadi beberapa fase:

• Queueing / Stalled — browser menunggu untuk mengirim permintaan (batas koneksi, prioritisasi)
• DNS Lookup — waktu untuk menyelesaikan nama host
• Initial Connection / SSL — handshake TCP dan negosiasi TLS
• Time to First Byte (TTFB) — waktu pemrosesan server
• Content Download — waktu untuk menerima isi respons

TTFB yang panjang menunjukkan masalah sisi server — kueri database yang lambat, kode backend yang tidak dioptimalkan, atau sumber daya server yang tidak memadai. Jika Anda menjalankan infrastruktur sendiri, di sinilah Anda akan menghubungkan dengan metrik sisi server. Meningkatkan ke lingkungan VPS Hosting yang memiliki sumber daya yang tepat sering kali menyelesaikan masalah TTFB yang tidak dapat diatasi oleh infrastruktur bersama.

Memfilter dan Memeriksa Permintaan

Gunakan bilah filter untuk menampilkan hanya jenis sumber daya tertentu: XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm. Klik baris permintaan mana pun untuk membuka panel detailnya, yang menampilkan:

• Headers — header permintaan dan respons, termasuk direktif cache-control, content-type, dan identifikasi server
• Preview — pratinjau yang dirender dari respons JSON, gambar, atau HTML
• Response — isi respons mentah
• Timing — uraian waterfall untuk permintaan spesifik tersebut
• Cookies — cookie yang dikirim dengan permintaan dan yang ditetapkan oleh respons

Memeriksa Detail SSL/TLS

Di panel Network, klik permintaan HTTPS mana pun dan buka tab Security di panel detail untuk melihat versi TLS, cipher suite, dan rantai sertifikat. Untuk ikhtisar keamanan seluruh situs, gunakan panel Security khusus di DevTools. SSL Certificates yang dikonfigurasi dengan benar terlihat di sini — Anda dapat mengonfirmasi penerbit, tanggal kedaluwarsa, dan apakah sertifikat mencakup domain yang tepat yang diminta.

Panel Application: Penyimpanan, Caching, dan Service Worker

Panel Application memberikan visibilitas ke semua yang disimpan browser atas nama situs.

Jenis penyimpanan yang dapat diakses di sini:

• Cookies — lihat, edit, dan hapus cookie individual dengan visibilitas atribut penuh (HttpOnly, Secure, SameSite, kedaluwarsa)
• localStorage / sessionStorage — pasangan kunci-nilai; dapat diedit langsung di panel
• IndexedDB — database sisi klien terstruktur; dapat dijelajahi berdasarkan object store
• Cache Storage — sumber daya yang di-cache oleh service worker; kritis untuk debugging Progressive Web App
• Service Workers — daftarkan, batalkan pendaftaran, dan periksa service worker aktif; simulasikan mode offline

Skenario debugging yang umum: Pengguna melaporkan melihat konten lama setelah deployment. Panel Application memungkinkan Anda memeriksa Cache Storage untuk mengonfirmasi apakah versi aset lama masih di-cache oleh service worker, dan memaksa pembaruan atau menghapus cache tanpa pengguna perlu melakukan hard-refresh.

Panel Lighthouse: Audit Otomatis

Lighthouse menjalankan audit otomatis terhadap lima kategori: Performance, Accessibility, Best Practices, SEO, dan Progressive Web App. Setiap kategori menghasilkan skor dari 0 hingga 100 dengan temuan terperinci dan tautan langsung ke dokumentasi.

Jalankan Lighthouse dalam mode Mobile dan Desktop — skor berbeda secara signifikan karena simulasi mobile menerapkan throttling CPU dan jaringan. Audit SEO memeriksa deskripsi meta yang hilang, tautan yang tidak dapat di-crawl, dan konfigurasi viewport yang tidak tepat. Audit Accessibility menandai label ARIA yang hilang, rasio kontras warna yang tidak memadai, dan celah navigasi keyboard.

Temuan Lighthouse secara langsung menginformasikan apa yang perlu diperbaiki di situs sebelum diluncurkan. Jika Anda menghosting di VPS dengan cPanel, banyak rekomendasi performa — mengaktifkan kompresi, mengonfigurasi header cache, mengaktifkan HTTP/2 — dapat ditindaklanjuti langsung dari panel kontrol server.

Teknik Lanjutan yang Sering Terlewatkan Pengguna

Override Persisten dengan Local Overrides

Di panel Sources, buka tab Overrides. Petakan direktori lokal ke origin situs. DevTools akan menyimpan setiap pengeditan CSS atau JavaScript yang Anda buat ke direktori lokal tersebut dan menerapkannya kembali pada setiap pemuatan halaman — bahkan setelah refresh. Ini secara efektif memberi Anda lapisan patch lokal di atas situs web mana pun tanpa memodifikasi server, berguna untuk sesi pengujian yang diperpanjang atau menyiapkan proposal perubahan.

Memaksa Dark Mode dan Media Query Lainnya

Buka tab Rendering (dapat diakses melalui menu tiga titik di dalam DevTools > More tools > Rendering). Di sini Anda dapat memaksa prefers-color-scheme: dark, prefers-reduced-motion: reduce, dan fitur media CSS lainnya tanpa mengubah pengaturan OS Anda. Ini adalah cara yang benar untuk menguji implementasi dark mode.

Memeriksa Web Font

Di panel Application di bawah Fonts, Chrome mencantumkan setiap file font yang dimuat oleh halaman dan glyph mana yang sebenarnya digunakan. Ini membantu mengidentifikasi apakah variable font dimuat secara tidak perlu atau apakah subset font dapat mengurangi ukuran payload.

Throttling Jaringan dan CPU

Di panel Network, gunakan dropdown throttle untuk mensimulasikan Slow 3G, Fast 3G, atau tentukan profil kustom. Di panel Performance, aktifkan throttling CPU untuk mensimulasikan perangkat keras mobile low-end. Menjalankan keduanya secara bersamaan memberikan profil performa yang paling realistis untuk pengguna di perangkat dan jaringan yang terbatas.

DevTools untuk Mendiagnosis Masalah Hosting dan Infrastruktur

Toolset Inspect Element bukan hanya untuk pekerjaan front-end. Alat ini menampilkan sinyal tingkat infrastruktur yang secara langsung memengaruhi pengalaman pengguna.

Mendiagnosis konfigurasi server melalui DevTools:

• Header respons di panel Network mengungkapkan apakah kompresi gzip/Brotli aktif (content-encoding: br), apakah HTTP/2 atau HTTP/3 digunakan, dan apakah header cache ditetapkan dengan benar
• Nilai TTFB di atas 600ms secara konsisten menunjukkan bottleneck sisi server — hosting yang kekurangan sumber daya, caching opcode yang hilang, atau kueri database yang tidak dioptimalkan
• Peringatan konten campuran di Console (Mixed Content: The page was loaded over HTTPS...) menunjukkan sumber daya HTTP yang dimuat di halaman HTTPS, yang diblokir browser dan memerlukan perbaikan sisi server
• Error sertifikat yang terlihat di panel Security menunjukkan SSL Certificates yang salah dikonfigurasi atau sertifikat perantara yang kedaluwarsa

Jika Anda mengelola beberapa situs atau lingkungan klien, pengaturan Dedicated Servers memberi Anda kendali penuh atas header server, konfigurasi TLS, dan pengaturan kompresi — yang semuanya kemudian dapat Anda verifikasi langsung melalui DevTools tanpa bergantung pada default penyedia hosting.

Perbandingan: Panel Chrome DevTools Berdasarkan Kasus Penggunaan

Matriks Keputusan Praktis: Panel Mana yang Dibuka Pertama

Gejala: Halaman terlihat rusak secara visual

Buka panel Elements. Periksa panel Styles untuk aturan yang ditimpa atau hilang. Periksa tab Computed untuk nilai yang diselesaikan secara tidak terduga. Gunakan :hov untuk memaksa state pseudo-class.

Gejala: Fitur JavaScript tidak berfungsi

Buka Console terlebih dahulu. Cari error yang tidak tertangkap. Jika tidak ada, buka Sources dan tetapkan breakpoint di titik masuk fungsi yang relevan.

Gejala: Halaman memuat dengan lambat

Buka panel Network sebelum menyegarkan. Identifikasi sumber daya terbesar dan nilai TTFB terpanjang. Bandingkan dengan audit Performa Lighthouse untuk rekomendasi yang diprioritaskan.

Gejala: Pengiriman formulir atau panggilan API gagal

Buka panel Network. Filter berdasarkan XHR atau Fetch. Temukan permintaan yang gagal, periksa header permintaannya, payload, dan isi respons. Periksa Console untuk error CORS.

Gejala: Konten yang di-cache tidak diperbarui

Buka panel Application. Periksa Cache Storage dan Service Workers. Gunakan tombol Clear site data untuk menghapus semua data yang tersimpan untuk origin tersebut.

Poin Teknis Utama

• Semua perubahan yang dibuat di DevTools bersifat hanya untuk sesi — penyegaran halaman membuangnya kecuali Local Overrides dikonfigurasi di panel Sources
• Panel Elements menampilkan DOM langsung, bukan sumber HTML — konten yang dirender JavaScript terlihat di sini tetapi tidak di view-source:
• Ctrl+Shift+C mengaktifkan pemilih elemen secara langsung; Ctrl+Shift+I membuka panel yang terakhir digunakan
• $0 di Console selalu merujuk pada node DOM yang saat ini dipilih di panel Elements
• Nilai TTFB di atas 600ms secara konsisten menunjukkan masalah sisi server, bukan masalah front-end
• Emulator perangkat mengubah viewport, user-agent, dan event sentuh — emulator tidak mengemulasi performa CPU
• Skor Lighthouse berbeda antara mode Mobile dan Desktop karena throttling yang diterapkan — selalu jalankan keduanya
• Memaksa pseudo-class (:hover, :focus) melalui tombol :hov adalah satu-satunya cara yang andal untuk memeriksa state interaksi
• Source map harus disajikan bersama bundle agar panel Sources menampilkan kode yang dapat dibaca dalam build produksi
• Panel Application adalah sumber otoritatif untuk mendiagnosis masalah konten lama yang terkait dengan service worker dan cache

Bagi tim yang menjalankan beban kerja produksi, wawasan yang ditampilkan oleh DevTools — header kompresi, TTFB, konfigurasi TLS, direktif cache — hanya dapat ditindaklanjuti jika Anda memiliki kendali atas lingkungan server. VPS Hosting dan Dedicated Servers memberi Anda akses administratif untuk mengimplementasikan apa yang didiagnosis DevTools. VPS Control Panels yang dikelola lebih lanjut menyederhanakan penerapan perbaikan tersebut tanpa pengetahuan administrasi server yang mendalam.

FAQ

Apakah mengedit HTML atau CSS di panel Elements mengubah situs web yang sebenarnya?

Tidak. Semua modifikasi bersifat lokal untuk sesi browser Anda dan hanya berlaku pada salinan halaman yang dirender. Perubahan dibuang saat refresh. Untuk membuat perubahan permanen, Anda harus mengedit file sumber di server atau dalam codebase Anda.

Mengapa panel Elements menampilkan HTML yang berbeda dari sumber halaman?

Panel Elements menampilkan DOM langsung setelah JavaScript dieksekusi. view-source: menampilkan HTML mentah seperti yang dikirimkan oleh server sebelum rendering sisi klien apa pun. Aplikasi single-page dan situs yang banyak menggunakan JavaScript akan menampilkan perbedaan signifikan antara keduanya.

Bagaimana cara memeriksa elemen yang menghilang saat saya menggerakkan mouse?

Di panel Elements, pilih elemen induk yang memicu kemunculannya. Kemudian klik tombol :hov di panel Styles dan centang :hover. Ini memaksa state hover tetap aktif saat Anda menavigasi DevTools. Sebagai alternatif, tetapkan DOM mutation breakpoint pada elemen tersebut untuk menghentikan eksekusi saat elemen muncul.

Apa arti nilai TTFB yang tinggi di panel Network?

Time to First Byte mengukur berapa lama server membutuhkan waktu untuk mulai mengirim respons setelah menerima permintaan. TTFB yang secara konsisten tinggi (di atas 600ms) menunjukkan bottleneck sisi server: kueri database yang lambat, caching opcode PHP yang hilang, RAM yang tidak memadai, atau persaingan CPU pada host bersama yang kelebihan beban. Ini bukan masalah front-end dan tidak dapat diperbaiki dengan optimasi CSS atau JavaScript.

Bisakah saya menggunakan Chrome DevTools untuk memeriksa lalu lintas HTTPS dan detail sertifikat?

Ya. Panel Security di DevTools menampilkan versi TLS, cipher suite, penerbit sertifikat, dan kedaluwarsa untuk halaman saat ini. Detail sertifikat tingkat permintaan individual dapat diakses dengan mengklik permintaan di panel Network dan memilih tab Security di panel detail.