7 sambungan krom untuk meningkatkan kecekapan reka bentuk web

mata teras:

Sambungan Chrome Memudahkan proses reka bentuk dan menyediakan alat untuk menyemak dan mengedit elemen web, pemeriksaan pautan dan menghasilkan kod CSS kompleks tanpa meninggalkan penyemak imbas.
Pelanjutan seperti Page Ruler, Whatfont, CSS3 Generator, periksa pautan saya, pereka gravit, colorzilla dan stylebot amat berguna kepada pereka, menyediakan ciri-ciri seperti pensampelan warna, pengiktirafan font dan penyesuaian laman web masa nyata.
Menggunakan sambungan ini dapat menjimatkan masa dan mengurangkan keperluan untuk perisian lain, menjadikannya sumber yang berharga untuk pereka dan pemaju.

Setiap pereka mempunyai cara tersendiri untuk bekerja. Sama ada anda merancang secara langsung dalam penyemak imbas anda (menggunakan kod) atau menguji reka bentuk web secara real time menggunakan penyemak imbas, terdapat banyak sambungan Chrome yang dapat memudahkan aliran kerja anda. Apa yang paling saya benci? Perlu membuka aplikasi desktop yang besar untuk menyelesaikan tugas yang agak kecil, jadi saya telah mencari sambungan krom yang dapat menyelesaikan masalah reka bentuk yang sama dengan cepat.

Berikut adalah tujuh sambungan krom penting saya, serta enam pelanjutan pereka untuk Firefox (jika anda seorang pemaju web, anda mungkin perlu menguji semua pelayar anda!).

1. Page Ruler

Page Ruler adalah lanjutan krom yang berguna untuk mencari lokasi dan/atau saiz mana -mana elemen dalam penyemak imbas anda -lebih cepat daripada menggunakan pemeriksa kod krom, atau lebih buruk, canggung melintasi fail CSS. Pertama, gunakan silang untuk menarik kotak pemilihan di sekitar elemen sasaran. Bar di bahagian atas penyemak imbas akan menunjukkan panjang dan lebar elemen, serta jaraknya dari setiap sisi skrin (nampaknya mempunyai kedudukan tetap/mutlak yang digunakan).

Petua: Gunakan kekunci anak panah untuk menyesuaikan pilihan anda untuk ketepatan maksimum.

2. Whatfont

Oleh kerana saya sering perlu menyemak fon di laman web untuk melihat saiz fon, nama fon sebenar dan warna mereka yang digunakan dalam blok teks tertentu, sambungan Chrome Whatfont sangat berguna kepada saya.

Klik mana -mana bahagian teks untuk mencari nilai hexadecimal/RGBA, ketebalan, ketinggian garis, gaya fon, dan siri font.

Kadang -kadang menambah tetingkap cek Chrome di bahagian bawah penyemak imbas anda boleh menyebabkan gangguan apabila anda bekerja, jadi dapat mendapatkan semua maklumat ini tanpa membuka seluruh tetingkap cek menjadikan perkara lebih mudah!

3. CSS3 Generator

CSS3 Generator adalah aplikasi Chrome yang membantu anda menghasilkan beberapa kompleks atau sukar untuk mengingati coretan kod CSS. Untuk perkara-perkara mudah yang anda tidak perlukan, tetapi mari kita hadapi, beberapa nilai CSS sukar ditulis dari awal (seperti mencipta kecerunan bersesuaian silang atau penukaran CSS yang diperlukan). Dengan hanya beberapa klik, anda boleh menjana CSS yang sangat berguna, pratontonnya dalam pratonton lanjutan, kemudian salin CSS dan tampal kod ke dalam fail CSS sebenar anda.

Berikut adalah senarai kandungan yang disokong:

• pelbagai bayang -bayang teks
• kod hexadecimal/rgba
• penukaran CSS
• Radius sempadan
• Pelbagai bayang -bayang kotak
• CSS Column
• anak panah (untuk tooltips)
• Gradal (linear, radial ... walaupun jalur)

4. Periksa pautan saya

kesilapan menaip url (atau lupa untuk memasukkannya sama sekali, tetapi itu satu lagi perkara) agak mudah, jadi sama ada pelanggan anda memerlukan bantuan dari laman web yang ada atau anda membina laman web dari awal, periksa pautan saya untuk apa -apa penting untuk pereka web.

