5 Ekstensi Google Chrome Wajib untuk Web Developer

Senjata Rahasia di Browser-mu

Sebagai web developer, Google Chrome (atau browser berbasis Chromium seperti Edge/Brave) adalah tempat kerja keduamu setelah VS Code. Agar kerjamu semakin efisien—terutama saat membedah kode website kompetitor—kamu wajib memasang 5 Ekstensi Chrome andalan ini.

1. Wappalyzer (Mata-mata Teknologi Web)

Pernah buka website *startup* yang sangat cepat dan keren, lalu penasaran: "Gila, website ini dibangun pakai apa ya?"

Wappalyzer akan menjawabnya untukmu dalam satu klik. Ekstensi ini mendeteksi 100% teknologi yang dipakai di balik layar sebuah web. Ia bisa tahu apakah web itu dibuat pakai WordPress, React, atau Vue. Ia juga mendeteksi database apa yang dipakai, font-nya apa, hingga layanan analytics apa yang terpasang.

2. JSON Viewer (Penyelamat Mata Backend)

Saat kamu menembak URL REST API di browser, data JSON yang muncul bentuknya adalah satu baris teks hitam putih mentah yang sangat panjang dan menyiksa mata.

JSON Viewer secara otomatis akan mencegat data API tersebut dan merapikannya (Pretty Print). Ia akan memberi warna, membuat indentasi yang rapi, dan menambahkan tanda panah agar kamu bisa membuka-tutup struktur Objek yang bersarang layaknya di editor VS Code.

3. ColorZilla (Pipet Warna Instan)

Sangat berguna untuk meniru desain website (Cloning) saat latihan. Saat kamu mengaktifkan ColorZilla, kursor mouse-mu akan berubah menjadi pipet (+). Arahkan pipet tersebut ke warna manapun di sebuah website (termasuk warna pada foto/banner), klik, dan kode Hexadecimal warnanya (misal: #F5A623) akan otomatis tersalin dan siap di-paste ke dalam file CSS-mu.

4. React Developer Tools (X-Ray untuk React)

Ekstensi resmi buatan tim Facebook. Jika kamu menggunakan React.js, ekstensi ini menambahkan dua tab khusus di Inspect Element-mu: Components dan Profiler.

Kamu bisa membedah DOM Tree dari sudut pandang Komponen React. Kamu bisa melihat langsung isi *State* dan *Props*-nya berubah secara *live* tanpa harus repot menulis console.log() di kodemu terus-menerus.

5. Dimensions (Pengukur Jarak Super Akurat)

Mendapat desain dari klien yang menuntut *Pixel-Perfect*? Aktifkan Dimensions. Ekstensi ini bertindak sebagai penggaris digital ajaib. Cukup arahkan kursor di antara sebuah teks dan sebuah gambar, dan ekstensi ini akan langsung memunculkan garis ukur beserta angka pastinya dalam satuan Pixel (misal: 60px). Tidak ada lagi acara menebak-nebak ukuran Margin atau Padding!