Belajar Browser DevTools Dari Nol Mulai Dari Mana ?

Belajar Browser DevTools dari nol sering dimulai dengan rasa penasaran saat melihat tombolF12Ditekan di tengah halaman web yang sedang berjalan. Banyak developer pemula mengira alat bawaan browser ini sekadar tempat melihat error JavaScript merah di console. Padahal, ekosistem DevTools menyimpan seperangkat alat diagnostik yang menyeluruh untuk membedah elemen DOM, memantau trafik jaringan, hingga mengukur performa rendering secara presisi.

flowchart TD
    A[Buka Browser] --> B{Pilih Cara Masuk}
    B -->|Shortcut| C[Tekan F12 atau Ctrl+Shift+I]
    B -->|Klik Kanan| D[Pilih Inspect Element]
    C --> E[Panel Utama DevTools]
    D --> E
    E --> F[Tab Elemen & CSS]
    E --> G[Tab Konsol Log]
    E --> H[Tab Jaringan Network]

Cara Membuka dan Navigasi Dasar Panel DevTools

Langkah awal yang wajib dikuasai oleh teman-teman adalah cara mengakses panel ini di berbagai peramban modern seperti Google Chrome, Microsoft Edge, atau Mozilla Firefox. Pintasan keyboard standar sepertiF12Atau kombinasi tombolCtrl+Shift+IDi Windows danCmd+Option+IDi macOS langsung memunculkan interface utama. Tata letak panel bisa diatur ulang agar menempel di sisi kanan, bawah, atau bahkan menjadi jendela terpisah yang mengapung di layar monitor.

Tips: Gunakan pintasanCtrl+Shift+CUntuk langsung menyorot elemen spesifik di halaman web tanpa harus mencari baris kodenya secara manual dari root DOM.

• Dock Side: Atur posisi panel ke samping kanan jika teman-teman pakai monitor ultrawide agar ruang kerja lebih leluasa dan tidak menumpuk elemen visual situs.
• Command Menu: TekanCtrl+Shift+PUntuk membuka palet perintah cepat mirip editor teks modern seperti VS Code guna mencari pengaturan tersembunyi.
• Device Mode: Aktifkan ikon emulator perangkat mobile untuk menguji responsivitas layout situs seketika itu juga tanpa harus membuka perangkat fisik.

Eksplorasi tata letak ini sangat penting bagi teman-teman yang ingin bekerja secara efisien. Seringkali, pemula menghabiskan waktu terlalu lama hanya untuk mencari menu pengaturan panel yang sebenarnya bisa diakses lewat kombinasi tombol singkat. Membiasakan diri dengan Command Menu (Ctrl+Shift+PAtauCmd+Shift+P) akan memangkas waktu navigasi banyak. Teman-teman bisa mengetikkan "Dark Theme", "Capture full size screenshot", atau "Show Coverage" langsung di palet tersebut tanpa perlu mengklik menu dropdown satu per satu.

Selain itu, memahami cara memisahkan jendela DevTools menjadi undocked window (jendela terpisah) sangat membantu ketika teman-teman sedang melakukan pengujian multi-monitor. Letakkan jendela DevTools di monitor kedua, sementara halaman web utama berjalan penuh di monitor utama. Cara ini memberikan ruang pandang yang sangat lega, terutama saat teman-teman harus memantau perubahan DOM yang kompleks sambil melihat log konsol secara bersamaan.

Mengubah Tampilan DOM dan Bereksperimen dengan CSS

Tab Elemen adalah area utama tempat struktur HTML dan aturan gaya CSS dimuat secara real-time. Teman-teman bisa mengedit teks, menghapus elemen, atau menambahkan properti CSS langsung di panel sisi kanan untuk melihat perubahan visual tanpa harus mengubah file sumber asli di Chrome for Developers. Perlu diingat bahwa semua modifikasi ini bersifat sementara; halaman web akan kembali seperti semula begitu tombol refresh ditekan.

<!-- Contoh struktur DOM sederhana yang sering diinspeksi -->
<div class="card-container">
  <h2 id="title-text">Belajar DevTools</h2>
  <p class="desc">Ubah gaya CSS langsung dari browser.</p>
</div>