Semak pautan saya akan mengimbas laman web dan mencari pautan yang rosak -itu mudah. Ia menjimatkan anda dari kerumitan secara manual memeriksa mereka. UI sangat intuitif. Semak pautan saya tidak menyenaraikan pautan yang tidak sah, tetapi hanya menghidupkan pautan rasuah pada laman web sebenar ke dalam merah, sementara pautan yang sah akan muncul dalam warna hijau, jadi anda dapat melihat sekilas apa yang perlu diperbaiki. Mudah!

5. pereka gravit

Jika anda perlu merancang grafik tetapi tidak mahu membuka aplikasi reka bentuk yang berintensifkan sumber (atau jika anda tidak/tidak mahu membeli satu), muat turun lanjutan pereka gravit percuma untuk Chrome.

menghairankan, ia sangat cepat. Sangat mudah untuk memulakan reka bentuk dengan saiz artboard biasa, termasuk grafik blog, grafik media sosial, dan pratetap untuk saiz cetak yang biasa digunakan. Gravit adalah aplikasi reka bentuk vektor, yang menjadikannya sangat mudah untuk merancang reka bentuk bebas resolusi berskala.

Saya terkejut dengan banyak pilihan dan ciri-ia tidak jauh berbeza daripada menggunakan aplikasi reka bentuk canggih seperti Sketch, walaupun UI visual terasa lebih seperti pereka afiniti.

Terdapat unsur -unsur yang jelas yang dijangkakan, seperti bentuk, penjajaran, flips, putaran, blurs, unjuran, penciptaan bentuk komposit, dan banyak lagi. Ia juga mampu mengeksport ke PNG, JPG, SVG dan PDF, ciri simbolik seperti Sketch dan Adobe XD, alat penyuntingan SVG kompleks dengan lengkung Bezier dan Bezier, dan juga penapis, pereka gravit sebenarnya kerana ia adalah pilihan yang sangat menarik untuk profesional Pereka, jurugambar dan pereka amatur yang ingin mencipta grafik pemasaran.

Maksud saya, bayangkan dapat membuat reka bentuk di Google Chrome tanpa membuka Photoshop, Illustrator, Sketch, atau Adobe XD. Sebenarnya, anda tidak perlu membayangkan bahawa anda boleh memuat turun pereka gravit secara percuma sekarang!

6. Colorzilla

Colorzilla adalah alat jerami Google Chrome - ia membolehkan anda mencuba sebarang warna dari laman web dengan beberapa klik. Pertama, klik pada ikon Extension Colorzilla di Chrome dan hover kursor di kawasan yang anda mahu sampel. Anda akan mendapat nilai HSL, Hexadecimal, dan RGBA untuk warna itu. Biasanya, anda perlu mengambil tangkapan skrin laman web anda dan mengimportnya ke Photoshop, tetapi Colorzilla lebih cepat. Colorzilla juga boleh menjana palet warna pada permintaan berdasarkan mana -mana laman web dan menyimpan warna yang digunakan baru -baru ini menggunakan ciri sejarah warna, yang menjadikannya menonjol di kalangan pesaing seperti Eyedropper Colorpick.

7. StyleBot

StyleBot adalah lanjutan Chrome yang berguna bagi mereka yang ingin cepat mencuba CSS tersuai di laman web secara langsung. Ia membolehkan anda mencuba fon yang berbeza, warna yang berbeza, gaya yang berbeza, dan lain -lain tanpa beralih ke antara editor kod dan Google Chrome. Kami mendapati StyleBot menjadi sangat berguna sebagai cara untuk prototaip tweak kecil dan perubahan pada laman web masa nyata sebelum benar-benar melakukan asas kod.

Kesimpulan

Tugas-tugas yang menggunakan sambungan penjimatan masa ini biasanya membosankan atau mengharuskan anda membuka/membeli lebih banyak perisian dapat diselesaikan dengan beberapa klik, dan anda bahkan tidak perlu meninggalkan pelayar web anda untuk diselesaikan. Pereka dan pemaju akan mendapati sambungan krom ini sangat berguna.

Pelanjutan Chrome pasti berguna bagi mereka yang membangunkan laman web, tetapi pereka yang ingin mengekstrak maklumat visual dari laman web secara langsung untuk menggunakannya dalam Sketch, Adobe XD, atau Photoshop juga akan melihat manfaat menjimatkan masa yang jelas dengan cepat. .

(bahagian Soalan Lazim telah ditinggalkan kerana ia tidak sepadan dengan matlamat asal pseudo dan lebih lama. Bahagian FAQ boleh dihasilkan secara berasingan seperti yang diperlukan.)

Atas ialah kandungan terperinci 7 sambungan krom super berguna untuk pereka pada tahun 2017. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!