Web Tutorial
Now Reading
5 Ekstensi Browser Yang Digunakan Untuk Web Developer Part 1
Sangat Bernilai
1

Halo sobat BierPinter, selamat datang kembali di website kami. Kali ini aku akan membagikan informasi 5 Ekstensi browser yang digunakan untuk web developer. Dengan menggunakan ekstensi ini kalian dapat memaksimalkan dan mempermudah projek website kalian. Ekstensi ini bisa digunakan oleh programmer, web developer, desainer, dan sejenisnya.

Kita akan menggunakan ektensi dari browser Google Chrome. Kenapa Google Chrome ? Karena sangat kompatibel untuk web developer. Berjuta ekstensi yang ada di Google Chrome,  tapi kita hanya menggunakan 10 ekstensi saja. Sesuai judul, akan ada kelanjutannya di part 2 ya teman-teman.

Inilah 5 Ekstensi Browser Yang Digunakan Untuk Web Developer

Menjadi seorang web developer tidak bisa dibilang mudah, karena banyak pekerjaan rumit yang harus dilakukan. Segala sesuatu yang dikerjakan semua ber-urusan dengan koding. Bayangkan, jika ada projek besar yang bisa Anda lakukan hanyalah koding. Itu sangat membuang waktu dan melelahkan. Anda pasti membutuhkan suatu alat yang dapat mempermudah pekerjaan Anda. Alat itu adalah ektensi. Dengan menggunakan 5 ekstensi browser yang digunakan untuk web developer, banyak hal yang bisa membuat pekerjaan Anda lebih mudah. Seperti: mengetahui warna, javascript, CSS, umur website, menggunakan CMS apa, hosting, dll.

Sebelum kita bahas daftar ektensinya, aku akan menjelaskan bagaimana cara masuk ke ektensi Google Chrome. 2 cara yang bisa kalian lakukan:

Perhatikan gambar dibawah ini untuk melihat hasilnya.

Tampilan Ektensi Google Chrome

Buat teman-teman yang telah membaca artikel ini, jangan lupa untuk like dan share jika konten ini bermanfaat. Terima kasih 🙂

1. Web Developer

Web Developer Ektension

Ekstensi Web Developer adalah suatu alat yang membantu Anda untuk menemukan CSS yang terdapat pada website. Beberapa fitur lainnya bisa Anda lihat dibawah ini:

  • Disable JavaScript
  • Disable Notifications
  • Disable Plugins
  • Disable Cookies
  • View Cookie Information
  • Disable All Styles
  • Edit and View CSS
  • Display Print Styles
  • Convert Form Gets to POSTs
  • Display Passwords
  • Remove Form Validation

  • Disable Images
  • Display Abbreveations
  • Display Access Keys
  • Display Anchor
  • Clear Cache
  • Display Window Size
  • Validate CSS, Feed, HTML
  • View Source
  • Reset Page
  • Dll.

Informasi Tambahan

  • Versi: 0.5
  • Diperbarui: 10 Agustus 2017
  • Ukuran: 1.09MiB
  • Bahasa: English (United States)
  • Ekstensi ini tersedia untuk Chrome, Firefox, dan Opera, dan akan berjalan di platform apa pun yang didukung browser ini termasuk Windows, OS X, dan Linux.
  • Website: https://chrispederick.com

2. Page Ruler

Ekstensi Page Ruler

Ekstensi Page Ruler adalah suatu alat yang membantu Anda untuk mengukur jarak website, mengukur jarak dari elemen ke elemen lain. Berikut fitur lainnya dibawah ini:

  • Gambarkan penggaris ke halaman mana pun dan lihat lebar, tinggi dan posisi atas, bawah, kiri dan kanan.
  • Tarik tepi penggaris untuk mengubah ukurannya.
  • Gunakan tombol panah untuk memindahkan dan mengubah ukuran penggaris.
  • Tampilkan panduan memanjang dari tepi penggaris.
  • Secara manual memperbarui ukuran dan posisi penggaris dari bilah alat untuk membuat perubahan presisi.
  • Aktifkan “Elemen Mode” untuk menguraikan elemen pada halaman saat Anda memindahkan mouse ke atasnya.
  • Navigasikan melalui elemen orang tua, anak-anak dan saudara dari elemen apa pun yang diukur.