/* Eksperimen CSS langsung di DevTools */
.card-container {
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

• Pseudo-states: Klik kanan pada elemen HTML lalu pilih Force State untuk menguji status:hover,:active, atau:focusSecara permanen tanpa harus menahan kursor mouse.
• Computed Styles: Gunakan tab bagian bawah di panel CSS untuk melacak dari mana asal nilai properti tertentu menimpa aturan lain yang saling bertabrakan.
• Live Edit: Simpan perubahan lokal langsung ke folder workspace lokal jika teman-teman sudah menghubungkan direktori project dengan DevTools.

Kemampuan memanipulasi DOM secara langsung di browser memberikan kebebasan luar biasa bagi teman-teman untuk melakukan rapid prototyping. Ketika merancang sebuah komponen interface, alih-alih mengubah kode di text editor, menyimpan file, merefresh browser, teman-teman bisa langsung mengetikkan properti CSS baru di panel Styles. Fitur Autocompletion yang disediakan DevTools juga sangat cerdas. Ia akan menampilkan daftar properti dan nilai valid secara instan begitu teman-teman mulai mengetikkan beberapa huruf awal.

Kendati demikian, jebakan utama yang sering menjerat pemula adalah lupa menyalin kode perubahan tersebut kembali ke file sumber di editor lokal. Karena sifat perubahan di tab Elemen bersifat volatil (hilang saat halaman direfresh), teman-teman harus rajin menyalin blok CSS yang sudah teruji ke dalam file.cssProject. Untuk mengatasi masalah ini, manfaatkan fitur Local Overrides di tab Sources. Dengan fitur ini, DevTools bisa diperintah untuk menyimpan perubahan langsung ke folder lokal di komputer. Setiap modifikasi otomatis tersimpan ke file fisik tanpa perlu copy-paste manual.

Melacak Masalah Skrip Lewat Console dan Debugger

Tab Konsol bukan cuma tempat untuk mencetak pesanconsole.log()Biasa ketika debugging aplikasi web. Lingkungan eksekusi JavaScript interaktif ini bikin teman-teman menjalankan perintah instan, memanggil fungsi global, atau memantau tumpukan error (stack trace) saat terjadi pengecualian kode yang tidak tertangkap.

// Contoh kode uji coba langsung di Console DevTools
const calculateTotal = (price, tax) => {
  console.log(`Menghitung total untuk harga: ${price}`);
  return price + (price * tax);
};

// Panggil fungsi langsung di prompt console
console.table([
  { item: "Modul A", cost: calculateTotal(100000, 0.11) },
  { item: "Modul B", cost: calculateTotal(250000, 0.11) }
]);

• Filter Level: Saring pesan berdasarkan kategori Verbose, Info, Warnings, dan Errors agar tidak pusing melihat tumpukan log framework yang bising.
• Live Expressions: Pin ekspresi JavaScript seperti variabel state tertentu di bagian atas console untuk memantaunya secara konstan saat halaman berinteraksi.
• Source Breakpoints: Masuk ke tab Sources untuk menyisipkan breakpoint baris kode dan menghentikan eksekusi program demi memeriksa nilai variabel satu per satu.

Menguasai tab Console lebih dari sekadar melihat tulisan merah Uncaught TypeError. Teman-teman bisa pakai fungsi utilitas bawaan console seperticonsole.dir()Untuk melihat struktur objek secara mendalam, atauconsole.time()Danconsole.timeEnd()Untuk mengukur berapa milidetik sebuah blok kode berjalan. Ketika berhadapan dengan data array yang besar, pakaiconsole.table()Jauh lebih elegan ketimbang mencetak deretan string mentah yang sulit dibaca mata manusia.

Selain itu, ketika proses debugging semakin rumit, mengandalkanconsole.log()Saja tidak lagi efektif. Teman-teman harus beralih ke tab Sources dan pakai Breakpoints. Dengan menempatkan breakpoint pada baris kode tertentu (misalnya pakai perintahdebugger;Langsung di dalam skrip kode), eksekusi JavaScript akan terjeda tepat di baris tersebut. Teman-teman bisa melihat isi memori lokal, cakupan variabel global, hingga melakukan Step Over atau Step Into untuk mengikuti alur eksekusi baris demi baris secara presisi tinggi.

Membedah Kinerja Jaringan Lewat Tab Network

Tab Jaringan atau Network merekam setiap aset yang diminta oleh browser, mulai dari dokumen HTML, stylesheet CSS, skrip JS, gambar, hingga permintaan XHR/Fetch API. Teman-teman bisa melihat durasi muat, ukuran file, kode status HTTP, hingga header respons secara transparan tanpa menebak-nebak penyebab lambatnya situs.

• Throttling: Simulasikan koneksi internet lambat seperti 3G atau Slow 4G untuk menguji ketahanan aplikasi saat diakses user di daerah terpencil dengan sinyal terbatas.
• Preserve Log: Centang kotak ini agar riwayat jaringan tidak terhapus otomatis saat halaman web melakukan navigasi atau pengalihan rute (redirect) antar halaman.
• Filter XHR: Pisahkan aset statis dari panggilan Fetch atau Axios guna menganalisis payload data JSON yang keluar masuk server secara spesifik.

Tab Network adalah senjata utama saat teman-teman menyelidiki masalah integrasi frontend dengan API backend. Ketika sebuah tombol kirim data gagal berfungsi, langkah pertama yang wajib dilakukan adalah membuka tab Network, menekan tombol tersebut, dan melihat apakah request HTTP benar-benar terkirim. Perhatikan kode status HTTP yang dikembalikan oleh server; apakah bernilai200 OK,400 Bad Request,401 Unauthorized, atau500 Internal Server Error. Setiap kode status memberikan petunjuk mutlak tentang di mana letak kesalahan komunikasi tersebut terjadi.

Fitur Headers dan Preview di dalam tab Network juga sangat membantu dalam membaca struktur payload data. Jika backend mengirimkan data JSON, tab Preview akan memformatnya menjadi pohon objek yang bisa dilipat dan dibuka dengan mudah, menggantikan tampilan teks mentah yang melelahkan. Teman-teman juga bisa memeriksa apakah header respons sepertiCache-ControlAtau CORS headers sudah dikonfigurasi dengan benar oleh server, sehingga terhindar dari masalah blokir keamanan browser saat aplikasi dijalankan di domain produksi.

Menganalisis Performa dan Penggunaan Memori

Memahami bottleneck rendering halaman butuh alat ukur yang objektif melalui tab Performance dan Memory. Teman-teman bisa merekam aktivitas CPU saat animasi berjalan atau mendeteksi potensi memory leak akibat listener event yang tidak pernah dilepas oleh skrip aplikasi.

Peringatan: Hindari melakukan profiling performa dalam mode Incognito yang tidak bersih karena ekstensi pihak ketiga bisa mengacaukan metrik waktu eksekusi CPU.

• Flame Chart: Baca grafik menumpuk untuk mengetahui fungsi JavaScript mana yang memakan waktu eksekusi terlama (Long Tasks) sehingga membuat halaman terasa patah-patah (lagging).
• Heap Snapshot: Ambil potret memori objek JavaScript sebelum dan sesudah interaksi tertentu untuk mencari objek yang menumpuk dan gagal dibersihkan oleh pengumpul sampah (garbage collector).
• Coverage Tool: Temukan kode CSS dan JavaScript mati yang tidak pernah dieksekusi oleh halaman web agar bisa dipangkas ukurannya demi mempercepat waktu muat awal (load time).

Kinerja aplikasi web yang mulus sangat bergantung pada seberapa bersih kode mengeksekusi render pipeline. Ketika frame rate turun di bawah 60 FPS, user akan merasakan ketidaknyamanan visual yang nyata. Melalui tab Performance, teman-teman bisa merekam aksi user selama beberapa detik untuk melihat rincian aktivitas Scripting, Rendering, Painting, dan System dalam bentuk linimasa yang sangat detail. Jika ditemukan blok warna merah di bagian atas linimasa, itu menandakan adanya Long Task yang memblokir utas utama (main thread), yang berarti kode JavaScript di baris tersebut perlu dioptimalkan atau dipindah ke Web Workers.

Selain masalah performa CPU, isu Memory Leak adalah pembunuh tersembunyi aplikasi web skala besar. Ketika user membuka halaman dalam waktu lama, memori browser perlahan membengkak hingga akhirnya membuat tab browser mengalami crash karena kehabisan RAM. Dengan mengambil Heap Snapshot di tab Memory, teman-teman bisa membandingkan alokasi objek memori dan melacak instance kelas atau komponen apa saja yang masih tertahan di memori meskipun komponen tersebut sudah ditutup dari layar.

Pakai Storage Lokal dan Fitur Offline

Aplikasi web modern sangat bergantung pada penyimpanan sisi klien untuk menjaga pengalaman user tetap responsif dan bisa diakses tanpa koneksi internet. Melalui panel Application atau Storage, teman-teman dapat menginspeksi isi LocalStorage, SessionStorage, IndexedDB, hingga menguji fasa Service Worker untuk skenario aplikasi web progresif (PWA).

{
  "storage_inspector": {
    "local_storage": "Data persisten yang bertahan meski browser ditutup",
    "session_storage": "Data sementara yang hilang saat tab ditutup",
    "indexed_db": "Database NoSQL berbasis browser untuk data kompleks",
    "cache_storage": "Penyimpanan aset mentah untuk skenario offline"
  }
}

• Clear Site Data: Hapus cache, cookie, dan database lokal secara instan dengan satu klik saat menguji skenario login ulang atau migrasi token autentikasi.
• Service Worker Bypass: Paksa update cache service worker agar perubahan skrip backend langsung berdampak di lingkungan pengembangan lokal tanpa terhalang cache lama.
• Manifest Check: Validasi file configmanifest.jsonUntuk memastikan aplikasi web sudah memenuhi kriteria instalasi perangkat seluler.

Pengelolaan data lokal di browser menuntut ketelitian tinggi, terutama berkaitan dengan keamanan token sesi user. Penyimpanan sepertiLocalStorageBersifat rentan terhadap serangan XSS karena dapat diakses oleh skrip JavaScript apa pun yang berjalan di halaman yang sama. Makanya, melalui panel Storage DevTools, teman-teman harus rajin memeriksa token apa saja yang tersimpan dan memastikan data sensitif tidak ditaruh sembarangan di sana.

Selain itu, ketika teman-teman mulai mengembangkan aplikasi yang mendukung mode offline pakai Service Worker, tab Application menjadi pusat kendali utama. Teman-teman bisa mensimulasikan status Offline dengan mencentang opsi tersebut di panel Service Worker. Mencoba bernavigasi di dalam situs untuk melihat apakah mekanisme Cache Storage berfungsi sebagaimana mestinya. Jika aset gagal dimuat saat offline, log Service Worker akan menampilkan rincian alasan kegagalan pengambilan cache tersebut secara transparan.

Baca juga Apakah Expo Go Masih Cocok Untuk Development Di 2026 ?

Menguji Aksesibilitas dan Audit Otomatis

Fitur Lighthouse yang terintegrasi di dalam DevTools membantu developer web mengevaluasi kualitas situs secara keseluruhan berdasarkan standar industri. Aspek seperti performa muat, praktik SEO on-page, standar PWA, hingga tingkat aksesibilitas (a11y) bagi penyandang disabilitas dianalisis secara otomatis dalam hitungan detik.

• Accessibility Tree: Periksa struktur label ARIA dan kontras warna teks terhadap latar belakang untuk memenuhi standar inklusivitas web global.
• SEO Checklist: Pastikan tag meta penting, atribut alt pada gambar, dan struktur dokumen sudah terbaca dengan benar oleh robot perayap mesin pencari.
• Metrics Core Web Vitals: Pantau skor LCP (Largest Contentful Paint), FID/INP (Interaction to Next Paint), dan CLS (Cumulative Layout Shift) secara langsung dari laporan audit.

Audit otomatis pakai Lighthouse memberikan sudut pandang objektif mengenai kualitas teknis sebuah situs web sebelum rilis. Seringkali, developer terlalu fokus pada fungsionalitas visual tanpa menyadari bahwa ukuran gambar terlalu besar atau kontras warna teks terlalu rendah bagi user dengan gangguan penglihatan. Laporan Lighthouse mengelompokkan temuan-temuan ini menjadi daftar prioritas perbaikan yang jelas, lengkap dengan estimasi berapa banyak waktu muat yang bisa dihemat jika perbaikan tersebut diterapkan.

Memahami metrik Core Web Vitals langsung dari laporan DevTools juga membantu teman-teman mengantisipasi penilaian performa yang digunakan oleh mesin pencari. Sebagai contoh, skor CLS yang buruk biasanya disebabkan oleh gambar atau iklan yang dimuat tanpa menyertakan atribut dimensi (widthDanheight) yang jelas, sehingga menyebabkan tata letak halaman bergeser secara tiba-tiba saat konten selesai diunduh. Dengan mendeteksi elemen penyebab pergeseran ini melalui highlight visual di DevTools, teman-teman bisa langsung memperbaiki aturan CSS layout agar pengalaman user menjadi jauh lebih stabil.

Teknik Lanjutan Pakai Remote Debugging dan Mobile Emulation

Bekerja sebagai web developer modern menuntut pengujian lintas perangkat yang konsisten. Selain pakai mode emulator perangkat mobile standar, DevTools menyediakan kapabilitas Remote Debugging yang bikin teman-teman menghubungkan perangkat seluler fisik (Android) via kabel USB langsung ke komputer desktop.

• USB Debugging: Aktifkan opsi developer di ponsel Android, sambungkan via USB, lalu bukachrome://inspectDi browser desktop untuk mengontrol DevTools perangkat seluler secara langsung.
• Screen Casting: Tampilkan layar ponsel secara real-time di jendela monitor desktop dan lakukan klik pakai mouse komputer untuk pengujian interaktif yang lebih cepat.
• Network Simulation via Device: Gabungkan mode remote debugging dengan Network Throttling untuk merasakan performa aktual aplikasi web di jaringan seluler nyata.

Teknik remote debugging ini penting banget ketika teman-teman harus mendiagnosis bug spesifik yang hanya muncul di browser perangkat seluler tertentu dan tidak bisa direplikasi di emulator desktop. Seringkali, perbedaan implementasi mesin JavaScript atau rendering CSS pada versi mobile menimbulkan perilaku tak terduga yang sulit dilacak tanpa melihat langsung ke dalam memori perangkat fisik tersebut. Dengan menghubungkan perangkat via USB, seluruh log konsol, pemeriksaan DOM, dan inspeksi jaringan dari ponsel akan terpampang jelas di layar monitor desktop teman-teman.

Selain itu, manfaatkan fitur Sensors di dalam menu tambahan DevTools untuk menguji fungsionalitas berbasis hardware seperti geolokasi GPS, orientasi akselerometer, dan orientasi layar (potret vs lanskap). Fitur ini bikin teman-teman mensimulasikan perpindahan koordinat lintang dan bujur secara virtual, menguji apakah peta atau layanan berbasis lokasi di aplikasi web merespons perubahan tersebut dengan benar tanpa harus benar-benar berpindah tempat secara fisik.

Memahami Keamanan dan Kebijakan Konten di DevTools

Keamanan aplikasi web adalah pilar yang tidak boleh diabaikan. Melalui panel Security di DevTools, teman-teman dapat memverifikasi sertifikat SSL/TLS, memeriksa keamanan koneksi sumber daya eksternal, dan memantau pelanggaran Content Security Policy (CSP) secara langsung.

• Certificate Overview: Periksa detail masa berlaku sertifikat SSL dan validitas rantai kepercayaan (certificate chain) dari domain yang sedang diakses.
• Mixed Content Warning: Identifikasi dengan cepat apakah ada aset tidak aman (HTTP) yang dimuat di dalam halaman yang seharusnya sudah mengamankan protokol HTTPS.
• Security Panel Insights: Lihat rincian protokol jaringan yang digunakan (seperti TLS 1.3) dan pastikan tidak ada celah enkripsi usang yang aktif.

Menjaga agar situs web tetap bersih dari peringatan Mixed Content adalah salah satu tanggung jawab utama frontend developer. Ketika sebuah situs HTTPS memuat gambar atau skrip dari URL HTTP biasa, browser modern akan secara otomatis memblokir sumber daya tersebut atau menampilkan peringatan merah di konsol. Panel Security di DevTools memberikan ringkasan instan mengenai asal-usul aset yang melanggar kebijakan keamanan ini. Teman-teman bisa segera update link sumber daya tersebut menjadi protokol yang aman.

Di samping itu, ketika tim keamanan menerapkan aturan ketat berupa Content Security Policy (CSP), panel konsol DevTools akan langsung meneriakkan pesan pelanggaran jika ada skrip pihak ketiga atau inline script yang mencoba berjalan di luar izin yang telah ditentukan. Memahami cara membaca laporan pelanggaran CSP ini membantu teman-teman menyesuaikan config header keamanan server tanpa harus merusak fungsionalitas inti aplikasi web yang sedang dikembangkan.

Mengoptimalkan Alur Kerja dengan Fitur Snippets dan Workspace

Bagi teman-teman yang sering menulis kode pengujian atau skrip kecil yang harus dijalankan berulang kali di berbagai situs, mengandalkan baris perintah console biasa tentu sangat melelahkan. Di sinilah peran tab Sources -> Snippets menjadi sangat berguna sebagai tempat penyimpanan skrip utilitas pribadi.

• Custom Snippets: Tulis skrip JavaScript modular di panel Snippets, simpan, dan jalankan kapan saja di halaman web mana pun hanya dengan klik kanan lalu pilih Run.
• Workspace Mapping: Hubungkan direktori file project lokal di komputer dengan tab Sources DevTools agar perubahan file dapat disinkronkan secara otomatis.
• Logpoints: Gunakan Logpoints alih-alihconsole.log()Permanen; klik kanan pada nomor baris di tab Sources, masukkan ekspresi log, dan kode akan mencetak pesan ke konsol tanpa harus merusak baris kode asli.

Pakai fitur Logpoints adalah salah satu trik tingkat lanjut yang membedakan developer amatir dan profesional. Alih-alih menulis ulang kode denganconsole.log("nilai:", x), lalu melakukan commit dan push ulang ke server, teman-teman cukup menempatkan Logpoint di baris kode tersebut langsung di DevTools. Baris kode asli di file sumber tidak akan tersentuh sama sekali, menjaga kebersihan repo Git dari tumpukan log debugging sementara yang sering lupa dihapus.

Kombinasi antara workspace mapping, snippets, dan pemahaman mendalam tentang setiap tab fungsional di DevTools akan mengubah cara pandang teman-teman terhadap peramban web. Browser bukan lagi sekadar alat penampil dokumen statis, tapi sebuah lingkungan pengembangan terpadu yang sangat canggih, transparan, dan siap diandalkan untuk membangun aplikasi web modern berstandar tinggi.

Checklist

• Buka panel DevTools pakai pintasan F12, Ctrl+Shift+I, atau Cmd+Option+I di peramban.
• Cari pengaturan atau perintah cepat secara instan lewat Command Menu pakai Ctrl+Shift+P.
• Uji responsivitas tata letak situs pakai fitur Device Mode tanpa harus membuka perangkat fisik.
• Edit elemen HTML dan coba properti CSS secara langsung di tab Elements untuk eksperimen instan.
• Kunci status hover atau active pada elemen DOM lewat opsi Force State agar lebih mudah diatur gayanya.
• Periksa kode status HTTP dan payload data dari permintaan XHR atau Fetch API lewat tab Network.
• Simulasi koneksi internet lambat saat menguji aplikasi web pakai fitur Network Throttling.
• Rekam aktivitas CPU di tab Performance untuk mendeteksi Long Tasks yang bikin halaman patah-patah.
• Ambil Heap Snapshot di tab Memory guna melacak potensi memory leak pada objek JavaScript.
• Periksa dan hapus data penyimpanan lokal seperti LocalStorage, SessionStorage, dan Cookies di tab Application.
• Jalankan audit otomatis pakai Lighthouse untuk mengevaluasi performa, SEO, dan aksesibilitas situs.
• Simpan skrip pengujian JavaScript harian yang sering dipakai langsung ke dalam tab Snippets.

Poin penting

• Pelajari shortcut keyboard DevTools utama untuk mempercepat proses navigasi dan inspeksi elemen situs web.
• Manfaatkan tab Elemen dan CSS untuk melakukan eksperimen tata letak visual secara langsung dan instan.
• Gunakan fitur Force State pada elemen HTML guna menguji status hover maupun focus secara permanen.
• Pantau aktivitas trafik jaringan lewat tab Network untuk mendiagnosis lambatnya waktu muat aset halaman.
• Analisis performa aplikasi web pakai panel Performance demi mengidentifikasi hambatan rendering JavaScript yang terjadi.
• Manfaatkan fitur Local Overrides agar perubahan kode di browser tersimpan otomatis ke direktori proyek lokal.