Sekitar 30 ekstensi dipasang di browser saya yang menyederhanakan masa pakai dan berfungsi di Internet. Dalam artikel ini saya ingin membagikan 10 ekstensi Google Chrome yang relevan untuk penyetel yang saya gunakan secara konstan ketika mengembangkan situs.
1. PerfectPixel
Contoh menggunakan PerfetPixel ketika mengembangkan blok baru di www.wrike.com
Tata letak situs pixel-to-pixel menyebabkan kesulitan bagi pemula dan profesional yang berpengalaman. PerfectPixel meng- overlay gambar layout di atas layout di browser. Dalam pengaturan ekspansi, Anda dapat menyesuaikan transparansi dan tata letak tata letak, yang memungkinkan Anda untuk memperhitungkan semua ukuran dan inden yang diperlukan. Menggunakan plugin ini akan menyederhanakan tata letak dan mengurangi jumlah pengeditan saat mengirimkan proyek. Dalam set ekstensi saya, PerfectPixel menempati posisi pertama karena fungsionalitas dan kegunaannya.
Tautan untuk menginstal ekstensi
2. Wappalyzer
Studi kasus Wappalyzer diaborate.wrike.com/2019/london
Selalu menarik alat dan teknologi apa yang digunakan di situs. Wappalyzer memberikan informasi tentang CMS, kerangka kerja JS, pustaka CSS, alat analisis, dan banyak lagi. Bayangkan bahwa animasi di situs adalah pustaka CSS gratis yang dapat Anda gunakan dalam proyek Anda. Ini akan mengurangi waktu pencarian untuk alat yang diperlukan dan menyadari teknologi yang digunakan situs.
Tautan untuk menginstal ekstensi
3. HTML5 Outliner
Header hierarki di habr.com/en/company/wrike
HTML 5 Outliner menampilkan daftar tajuk di halaman situs. Ekstensi membantu menyusun tajuk dan mengidentifikasi pelanggaran dalam hierarki. Misalnya, di tag bagian HTML 5 Outliner menampilkan peringatan tentang tidak adanya tag h2 . Ini adalah salah satu cara cepat dan mudah untuk menentukan penggunaan judul yang benar dalam tata letak.
Tautan untuk menginstal ekstensi
4. Wireframify
Studi Kasus Wireframify di www.wrike.com
Desainer mendesain situs menggunakan bingkai gambar - serangkaian garis, blok, dan tanda tangan. Pendekatan ini memungkinkan Anda untuk membuat arsitektur proyek berdasarkan lekukan, ukuran, dan lokasi blok pada halaman. Wireframify mencakup bentuk alternatif situs dalam bentuk bingkai gambar, yang akan membantu menghindari penggunaan yang salah:
- margin negatif;
- penyelarasan elemen menggunakan padding;
- lekukan menggunakan properti CSS kiri, kanan;
Tautan untuk menginstal ekstensi
5. PageLiner
Studi Kasus PageLiner di www.wrike.com/apps
Di editor grafis, Anda dapat menyelaraskan elemen atau menampilkan kisi situs menggunakan garis panduan. Pengeset dapat mengaktifkan fungsi ini di browser menggunakan PageLiner . Ekstensi menampilkan panduan serupa, seperti pada Adobe Photoshop yang sama. Dengan PageLiner, menyelaraskan elemen jauh lebih mudah.
Tautan untuk menginstal ekstensi
6. Pengembang Web
Daftar fitur pengembang web
Pengembang Web menambahkan toolbar tambahan ke browser. Di dalamnya ada 10 tab: Nonaktifkan, Cookie, CSS, Formulir, Gambar, Informasi, Lain-lain, Garis Besar, Ubah Ukuran dan Alat. Fungsi ekstensi memungkinkan Anda untuk:
- nonaktifkan CSS, JS dan gambar;
- periksa validitas HTML, CSS;
- memanipulasi gaya CSS;
- Uji formulir HTML
- tampilkan meta tag informasi yang diperlukan;
- Ubah ukuran jendela browser
- bersihkan cache;
Pengembang Web tetap menjadi ekstensi populer di kalangan pengembang. Ini dapat dibandingkan dengan multitool dalam kehidupan nyata: Anda selalu memiliki seperangkat alat yang diperlukan.
Tautan untuk menginstal ekstensi
7. CSS pengguna
Contoh CSS pengguna di www.wrike.com/customers
Bayangkan Anda ingin memperbaiki CSS secara langsung di browser, tetapi setelah itu Anda harus memuat ulang halaman. Semua prestasi Anda telah menghilang, dan Anda harus melakukan perubahan lagi. Gunakan CSS Pengguna , yang akan menyimpan gaya Anda. Tidak ada lagi kekhawatiran tentang menghilangnya CSS. Fungsionalitas ekstensi akan memungkinkan Anda untuk menguji CSS tertulis ketika pindah ke halaman lain.
Tautan untuk menginstal ekstensi
8. StyleURL
Studi Kasus StyleURL di Wrike www.wrike.com/customers
CSS pengguna tidak akan menggantikan panel pengembang browser. Jika Anda terbiasa bekerja di devtools dan pada saat yang sama tidak ingin kehilangan perubahan setelah memperbarui browser, instal StyleURL . Ekstensi akan mengingat perubahan Anda dan memberikan kemampuan untuk menyimpan karya dalam file terpisah atau mengunggah ke github gist.
Tautan untuk menginstal ekstensi
9. Siteimprove Pemeriksa Aksesibilitas
Studi Kasus Pemeriksa Aksesibilitas Siteimprove di www.wrike.com/newsroom
Siteimprove Accessibility Checker adalah alat yang memeriksa HTML untuk kepatuhan dengan standar aksesibilitas untuk menyediakan akses ke konten untuk semua orang. Ekstensi menampilkan kesalahan dengan informasi terperinci. Dalam deskripsi untuk mereka, Anda dapat menemukan catatan kaki dari WCAG 2 dan mengarahkan tautan ke artikel terperinci tentang aksesibilitas.
Tautan untuk menginstal ekstensi
10. Tabsbook
Contoh buku tab
Masing-masing berfungsi dengan bookmark dengan caranya sendiri. Ada yang menyimpan tautan untuk akses cepat ke situs, dan yang menggunakan bookmark untuk menyimpan informasi yang bermanfaat. Dengan Tabsbook Anda dapat mengubah bookmark Anda menjadi basis pengetahuan. Antarmuka ekstensi menampilkan struktur folder mirip pohon untuk memudahkan navigasi bookmark Anda. Semua data disimpan di cloud, yang memungkinkan Anda untuk mengaksesnya dari perangkat apa pun.
Tautan untuk menginstal ekstensi
Ekstensi akan bermanfaat bagi semua pemula dan profesional berpengalaman yang tidak tahu tentang mereka. Tulis di komentar mana ekstensi yang Anda gunakan.
Ekstensi peramban yang lebih bermanfaat dapat ditemukan di 10 tautan teratas plugin Chrome untuk perancang dan ekstensi Google Chrome yang berguna untuk programmer.