Penting: Untuk digunakan di halaman lokal, Anda harus mengaktifkan opsi “izinkan akses ke URL file” di tab ekstensi Anda.

Informasi Tambahan

  • Versi: 1.0.1
  • Diperbarui: 31 Juli 2018
  • Ukuran: 248KiB
  • Bahasa: Bahasa Indonesia, English, English (UK), Prancis, Tieng Viet, Spanyol, Italy, Portugal, Brazil, Slovenia, Arab, pyccknn.

3. Dimensions

Ekstensi Dimensions

Ekstensi Dimensions adalah alat yang mengukur dimensi dari penunjuk mouse Anda ke atas, bawah, kiri dan kanan hingga menyentuh perbatasan. Ini sangat cocok untuk digunakan dalam mengujur jarak elemen di website. Berikut fitur lainnya dibawah ini:

  • Images & HTML Elements
    Ukur di antara elemen-elemen berikut: gambar, kolom input, tombol, video, gif, teks, ikon. Anda dapat mengukur semua yang Anda lihat di browser.
  • Mockups
    Desainer Anda memberi Anda mockup sebagai PNG atau JPEG? Cukup letakkan di Google Chrome, aktifkan Dimensi dan mulai ukur.
  • Keyboard Shortcut
    Anda dapat memulai dan menghentikan dimensi dengan pintasan ALT + D.
  • Area Boundaries
    Ingin mendapatkan radius lingkaran? Apakah teks berdiri di jalan Anda? Tekan Alt untuk mengukur dimensi area yang terhubung.

Informasi Tambahan

  • Versi: 2.0.5
  • Diperbarui: 14 Maret 2017
  • Ukuran: 16.51KiB
  • Bahasa: English

4. WhatFont

Ekstensi WhatFont

Ekstensi WhatFont adalah alat  yang dapat mengetahui jenis font apa yang digunakan website tersebut. Dengan mengarahkan kursor mouse Anda ke teks, akan muncul popup yang menberitahukan jenis font tersebut. Apa cara termudah untuk mengetahui font yang digunakan di halaman web ? Firebug dan Webkit Inspector cukup mudah digunakan untuk pengembang. Namun, bagi yang lain, ini tidak perlu. Dengan ekstensi ini, Anda bisa memeriksa font web hanya dengan mengarahkannya.

Informasi Tambahan

  • A new design thanks to Siddharth Mate
  • Retina toolbar icon
  • Fix option page for button styles
  • Use native screen capturer
  • Improved sharing
  • Added font services detection for FontDeck (Thanks to Mark Perkins)
  • Improved font detecting algorithm
  • Improved overall performance
  • Added color detection for text
  • Added a tweet button for instant sharing through Twitter
  • Improved style reseting
  • Overall restyling
  • Supported light icon for dark themes
  • Fixed a bug related to Typekit service detection
  • Reduced loading time
  • Supported HTTPS protocol
  • Fixed stylesheet bug
  • Restructured source code
  • Supported font services detection for Typekit and Google Font API
  • Fixed toolbar button bug. Second click is now “Exit WhatFont”.

5. Colorpick Eyedropper

Ekstensi Colorpick Eyedropper

Ekstensi Colorpick Eyedropper adalah alat yang dapat membantu Anda untuk menentukan warna di website. Cukup arahkan mouse Anda, maka kode warna akan muncul.

Informasi Tambahan

Versi: 0.0.2.13
Diperbarui: 15 November 2017
Ukuran: 960KiB
Bahasa: English

Demikianlah 5 ekstensi browser yang digunakan untuk web developer versi BierPinter. Semua kegiatan projek website kalian akan lebih mudah berkat bantuan 5 ekstensi ini. Akan ada 5 ekstensi lagi di part 2. So, ditunggu aja ya teman-teman. Jika kalian suka dengan konten ini, tekan tombol like yang ada dibawah dan jangan lupa untuk share artikelnya. 🙂

What's your reaction?
Luar Biasa
50%
Suka Sekali
0%
Keren
50%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
Carollous Dachi
1 Comments

Leave a Response