10 Ekstensi Chrome yang Wajib Diinstal untuk Meningkatkan Produktivitas Programmer Web

Browser apa yang Kamu pakai untuk mengembangkan aplikasi web? Chrome, Firefox? Mungkin rata-rata programmer web menggunakan kedua browser tersebut. Berdasarkan pencatatan dari StatCounter Global Stats pada statistik 1 tahun terakhir (Januari 2015-Januari 2016), pengguna internet di Indonesia rata-rata menggunakan browser Chrome dan Firefox masing-masing di kisaran 40% ke atas.  sisanya adalah pengguna Internet Explorer, Opera, Safari dan browser lainnya dengan total pengguna 7%. Hal ini mungkin sudah bisa kita tebak. Baik Chrome dan Firefox memiliki tingkat perkembangan yang tinggi, baik dari segi trend, kemudahan pemakaian, juga karena ketersediaan ekstensi atau addon yang meningkatkan fungsionalitas browser.

Pada tulisan kali ini saya akan mengulas 10 ekstensi browser Chrome yang bisa kita manfaatkan khususnya bagi web developer untuk meningkatkan produktivitas dalam membangun sebuah aplikasi. Ekstensi yang kami pilih adalah ekstensi yang memiliki rating di atas bintang 4, dengan pengguna terbanyak pada variannya. Selain kriteria tersebut, penulis juga memasukkan pertimbangan kelengkapan fungsionalitas dalam pengembangan aplikasi web. Adapun urutan penyajian tidak dalam konteks menunjukkan peringkat dari segi kualitas dan fungsionalitas. Berikut diantaranya.

Check My Links

Ekstensi ini mengecek semua tautan yang ada di sebuah halaman web dan mengecek apakah tautan tersebut masih tersedia atau sudah terputus. Check My Links mengecek satu per satu tautan kemudian memberi warna latar hijau pada tautan bila tautan tersebut masih tersedia, dan memberi latar merah apabila tautan tersebut terputus/tidak tersedia. Selain itu daftar status tautan yang dicek dapat diakses pada console log Chrome.

ColorZilla

Ekstensi ini membantu kita untuk mendapatkan kode warna dengan cepat dari komponen apapun di sebuah halaman web. Tinggal aktifkan ekstensi dan arahkan kursor pada bagian atau gambar di halaman web dan kode warna pun langsung tersalin ke clipboard. Selain itu kita juga dapat memilih warna dari palet yang sudah disediakan oleh ekstensi.

Clear Cache

Kadangkala ketika kita membangun sebuah halaman web kemudiam memodifikasi beberapa komponen di dalamnya, perubahan pada halaman web tidak langsung muncul disebabkan oleh cache. Dengan ekstensi ini kita dapat membersihkan cache browser dengan sekali klik. Kita juga bisa mengeset ekstensi supaya dia dapat membersihkan yang lain seperti cookies, download, history, password, local storage dan lain-lain.

JSONView

Ekstensi ini membantu merapikan tampilan dokumen JSON agar lebih mudah dibaca. Tampilan JSON yang rapi akan memudahkan kita dalam proses debugging. Selain itu ekstensi ini juga memberitahu kita apabila ada bagian format JSON yang tidak valid.

IE Tab

Seringkali ketika kita membuat template web, kita mesti mengecek kompatibilitas browser untuk memastikan keajegan tampilan web saat dibuka di browser apapun. Namun bagian paling merepotkan adalah ketika kita mesti mengecek template kita pada browser Internet Explorer (IE) karena setiap versi IE memiliki fitur yang berbeda. Dengan menggunakan ekstensi ini, kita dapat mengecek kompatibilitas template pada semua versi browser IE tanpa perlu lagi menginstal semua versi IE di komputer.

Code Cola

Kamu ingin menerapkan fitur keren dari CSS3 di templatemu tapi seringkali masih bingung dengan format penulisan dan parameternya. Coba ekstensi ini, dan kamu bisa mencobakan fitur CSS dan CSS3 pada halaman webmu hanya dengan klik dan geser. Code Cola dirancang dengan tampilan GUI yang intuitif. Setelah puas, kita tinggal salin kode CSSnya ke dalam file css kita.

Web Developer

Dengan menginstal ekstensi ini ke dalam browser Chrome-mu, Kamu sudah mendapatkan hampir segala sesuatu yang Kamu perlukan untuk memanipulasi dan mengetes webmu. Manipulasi JavaScript, CSS, cookies, gambar, ukuran tampilan layar, menganalisis struktur markup, hingga memvalidasi kode.

Nimbus Screenshot

Ekstensi ini berfungsi untuk meng-capture halaman web menjadi file gambar, baik keseluruhan halaman ataupun bagian tertentu saja yang diinginkan. Selain itu kita juga dapat menambahkan catatan dan coretan yang diperlukan pada gambar tersebut sebelum disimpan ke dalam file.

Corporate Ipsum

Seringkali kita harus menyiapkan dummy content (contoh konten) pada saat membuat template atau membangun website. Biasanya contoh teks yang digunakan adalah lorem ipsum dolor dan sebagainya. Dengan ekstensi ini, kita dapat membuat contoh teks acak yang masih bisa dibaca dan nampak seperti konten asli, hingga maksimum 500 kata.

Wappalyzer

Wappalyzer adalah ekstensi yang mendeteksi teknologi yang digunakan untuk membangun suatu website. Ekstensi ini memberitahu kita informasi website yang ingin kita selidiki teknologinya, seperti CMS apa yang digunakan, bahasa pemrograman, platform eCommerce, framework JavaScript, dan banyak lagi.

Referensi: chrome.google.com, UserSnap.com, awwwards.com.

Gambar: chrome.google.com.