10 sambungan krom atas untuk aliran kerja pembangunan web anda

Industri pembangunan web pantas, dan menjaga trend tidak mudah. Oleh itu, adalah penting untuk memanfaatkan sepenuhnya alat sedia ada. Artikel ini akan memperkenalkan sepuluh sambungan Chrome yang direka untuk mengoptimumkan aliran kerja pembangunan web anda dan meningkatkan kecekapan.

mata teras:

Sambungan Chrome adalah perisian kecil yang meningkatkan pengalaman melayari dan produktiviti pemaju web. Beberapa pilihan popular termasuk pemaju web, alat pemaju rangka kerja anda, Daily 2.0, Toggl Button, Lighthouse, OneTab, CSS Peeper, CSS Pengguna, Senarai Semak Pemaju Web, dan Tampermonkey.
Pembangun Web adalah lanjutan yang mesti ada yang menyediakan pelbagai alat analisis web, termasuk melumpuhkan JavaScript, garis besar imej, saiz semula tetingkap pelayar, pengesahan HTML, dan melihat maklumat tag meta.
Daily 2.0 mengumpul pembangunan web terkini dan artikel teknikal dari Internet dan memaparkannya pada tab baru dalam susun atur mesra pengguna untuk membantu pemaju memahami berita industri.
Tampermonkey adalah pengurus skrip pengguna yang membolehkan pemaju mengubah tingkah laku web, menambah ciri tambahan, mengautomasikan tugas berulang, atau menyesuaikan susun atur laman web untuk keutamaan peribadi mereka.

Apakah lanjutan krom?

Seperti yang dinyatakan dalam portal pemaju Chrome, sambungan adalah program perisian kecil yang menyesuaikan pengalaman melayari anda. Ini boleh menjadi apa -apa dari pemeriksa ejaan dan tatabahasa untuk memeriksa apa yang anda taipkan, kepada pengurus kata laluan yang menjimatkan butiran log masuk laman web kegemaran anda.

Chrome menawarkan beribu -ribu sambungan, semuanya boleh didapati secara percuma dari kedai web Chrome. Anda boleh menyemak pelanjutan yang sedang dipasang dengan melawat pautan berikut dalam penyemak imbas anda:

. chrome://extensions/

Mengapa memilih Chrome?

Artikel ini memberi tumpuan kepada Google Chrome kerana ia mempunyai bahagian pasaran yang besar (kini 65% dan masih berkembang). Terdapat juga banyak sambungan sokongan penyemak imbas berasaskan krom. Ini termasuk Brave, Vivaldi, dan Microsoft Edge yang akan datang. Walau bagaimanapun, kita harus ingat bahawa Chrome bukan satu -satunya pilihan, dan banyak sambungan yang disebutkan di sini mempunyai Firefox dan/atau Opera Equivalents.

Akhir sekali, sebelum kita menggali lanjutan, luangkan masa untuk mengingati bahawa Chrome adalah perisian proprietari yang dikeluarkan oleh Google. Seperti yang kita ketahui, terdapat masalah privasi dengan produk Google, jadi anda mungkin dapat melawat GitHub dan melihat projek Ungoogled-Chromium. Seperti namanya, ini adalah Google Chromium dan tidak termasuk integrasi dengan Google.

1

