6 bookmarklets berguna untuk meningkatkan pembangunan web

Bookmarklets adalah penanda buku berasaskan JavaScript yang boleh ditambah ke pelayar web. Artikel ini akan menunjukkan kepada anda beberapa tips pelayar yang kuat untuk membantu anda meningkatkan aliran kerja pembangunan web anda dan bagaimana untuk menukar tip ini ke dalam widget penanda buku.

1. Aktifkan mod reka bentuk
2. Sapukan latar belakang untuk semua elemen
3. Mensimulasikan peristiwa
4. Tetapkan kuki
5. Tukar kelas
6. Penanda buku pemilih warna
7. Apa alat penanda buku lain yang boleh anda fikirkan?

Aktifkan mod reka bentuk

Corak reka bentuk (Gaya dengan DesignMode kerana ia adalah harta JavaScript) sesuai untuk orang yang suka bereksperimen dengan perubahan salinan yang berbeza di laman web masa nyata. Sebagai contoh, seorang penulis copy yang suka melihat kesan kandungan membaca dalam proses reka bentuk laman web, atau pereka yang ingin memastikan teks itu selesa untuk dimuatkan dalam ruang tertentu pada saiz fon tertentu.

JavaScript mempunyai ciri yang sangat mudah yang menjadikan seluruh dokumen HTML disunting. Ia berfungsi sama seperti atribut nilai nama HTML yang boleh dikendalikan = "Benar" (atau contentedable = "True" dalam JavaScript), tetapi berfungsi sepanjang dokumen. Sekiranya anda ingin memahami bagaimana ia berfungsi, mula -mula gunakan pintasan papan kekunci yang berkaitan untuk membuka konsol penyemak imbas:

• Chrome: Opsyen ⌘ J / Shift Ctrl J
• Firefox: Opsyen ⌘ k / shift ctrl k
• Safari: Opsyen ⌘ c / shift ctrl c

Seterusnya, ketik document.designMode="on" dalam konsol, tekan kembali , dan kemudian klik mana -mana elemen teks. Anda akan melihat bahawa anda boleh mengedit elemen teks ini (dan semua elemen teks lain) dengan hanya mengklik pada mereka. Cara penyuntingan teks di laman web secara langsung jauh lebih cepat dan kurang usaha daripada membuka DevTools, klik kanan dan memilih pilihan Teks Edit.

Walaupun saya tidak pasti jika "corak reka bentuk" adalah penerangan yang paling tepat mengenai ciri ini, ia masih sangat berguna dan, mengejutkan, sudah lama ada.

Jadi, apakah cara yang lebih cepat untuk membolehkannya? Sudah tentu ia adalah alat penanda buku! Buat penanda buku menggunakan javascript: document.designMode="on";void 0;

Sapukan latar belakang untuk semua elemen

Apabila elemen HTML tidak mempunyai latar belakang, sukar untuk memvisualisasikan sempadan mereka dan/atau mengukur jarak jauh dari unsur -unsur lain. Pemaju mungkin perlu memvisualisasikan sempadan dengan lebih baik apabila berurusan dengan ketidakseimbangan visual (iaitu, walaupun sesuatu "kelihatan salah" tetapi sebenarnya tidak berlaku), lipatan margin (mengabaikan margin tertentu), pelbagai paparan:/terapung:/kedudukan: isu, dll.

Memohon latar belakang bermaksud memohon latar belakang lut untuk semua elemen HTML untuk memvisualisasikan sempadan dan jarak mereka dengan lebih baik. Ramai di antara kita biasanya melakukan ini dengan membuka DevTools dan menaip pernyataan CSS seperti selector { background: rgb(0 0 0 / 10%); } dalam kotak gaya. Walau bagaimanapun, ini masih sangat susah payah dan berulang - kita boleh menggunakan widget penanda buku untuk memudahkannya.

Sekali lagi, untuk membuat penanda buku, kami akan membuat URL. Inilah yang boleh kita gunakan untuk ini:

 JavaScript: document.QuerySelectorAll ("*"). Foreach (element => element.style.background = "rgb (0 0 0/10%)");

Kami menggunakan latar belakang lut kerana lapisan ketelusan, yang memastikan setiap elemen bersarang dibezakan dan jarak di antara mereka dapat diukur.

Mensimulasikan peristiwa

Pernahkah anda perlu menguji acara web yang pertama memerlukan satu siri interaksi atau memenuhi syarat -syarat tertentu? Menguji atau menyahpepijat jenis ciri-ciri ini adalah memakan masa. Widget penanda buku simulasi acara ini boleh digunakan untuk mencetuskan peristiwa tertentu dengan segera, membuat ujian angin.

