10+ Chrome Extensions Yang Harus Dimiliki Web Developer

Posting Komentar

KnoAcc.Org - Beberapa minggu belakangan, saya mulai aktif belajar lagi menjadi web developer. Berkesempatan mendapatkan kartu prakerja, saya membelanjakan saldo prakerja di sekolah koding ternama di Indonesia. Kebetulan saya sudah punya akun dicoding sejak 2016.

Selain memasang kembali Visual Studio Code dan beberapa plug-in yang berguna, saya pun menambahkan beberapa Chrome Extension untuk mempermudah pembelajaran dan penyelesaian tugas terkait web developing. Beberapa extension sudah biasa saya pakai di masa lalu seperti OctoTree. Namun ada beberapa extension baru saya tahu seperti ColorZilla dan rasanya cukup berguna ketika membangun sebuah front-end UI.

chrome extensions

AWESOME CHROME EXTENSIONS FOR EVERY DEVELOPER

Nah, berikut ini adalah tools atau Chrome Extension yang harus dimiliki oleh web-developer baik pemula maupun yang sudah jago koding. Apa saja? Simak satu persatu ulasan di bawah ini:

1.OctoTree

Ekstensi atau plug-in chrome ini meningkatkan fungsi eksplorasi dan review koding di platform Github. Beberapa fitur yang cukup menarik dalam OctoTree seperti dark mode untuk membuat tampilan UI github menjadi bernuansa gelap. Fitur lain yang berguna adalah: code font setting, book marking, sidebar docking dan lain-lain. Dengan memasang Octotree di browser Chrome membuat Github terasa seperti Visual Studio Code.

Begini kira-kira tampilan Chrome setelah terpasang OctoTree

github with octotree

Untuk memasangnya, kamu bisa membuka tautan berikut di browser kamu https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc

2.Wappalyzer

Browser extension ini punya fungsi semacam technology profiler yang memberikan informasi tentang teknologi apa yang dipakai untuk membangun website dan wep-app yang sedang dikunjungi. Apa frameworks atau Javascript library yang dipakai dan digunakan untuk membangun website ini? Dengan memakai Wappalyzer, kamu bisa mengobati rasa penasaran kamu. Dan mungkin membantumu mendapatkan inspirasi untuk memulai sebuah project sendiri.

Begini tampilan Wappalyzer yang terpasang di Chrome ketika dipakai mengunjungi website Wappalyzer:

Chrome with Wappalyzer

Dan tautan yang bisa kamu kunjungi untuk mendapatan plug-in Wappalyzer adalah: https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=id

3.Web Developer

Apaan nih? Agak geli mebaca nama tool yang satu ini. Terkesan aneh gimana gitu. Namun kesan itu hilang setelah memasangnya. Browser extension ini menambahkan tombol di toolbar button dengan berbagai alat yang berguna dalam web developing terkait gambar, form dan berbagai alat-alat penting lainnya.

Begini tampilan ekstensi Web Developer yang sudah terpasang di Google Chrome:

Web Developer in Chrome

Kamu bisa mendapatkannya melalui tautan berikut: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

4.Windows Resizer

Well, desain Web Responsive merupakan satu aspek paling penting ketika dalam dunia pengembang web. Ektensi Windows Resizer membantumu merubah-rubah ukuran view jendela browser agar bisa meniru resolusi berbagai perangkat. Tool ini cukup membantu UI designer maupun pengembang web untuk men-tes seberapa baik tampilan dan layout ketika dibuka dalam berbagai macam perangkat yang punya resolusi berbeda-beda.

Meski sudah sangat banyak dan variatif, daftar dimensi resolusi layar juga bisa diubah-ubah sendiri sesuai keinginan. Kamu bisa mengkustomasi lebar/tinggi layar, posis layar, preset icon (ponsel, tablet, laptop atau desktop) dan bahkan pilihan untuk merubah dimensi jendela secar keseluruhan maupun hanya viewport nya saja.