kita akan bermula dengan pisau Tentera Switzerland pelanjutan. Dengan lebih daripada 1 juta pengguna dan penarafan bintang 4.5 dalam pemaju web Chrome adalah mesti ada. Ia menambah butang bar alat ke Chrome yang akan memaparkan sejumlah besar alat yang boleh digunakan untuk mana -mana laman web. Alat ini dikelompokkan mengikut kategori (CSS, Borang, Imej, dan lain .

anda boleh memuat turunnya dari sini.

2. Jika anda menggunakan rangka kerja JavaScript untuk membangunkan aplikasi anda tanpa alat pemaju yang menggunakan rangka kerja, anda mungkin melakukan sesuatu yang salah. Biar saya jelaskan dengan Vue sebagai contoh.

Jika anda perlu debug aplikasi Vue, atau hanya ingin mengetahui keadaan di belakang tabir, apa yang harus anda lakukan? Memeriksa kod sumber halaman akan menunjukkan HTML yang Vue sedang diberikan, tetapi aplikasi VUE lebih banyak daripada itu. Bagaimana dengan alat peraga, data atau pengiraan komponen? Atau bagaimana dengan status atau penghalaan permohonan anda? Bagaimana anda memeriksa kandungan ini?

Berita baiknya ialah alat pemaju Vue.js dapat memenuhi keperluan anda. Hanya pasang pelanjutan dan buka pada halaman yang menjalankan versi pembangunan VUE untuk melihat apa yang sedang berlaku dalam aplikasi.

Berikut adalah pautan untuk memuat turun tiga alat pemaju rangka kerja:

vue

React

• Ember
• 3.
Kerana kita bekerja dalam industri yang pantas, menjaga berita dan dinamik kadang-kadang boleh menjadi cabaran. Harian 2.0 muncul, lanjutan yang mengumpul pembangunan web terkini dan artikel teknikal dari Internet dan memaparkannya pada tab baru dalam susun atur batu yang menarik.

Pelanjutan ini mudah digunakan. Apabila anda memasangnya, anda akan diminta untuk memilih dari sekumpulan kategori yang menarik minat anda, dan Daily 2.0 akan melakukan yang lain. Tuding tetikus anda di bar sisi pada halaman tab baru untuk menapis suapan anda dengan tag dan sumber.

anda boleh mendapatkannya dari sini.

4.

Jika anda seorang freelancer yang sibuk, jika anda bekerja dari jauh, atau anda hanya perlu menjejaki masa yang anda habiskan untuk projek anda, Toggl adalah untuk anda.

Pelanjutan ini memerlukan anda membuat akaun sebelum menggunakannya. Sebaik sahaja log masuk, ia membolehkan pengesanan produktiviti masa nyata yang cepat dan mudah, semua data disimpan dalam akaun Toggl anda. Ia dilengkapi dengan pemasa pomodoro terbina dalam, serta integrasi banyak perkhidmatan internet seperti GitHub, Trello, dan Slack. Salah satu ciri kegemaran saya ialah apabila anda terbiar dan pemasa berjalan, ia muncul pemberitahuan yang membolehkan anda membuang masa.

toggl boleh dimuat turun dari sini.

5 Lighthouse adalah alat automasi sumber terbuka untuk meningkatkan prestasi dan kualiti laman web. Anda boleh memasangnya melalui kedai web Chrome, atau mulakan dengan Chrome 60 dan jalankan terus dari tab audit DevTools dalam penyemak imbas anda (tekan f12

dan pilih Audit).

Apabila Lighthouse dibuka, klik Generate Report dan pilih kategori audit untuk disertakan. Mercusuar akan menjalankan audit yang dipilih terhadap halaman dan menghasilkan laporan mengenai pelaksanaan halaman. Anda boleh menggunakan audit gagal sebagai metrik untuk meningkatkan halaman anda. Setiap ulasan juga mengandungi pautan ke pembacaan selanjutnya dan pembetulan yang berpotensi.

Lighthouse dibuat oleh Google dan mungkin menggunakan faktor ranking yang sama seperti enjin carian mereka. Ini bermakna ia dapat memberi anda nasihat terbaik tentang cara mengoptimumkan laman web anda.

anda boleh mendapatkannya dari sini.

6

Ini berlaku. Anda berurusan dengan aplikasi web anda dan tiba -tiba menghadapi ralat yang tidak dijangka. Anda menghabiskan berjam -jam menjejaki pembetulan dan apabila anda selesai, terdapat banyak tab yang dibuka di penyemak imbas anda. Tambah ini ke halaman tab projek yang anda sedang kerjakan semalam, dan semua artikel yang anda tidak mempunyai masa untuk membaca, dan tidak lama lagi anda akan mendapati diri anda dalam kekeliruan tag.

Ini adalah tempat pelanjutan OneTab dapat membantu anda mendapatkan kembali kewarasan anda. Setiap kali anda mendapati diri anda mempunyai terlalu banyak tab, klik ikon OneTab untuk menukar semua tab ke dalam senarai. Apabila anda perlu mengakses tab sekali lagi, anda boleh memulihkannya secara individu atau pada satu masa. Jika digunakan dengan betul, lanjutan ini dapat meningkatkan produktiviti anda.

OneTab boleh dimuat turun dari sini.

7

CSS Peeper kedudukannya sendiri sebagai penonton CSS yang direka untuk pereka, membolehkan anda mengekstrak CSS dan membina panduan gaya yang indah. Ia membolehkan anda menyemak peraturan CSS untuk mana -mana elemen di halaman dan membentangkan semua maklumat gaya dengan cara yang mudah dan jelas. Ia juga menyenaraikan semua warna dan imej halaman yang boleh disalin ke papan klip atau dieksport dengan hanya satu klik butang.

Pelanjutan ini lebih mudah digunakan daripada ciri "Elemen Semak" pelayar, satu-satunya kelemahan adalah bahawa anda tidak boleh mengubah gaya unsur secara dinamik.

Anda boleh mencari CSS peeper di sini.

8 Pelanjutan ini berfungsi dengan CSS Peeper dan menyediakan cara yang cepat dan mudah untuk menambah CSS tersuai ke laman web anda. CSS Pengguna mudah digunakan selepas pemasangan - klik ikon pelanjutan dan masukkan gaya anda di panel sisi slaid.

Ciri yang bagus dari lanjutan ini ialah ia mengekalkan gaya CSS tersuai anda. Ini bermakna anda juga boleh menggunakannya untuk menyembunyikan ciri -ciri yang mengganggu secara kekal di laman web yang sering anda lawati, seperti widget Trend di Twitter.

anda boleh memuat turun CSS pengguna dari sini.

9

Projek baru dalam talian boleh menjadi tekanan pada bila -bila masa - ada banyak yang perlu diingat dan menyelaras. Sebagai contoh, adakah anda ingat untuk mengesahkan HTML laman web? Adakah anda telah memeriksa SEO? Bagaimana dengan pemeriksaan fungsi tambahan? Adakah anda menjalankannya melalui kelajuan halaman Google? Senarai berterusan.

Ini adalah tempat penyenaraian semak pemaju web boleh membantu. Ia menganalisis pelanggaran amalan terbaik di laman web dan membolehkan anda menemui kawasan masalah di laman web sebelum menyerahkan laman web kepada pelanggan. Pelanjutan ini adalah program sahabat yang hebat untuk webdevchecklist.com.

Senarai Semak Pemaju Web boleh dimuat turun dari sini.

10

Skrip pengguna adalah program komputer kecil yang membolehkan anda mengubah tingkah laku laman web. Ini boleh digunakan untuk pelbagai tugas, seperti menyesuaikan susun atur laman web ke pilihan anda, menambah ciri tambahan ke halaman, atau mengautomasikan tugas berulang.

Tampermonkey adalah Pengurus Skrip Pengguna - pelanjutan yang membolehkan anda mengurus dan menjalankan skrip pengguna dan membuat skrip pengguna anda sendiri. Ia adalah ciri terakhir yang menjadikannya tempat dalam senarai, kerana anda dapat menggunakan Tampermonkey dengan berkesan untuk memudahkan aliran kerja pembangunan web anda. Sebagai contoh, saya sedang mengusahakan bentuk besar yang perlu diuji baru -baru ini. Daripada memasuki nilai secara manual setiap kali, saya menulis skrip Tampermonkey untuk melakukan ini untuk saya, menyimpan tekanan utama yang tak terhitung jumlahnya.

Tampermonkey boleh didapati di sini.

Kesimpulan

Dalam artikel ini, kami memperkenalkan sepuluh sambungan Chrome kegemaran saya untuk meningkatkan aliran kerja pembangunan web anda. Saya harap ini memberi anda inspirasi, tetapi ingat bahawa senarai ini tidak lengkap.

Jika anda terlepas pelanjutan kegemaran anda, atau anda mempunyai permata untuk berkongsi dengan pembaca lain, saya ingin mendengar daripada anda dalam komen di bawah.

Terima kasih kerana membaca.

FAQs (FAQs) untuk sambungan Chrome untuk aliran kerja pembangunan web

Apakah sambungan krom teratas untuk aliran kerja pembangunan web?

Terdapat beberapa sambungan Chrome yang dapat meningkatkan aliran kerja pembangunan web anda dengan ketara. Beberapa sambungan teratas termasuk pemaju web, resizer tetingkap, colorzilla, cssviewer, dan jsonview. Sambungan ini menyediakan pelbagai ciri, dari memeriksa elemen HTML dan CSS di mana -mana laman web untuk mengubah saiz tingkap penyemak imbas untuk mensimulasikan pelbagai resolusi skrin.

Bagaimana saya menggunakan pelanjutan Chrome pemaju web untuk meningkatkan aliran kerja saya?

Pelanjutan pemaju web menambah butang bar alat untuk penyemak imbas anda yang mengandungi pelbagai alat pemaju web. Ini dapat membantu anda mengakses ciri -ciri dengan cepat seperti melumpuhkan JavaScript, melihat CSS, dan memeriksa elemen. Ia juga membantu anda mengesahkan kod anda dan menyemak sebarang kesilapan atau ketidakkonsistenan, menjadikan proses pembangunan web anda lebih cekap.

Bagaimanakah pelanjutan resizer tetingkap meningkatkan pembangunan web?

Window Resizer membolehkan anda mengubah saiz tingkap penyemak imbas anda untuk mensimulasikan pelbagai resolusi skrin. Ini amat berguna untuk ujian reka bentuk yang responsif, kerana ia membolehkan anda melihat bagaimana laman web atau aplikasi anda kelihatan pada peranti yang berbeza. Anda boleh memilih dari senarai resolusi skrin pratetap atau membuat saiz tersuai anda sendiri.

Bagaimanakah Colorzilla membantu dengan pembangunan web?

Colorzilla adalah alat yang mudah untuk pemaju web dan pereka grafik. Ia termasuk jerami, pemilih warna, penjana kecerunan, dan banyak alat yang berkaitan dengan warna. Dengan Colorzilla, anda boleh mendapatkan bacaan warna dari mana -mana titik dalam penyemak imbas anda dan dengan cepat menyesuaikannya atau tampalkannya ke dalam program lain.

Apakah tujuan CSSViewer dalam pembangunan web?

CSSViewer adalah penonton harta CSS yang mudah. Ia membolehkan anda melayang tetikus anda ke atas mana -mana elemen di laman web dan melihat sifat CSSnya. Ini berguna apabila anda cuba memahami cara melaksanakan reka bentuk tertentu atau debug kod CSS anda sendiri.

Bagaimanakah JSONVIEW meningkatkan aliran kerja pembangunan web?

JSONVIEW adalah sambungan Chrome yang membantu melihat dokumen JSON dalam penyemak imbas anda. Biasanya, dokumen JSON dipaparkan sebagai teks biasa sahaja. Format Jsonview dan menyoroti dokumen -dokumen ini untuk menjadikannya lebih mudah dibaca. Ini amat berguna apabila anda menggunakan API atau data format JSON yang lain.

Apakah sambungan Chrome yang digunakan untuk debug JavaScript?

Ya, terdapat beberapa sambungan Chrome yang boleh digunakan untuk debug JavaScript. Yang paling popular adalah pemberitahuan ralat JavaScript. Ia memberitahu anda tentang kesilapan JavaScript melalui ikon atau pemberitahuan pop timbul di bar alat.

Bagaimana menggunakan sambungan Chrome untuk meningkatkan kecekapan pengekodan saya?

sambungan krom seperti cache yang jelas dan rakan sesi dapat meningkatkan kecekapan pengekodan anda dengan ketara. Cache Cache membolehkan anda membersihkan cache, cookies, dan data pelayaran lain dengan hanya satu klik, sementara Buddy Sesi membolehkan anda menguruskan sesi penyemak imbas, menjimatkan masa dan membantu anda tetap teratur.

Apakah beberapa sambungan Chrome untuk reka bentuk web?

Ya, terdapat beberapa sambungan Chrome yang tersedia untuk reka bentuk web. Beberapa sambungan teratas termasuk Whatfont, yang membolehkan anda mengenal pasti fon yang digunakan pada laman web, dan peniru mata, yang membolehkan anda memilih warna dari laman web.

Bagaimana untuk mencari dan memasang sambungan Chrome?

Anda boleh mencari dan memasang sambungan Chrome dari kedai web Chrome. Cukup cari pelanjutan yang anda mahu dan klik "Tambah ke Chrome" untuk memasangnya. Anda mungkin perlu memulakan semula penyemak imbas anda untuk membuat lanjutan berfungsi.

Atas ialah kandungan terperinci 10 sambungan krom atas untuk aliran kerja pembangunan web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!