Acara simulasi bermaksud menulis butang "sementara" untuk mencetuskan peristiwa JavaScript, menjadikannya lebih mudah untuk menguji peristiwa dengan cepat dan berulang kali tanpa memenuhi syarat antara muka pengguna biasa, seperti log masuk yang diperlukan.

Dengan mengandaikan bahawa anda telah menyediakan pendengar acara JavaScript, buat penanda buku untuk setiap acara yang anda ingin mencetuskan/mengejek dan serahkan URL berikut:

 JavaScript: Document.QuerySelector ("pemilih"). Klik ();

Ganti "pemilih" dengan pemilih sahaja, ganti "Klik" dengan "Fokus" atau "Blur" (jika perlu), atau lanjutkan coretan kod untuk menjadikannya mencetuskan peristiwa yang lebih kompleks seperti menatal.

Tetapkan kuki

Kuki adalah token yang disimpan di komputer pelawat laman web oleh pelawat laman web. Cookies mengandungi data yang boleh dibaca oleh Laman Web di mana ia dicipta sehingga mereka melebihi tarikh tamat tempoh atau telah dipadamkan. Kewujudan kuki itu sendiri menentukan sama ada pengunjung dilog masuk, sementara data itu sendiri dapat menyimpan maklumat pengguna.

Contoh senario di mana anda mungkin mahu menetapkan kuki menggunakan widget penanda buku adalah apabila anda ingin memaksa log masuk semasa tempoh ujian laman web. Laman web biasanya kelihatan sangat berbeza apabila log masuk dan tidak log masuk, tetapi log masuk dan log keluar boleh menjadi sangat rumit, jadi widget penanda buku ini dapat menjimatkan banyak masa.

Menulis Tamat tempoh = Tarikh untuk kuki secara manual sangat menyusahkan, tetapi bernasib baik ini mewujudkan tetapan anda sendiri Cookie Bookmarks Aplikasi widget boleh menjana widget penanda halaman untuk kuki tertentu jika anda tahu nama yang tepat.

Tukar kelas

Anda mungkin mahu menambah atau memadam kelas ke elemen HTML untuk mencetuskan perubahan keadaan atau penampilan baru, yang juga dikenali sebagai kelas togol. Suis kelas berlaku di belakang tabir kebanyakan laman web hidup, tetapi ia juga boleh digunakan untuk melangkaui keadaan antara muka pengguna tertentu semasa ujian.

Toggles kelas boleh digunakan untuk mencetuskan perubahan penampilan (seperti tema atau negeri alternatif) atau bahkan animasi, tetapi menggunakan alat pemaju boleh menjadi sedikit rumit apabila hanya untuk tujuan ujian (iaitu laman web tidak benar -benar berjalan untuk pengguna dengan cara ini). Sama seperti widget penanda buku lain, widget penanda buku ini dapat dengan cepat menukar kelas dan menjimatkan masa.

Buat widget penanda buku berikut untuk mencari semua elemen yang sepadan dengan pemilih pilihan anda, yang seterusnya akan menukar 'kelas'.

 JavaScript: document.QuerySelectorAll ("pemilih"). Foreach (element => element.classlist.toggle ("kelas"));

Penanda buku pemilih warna

Walaupun ia bukan "alat penanda buku" secara teknikal, Data Bookmarkable URI ini oleh Scott Jehl Membuka Tab Baru:

Jadi, inilah aplikasi pemetik warna baru saya! Ia hanya input warna HTML yang termasuk dalam data URI, jadi saya boleh menanda buku itu. (Anda boleh menambahkannya sendiri):

data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">

Mengapa ini sejuk? Nah, berapa kali anda perlu mendapatkan nilai warna dari halaman, hanya untuk mencari diri anda membuka DevTools, mengklik pada sekumpulan elemen, dan menyemak semula sifat CSS untuk mencari nilai itu? Lebih baik menjalankan alat ini, klik pada elemen, dan dapatkan warna dengan segera!

Apa alat penanda buku lain yang boleh anda fikirkan?

Adakah terdapat aliran kerja pembangunan web yang terlalu banyak yang memerlukan kadang -kadang alat pemaju yang rumit yang anda gunakan penyemak imbas web anda? Jika ya, sangat mudah untuk membuat widget penanda buku anda sendiri. Ingatlah untuk memulakan dengan javascript:

Jika anda telah membuat widget penanda buku untuk memudahkan aliran kerja anda, saya ingin melihatnya! Sila kongsi mereka dalam komen dan mari buat koleksi yang bagus.

Atas ialah kandungan terperinci 6 bookmarklets berguna untuk meningkatkan pembangunan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!