Selain itu, semua kustomasi dan pengaturan yang sudah kamu lakukan bisa kamu simpan dan langsung kamun pakai dikomputer lain.

Ini dia tampilan Chrome dengan ekstensi Web Developer:

Web Developer Chrome

Kamu bisa memasangnya dengan mengunjungi tautan berikut: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=id

Browser extension ini merupakan sebuah link checker yang menelusuri tautan halaman yang sedang dibuka dan mencari tautan yang rusak/putus. Sangat berguna bagi web developers yang mengerjakan web-app atau website yang sudah punya ratusan bahkan ribuan link. Bayangkan jika kamu harus mengecek tautan yang rusak satu-persatu!

Ekstensi ini akan segera menyorot tautan yang ada baik yang rusak/broken (warna merah), tautan valid (warna hijau) dan mana tautan redirect dan banyak lagi. Sederhana tapi sangat berguna.

Ini contoh tampilan Check My Links ketika dipakai membuka sebuah halaman web:

Check My Links

Silahkan pakai tautan berikut untuk memasang di browser Chrome: https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=id

6.What Font

Dengan ektensi ini, kamu bisa mencari tahu web fonts yang dipakai hanya dengan menempatkan kursor di atas teks yang ingin diketahui. Selain itu, What Font juga mendeteksi layanan yang dipakai untuk menyediakan web fonts. Mendukung Typekit dan Google Font API.

Mencari tahu jenis font yang dipakai dan lokasi sumberdaya-nya pada sebuah website maupun web-app menjadi lebih mudah.

Seperti ini tampilan What Font:

What Font

Bisa dipasang melalui tauata berikut: https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=in

7.ColorZilla

Sebuah browser extension yang membatu web developers dan graphic designers terkait palet warna yang dipakai. Cara memakainya pun sederhana. Cukup arahkan ke atas element web untuk mendapat semua informasi warna yang dipakai. Di dalamnya sudah termasuk fitur Color Picker, Eye Dropper, Gradient Generator dan banyak lagi….

ColorZilla ini sangat mirip dengan Color By Fardos.

Begini tampilan ColorZilla ketika dipsang di Google Chrome: ColorZilla

Kamu bisa memasangnya dengan mengunjungi tautan langsung berikut: https://www.colorzilla.com/chrome/

8.Web Developer Checklist

Cuku membantu untuk menganalisa dan menemukanviolations (kesalahan umum) dan masalah apa saja yang ada dalam mendesain web.

Web Dev Checklist

Bisa didapatkan melalui tautan langsung berikut: https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=id

9.CSS Viewer

Dengan memakai browser extension ini mempermudah kamu ketika ingin mendapatkan informasi property CSS sebuah element tertentu pada sebuah website. Cukup mengarahkan kursor/pointer ke lokasi elemen yang ingin kami cari tahu nila properti-nya dan informasinya bisa kamu dapatkan secara instan.

Bonus: CSS viewer punya kembaran yang punya fitur hampir sama yakni Code Cola.

CSS viewer

Berikut ini tautan langsung menuju ekstensi CSS Viewer: https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=id

10.Pesticide

This is the absolute easiest way to visualize box sizing in CSS. Don’t believe me? Take a look at this. With pesticide, you see every element as a box with borders around them. See how the borders, margins, paddings and more affect the element. It is a pretty great extension.

pesticide

Here is a direct link to add it to your browser: https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi?hl=id

Mana ekstensi yang sudah kamu pakai? Menurutmu apakah ada daftar di atas yang layak untuk dicoba? Berikan komentarmu.

Jika menurutmu artikel ini berguna, berikan apresiasi dengan membagikan ke teman melalui sosmed milikmu.

Jon Moekidi
Jon Moekidi
Bukan pendiam, lebih suka diam dan mendengarkan.

Related Posts

Posting Komentar

Follow by Email