🙏🏻 🙅🏻 👩🏽‍🚀 Ekstensi browser diperlukan oleh setiap pengembang web 🐆 💍 🐦

Browser modern bukan hanya aplikasi penjelajahan web yang bagus.

Browser juga merupakan platform yang menawarkan pengembang web banyak alat praktis untuk membantu mereka membuat situs yang hebat. Di pihak pengembang, selain alat bawaan, ada sejumlah besar ekstensi peramban. Penulis artikel, terjemahan yang kami terbitkan hari ini, telah memilih yang terbaik, menurut pendapatnya, ekstensi yang dirancang untuk membantu programmer memecahkan berbagai tugas yang dihadapi mereka. Ini terutama ekstensi untuk Google Chrome.

Alat Pengembangan untuk React / Redux dan Vue.js

React dan Vue.js adalah alat pengembangan front-end yang terkenal. Agar dapat bekerja dengan mereka seefisien mungkin, ada baiknya menginstal ekstensi browser yang sesuai.

Ekstensi Bereaksi Alat Pengembang meningkatkan kemampuan alat pengembang. Menggunakannya, Anda dapat memeriksa Bereaksi komponen, properti diteruskan ke komponen, dan keadaan komponen. Ini dapat membawa manfaat nyata bagi pengembang Bereaksi.

Bereaksi Alat Pengembang

Jika Anda mengalami masalah saat bekerja dengan keadaan aplikasi, ekstensi Redux DevTools dapat membantu Anda. Ini dapat digunakan untuk bekerja dengan kondisi yang diatur dalam cara yang berbeda, ini bekerja dengan sangat baik ketika digunakan dengan Redux. Ngomong-ngomong, ini tip untukmu. Pasang ekstensi ini dan kunjungi situs seperti airbnb.com. Menggunakan React / Redux, sehingga Anda, dengan bantuan Redux DevTools, akan dapat mengetahui bagaimana pengelolaan keadaan halaman di situs ini bekerja. Bagi saya - jadi ini sangat informatif.

Vue.js devtools sama dengan React Developer Tools, tetapi untuk Vue.js. Ekstensi ini sangat nyaman untuk men-debug komponen Vue dan berguna bagi semua orang yang menggunakan kerangka kerja ini.

Vue.js devtools

Jsonview

Pernahkah Anda menangkap gagasan bahwa di browser programmer lain, data JSON terlihat jelas dan akurat, tetapi tidak pada Anda? Mungkin intinya adalah bahwa orang lain menggunakan ekstensi JSONView . Ekstensi ini sangat cepat dan akurat memformat data JSON. JSONView jelas merupakan salah satu ekstensi peramban favorit saya.

Jsonview

Sniffer perpustakaan

Library Sniffer adalah alat yang hebat bagi siapa saja yang ingin cepat mengetahui alat, perpustakaan atau kerangka kerja apa yang digunakan untuk membuat halaman yang mereka lihat. Misalnya, dengan bantuan Library Sniffer, Anda dapat mengetahui situs apa yang dibuat dengan: WordPress, Drupal, React, Vue.js, AngularJS ...

Sniffer perpustakaan

Pemindaian CSS 2.0

CSS Scan 2.0 adalah ekstensi yang berguna yang memungkinkan pengembang untuk mengeksplorasi dan menyalin CSS hanya dengan mengarahkan elemen halaman. Benar, dia punya satu minus. Faktanya adalah bahwa untuk bekerja dengannya Anda perlu membeli lisensi.

CSS Scan 2.0

Ekstensi ini memiliki alternatif gratis - CSS Peeper . Ini dirancang terutama untuk desainer, dan bukan untuk mereka yang menulis kode.

Pengembang web

Ekstensi Pengembang Web memungkinkan Anda untuk melengkapi browser Anda dengan panel yang berisi banyak alat berbeda. Dengan bantuan mereka, misalnya, Anda dapat mematikan JavaScript pada halaman, mengontrol lokasi halaman, dan bekerja dengan gambar. Ekstensi ini tersedia untuk Chrome dan Firefox.

