เมื่อพัฒนาเว็บไซต์ คุณต้องทำรายการตรวจสอบข้อกำหนดที่ซับซ้อนหลายอย่าง ไม่ว่าจะจัดการกับสีหรือรูปแบบฟอนต์ ปัญหาเลย์เอาต์ CSS หรือการตอบสนองของเว็บไซต์บนอุปกรณ์ต่างๆ ก็ตาม สิ่งสำคัญคือต้องอยู่เหนือปัญหาใดๆ ที่เกิดขึ้นใหม่ ต่อไปนี้เป็นส่วนขยายการพัฒนาเว็บที่ดีที่สุดบางส่วนสำหรับ Google Chrome (และเบราว์เซอร์อื่นๆ ที่ใช้ Chromium)
1. หยดสี Eyedropper
คุณชอบชุดรูปแบบสีของหน้าเว็บแบบสุ่มและต้องการใช้ในโครงการของคุณเองหรือไม่? ส่วนขยาย Chrome ที่เรียกว่า "Eyedropper" ของ Color Pick ช่วยให้คุณแยกสีได้อย่างแม่นยำและคุณสมบัติการซูมที่ปรับได้
ส่วนขยายเช่นนี้ต้องได้รับอนุญาตจากทุกเว็บไซต์เพื่อทำการแยกสี หากคุณต้องการคุณสมบัติขั้นสูงอีกเล็กน้อย มีเครื่องมือที่คล้ายกันที่เรียกว่า ColorZilla ซึ่งมาพร้อมกับตัวสร้างการไล่ระดับสี โปรแกรมดูจานสี และประวัติสี
2. สกรีนช็อตแบบเต็มหน้าในคลิกเดียว
การถ่ายภาพหน้าจอแบบเต็มหน้าเป็นสิ่งจำเป็นสำหรับงานประจำวัน บางครั้งวิธีที่ดีที่สุดในการสื่อสารการเปลี่ยนแปลงการออกแบบของคุณคือการจับภาพเว็บไซต์ทั้งหมดตามที่เป็นอยู่ ด้วยส่วนขยายที่เรียกว่า "One Click Full Page Screenshot" คุณสามารถบรรลุได้อย่างแม่นยำ
ขณะที่กำลังจับภาพหน้าจอ รูปภาพที่เลื่อนเสร็จแล้วของคุณจะเปิดขึ้นในหน้าต่างใหม่เมื่อเสร็จสิ้น
หน้าจอหน้าเว็บทั้งหมดพร้อมให้ดาวน์โหลดในรูปแบบ PNG แล้ว คุณยังใส่เอฟเฟกต์ต่างๆ กับหน้าจอรูปภาพได้ เช่น ฟิลเตอร์ การวาดทับหน้าเว็บ การเพิ่มข้อความ และอื่นๆ
3. EditThisCookie
นักพัฒนาเว็บจำเป็นต้องเข้าถึงตัวจัดการคุกกี้เพื่อเพิ่ม ลบ แก้ไข ป้องกัน และบล็อกคุกกี้ EditThisCookie เป็นส่วนขยายที่มีประโยชน์ซึ่งช่วยให้คุณทำงานกับคุกกี้ตามที่คุณต้องการ และส่งออกหรือนำเข้าในรูปแบบ JSON วิธีนี้ช่วยให้คุณรักษาเว็บไซต์ให้มีประสิทธิภาพดีด้วยการลบคุกกี้เก่าและจำกัดวันที่แยกสูงสุดของคุกกี้
4. ModHeader
ModHeader เป็นหนึ่งในส่วนขยาย Chrome ที่ได้รับความนิยมมากที่สุดในการแก้ไขส่วนหัว HTTP ของหน้าเว็บ คุณสามารถเปิดใช้การแก้ไขส่วนหัวตาม URL หรือประเภททรัพยากรได้โดยใช้เพียงคลิกเดียว ส่วนที่ดีที่สุดคือคุณสามารถสร้างหลายโปรไฟล์และเพิ่มค่าต่าง ๆ ให้กับส่วนหัวที่แก้ไขได้ การปรับเปลี่ยนทั้งหมดอาจถูกจำกัดไว้เพียงแท็บเดียวหรือทั้งเว็บไซต์
5. ตรวจสอบ UX
เราทุกคนต้องการการประเมินแบบสำนึกรู้สำนึกของเว็บไซต์ที่ทำงานอยู่เป็นระยะๆ สิ่งนี้ทำได้ง่ายด้วย UX Check ซึ่งเป็นส่วนขยายที่แสดงความคิดเห็นเกี่ยวกับ UX ทั้งหมดในบานหน้าต่างด้านข้าง หลังจากที่คุณคลิกองค์ประกอบที่ไม่ตรงกับการวิเคราะห์พฤติกรรมที่คุณประเมิน คุณสามารถเพิ่มบันทึกย่อและถ่ายภาพหน้าจอได้ สุดท้าย การเปลี่ยนแปลงทั้งหมดสามารถส่งออกในรูปแบบ .docx
6. ตัวปรับขนาดหน้าต่าง
นักพัฒนาเว็บจำเป็นต้องจำลองหน้าเว็บของตนสำหรับขนาดหน้าจอที่ต่างกัน ด้วย Window Resizer คุณสามารถทำการประเมินเหล่านี้ได้อย่างง่ายดายสำหรับแล็ปท็อป แท็บเล็ต สมาร์ทโฟน และขนาดหน้าจอใดๆ ที่คุณเลือก
เครื่องมือนี้มีคุณสมบัติเจ๋งๆ เช่น "หมุน" และ "การวัดแบบสด" พร้อมด้วยฟังก์ชันการปรับแต่งภาพมากมาย หากคุณต้องการสร้างเว็บไซต์ที่ตอบสนองได้อย่างแท้จริง ตรวจสอบให้แน่ใจว่าคุณได้ตรวจสอบลักษณะที่ปรากฏของเว็บไซต์สำหรับขนาดหน้าจอทั้งหมด
7. Lorem Ipsum Generator
หากต้องการทำงานบนเว็บเพจให้เสร็จอย่างรวดเร็ว คุณต้องใช้ข้อความเริ่มต้น ส่วนขยายที่เรียกว่า Lorem Ipsum Generator มีตัวเลือกข้อความเริ่มต้นหลายแบบสำหรับย่อหน้าและประโยคที่แตกต่างกันต่อย่อหน้า คุณสามารถเลือกส่วนของข้อความหรือทั้งข้อความโดยใช้ตัวเลือก "เลือกอัตโนมัติ" เทมเพลตสุดท้ายให้รูปลักษณ์ที่หรูหราเนื่องจากความเป็นไปได้ในการเปลี่ยนแปลงในข้อความ
8. สร้างด้วยเทคโนโลยี Profiler
BuiltWith เป็นส่วนขยายแบบคลาสสิกเพื่อเรียนรู้เกี่ยวกับเทคโนโลยีพื้นฐานทั้งหมดที่สนับสนุนเว็บไซต์ เพียงคลิกเดียว ระบบจะสร้างโปรไฟล์ที่ช่วยให้คุณเรียนรู้เกี่ยวกับส่วนเสริมและเครื่องมือล่าสุดที่ทำให้เว็บไซต์โดดเด่นยิ่งขึ้น ซึ่งจะช่วยให้คุณจำลองฟังก์ชันต่างๆ สำหรับการใช้งานของคุณเองได้
9. WhatFont
WhatFont เป็นหนึ่งในวิธีที่เร็วและง่ายที่สุดในการระบุแบบอักษรประเภทต่างๆ บนหน้าเว็บ คุณต้องวางเมาส์ไว้ใกล้ข้อความเพื่อรับรายละเอียดทั้งหมด รองรับเทมเพลตขั้นสูง เช่น TypeKit และ Google FontAPI
10. CheckMyLinks
บางครั้งเราต้องการสรุปวัตถุประสงค์ของลิงก์ทั้งหมดที่ไปยังเว็บไซต์ CheckMyLinks เป็นส่วนขยายที่ได้รับความนิยมในการสรุปลิงก์ที่ถูกต้อง ไม่ถูกต้อง และใช้งานไม่ได้ ผลลัพธ์ของลิงค์สำหรับเว็บไซต์ที่ทำงานอยู่นั้นจะถูกดูทันทีบนบานหน้าต่างด้านข้าง เครื่องมือนี้มีประโยชน์มากสำหรับการตรวจสอบในนาทีสุดท้ายก่อนที่เว็บไซต์ของคุณหรือการเปลี่ยนแปลงที่เผยแพร่จะเผยแพร่
11. ยาฆ่าแมลง
คุณคาดหวังถึงปัญหาการจัดวาง CSS ในเว็บไซต์ของคุณหรือไม่? สารกำจัดศัตรูพืชทำให้คุณสามารถแก้ปัญหาเหล่านี้ได้ด้วยการจัดทำโครงร่างให้กับทุกองค์ประกอบของหน้า โดยกด Ctrl . ค้างไว้ ที่สำคัญ คุณสามารถดูข้อมูลองค์ประกอบและวิเคราะห์ตำแหน่งขององค์ประกอบบนหน้าได้
มีส่วนขยายเว็บยอดนิยมอื่น ๆ อีกมากมายที่จัดการรายละเอียดที่สำคัญในแอปพลิเคชันเว็บไซต์ ตัวอย่างเช่น JSON Viewer ช่วยเหลือผู้ที่ทำงานกับไฟล์ JSON มี HTML Tree Generator ที่ให้แผนผังขององค์ประกอบทั้งหมดในเว็บไซต์
นอกเหนือจากข้างต้น ยังมีส่วนขยาย Chrome มากมายที่ช่วยเพิ่มความเร็วในการท่องเว็บของคุณ ลองดูสิ!