Pengembang web

Whatfont

WhatFont adalah ekstensi kecil yang memungkinkan Anda mengidentifikasi font yang digunakan pada halaman web. Untuk mengetahui jenis font yang digunakan untuk fragmen teks, itu cukup untuk mengaktifkan ekstensi dan memindahkan pointer mouse ke fragmen ini. Bekerja dengannya, seperti yang Anda lihat, sangat sederhana. Ini, seperti ekstensi sebelumnya, dapat digunakan oleh mereka yang bekerja di Chrome, dan mereka yang bekerja di Firefox.

Whatfont

Colorzilla

The ekstensi ColorZilla dapat digunakan di kedua Chrome dan Firefox. Ini memberi pengembang alat untuk mengambil bukti warna, alat untuk memilih warna, generator gradien dan alat berguna lainnya untuk bekerja dengan warna. Misalnya, Anda dapat menggunakannya untuk mengetahui warna apa yang dimiliki piksel pada laman web. Ini menyimpan sejarah bekerja dengan warna dan berisi alat untuk melihat palet.

Colorzilla

Spektrum

Aksesibilitas konten adalah aspek penting dari pengembangan web modern. Faktanya adalah bahwa banyak orang memiliki kemampuan terbatas untuk berinteraksi dengan halaman web. Salah satu batasan tersebut adalah Kekurangan Visi Warna (CVD). Ini mempengaruhi kemampuan seseorang untuk membedakan warna-warna tertentu. Ekstensi Spectrum memungkinkan Anda untuk meneliti situs untuk kesesuaiannya bagi orang-orang dengan berbagai jenis CVD.

Spektrum

Palet situs

Ekstensi Palet Situs memungkinkan Anda untuk mengekstrak warna yang digunakan di situs dari situs dan mengaturnya sebagai palet warna. Ini mendukung beberapa cara untuk menghasilkan palet, memungkinkan Anda untuk mengeluarkan palet dengan mengeluarkan tautan khusus, mendukung kemampuan untuk mencetak palet, dan tahu bagaimana mengubahnya menjadi file PDF. Dan ini tidak terbatas pada Palet Situs.

Palet situs

Toby

Ekstensi Toby dirancang untuk mengatur tab peramban sedemikian rupa sehingga selama pekerjaan Anda tidak perlu membuka banyak tab. Ini adalah semacam panel kontrol tab yang mudah digunakan dengan mouse. Ekstensi ini dapat secara positif memengaruhi produktivitas pengembang web.

Toby

Talend API Tester

Talend API Tester adalah ekstensi hebat yang memungkinkan Anda bekerja dari peramban dengan berbagai API. Ini bisa berupa API berdasarkan teknologi REST, SOAP, dan HTTP. Ini mirip, misalnya, dengan tukang pos. Versi gratis ekstensi mendukung eksekusi semua jenis permintaan HTTP, pertukaran data yang aman, otentikasi.

Talend API Tester

Tangkapan Layar Layar Penuh

Pernahkah Anda ingin dengan cepat dan tanpa gerakan yang tidak perlu mengambil tangkapan layar penuh dari halaman yang Anda lihat? Jika demikian, maka ekstensi Pengambilan Layar Halaman Penuh mungkin berguna . Dengannya, Anda bisa mendapatkan tangkapan layar dari seluruh konten halaman dalam format PDF atau sebagai gambar. Ia bahkan dapat bekerja dengan elemen yang mendukung pengguliran, dan dengan elemen iframe.

Tangkapan Layar Layar Penuh

Ringkasan

Kami meninjau sekitar selusin ekstensi browser untuk pengembang web. Kami harap Anda menemukan sesuatu di antara mereka yang berguna bagi Anda.

Pembaca yang budiman! Ekstensi browser apa yang Anda gunakan untuk pengembangan web?

Ekstensi browser diperlukan oleh setiap pengembang web