ส่วนขยายสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ ส่วนขยายของ Google Chrome สำหรับนักพัฒนาเว็บ ส่วนขยายสำหรับนักพัฒนาเว็บ

กูเกิลโครมเป็นเบราว์เซอร์ที่เร็วและได้รับความนิยมมากที่สุดในโลก นักพัฒนาซอฟต์แวร์ของ Google- แน่นอนว่าข้อได้เปรียบหลักคืออินเทอร์เฟซและความเร็วที่ใช้งานง่าย ไม่เพียงแต่ประมวลผลหน้าเว็บได้รวดเร็วเท่านั้น แต่ยังเปิดได้เร็วกว่าเบราว์เซอร์อื่นๆ อีกด้วย Chrome มีส่วนขยายที่หลากหลายสำหรับนักออกแบบและนักพัฒนา

ในบทความนี้ เราได้รวบรวมรายการส่วนขยาย Google Chrome ที่ดีที่สุดและมีประโยชน์ที่สุดสำหรับนักออกแบบและนักพัฒนาเว็บไซต์

1.

ส่วนขยายของ Chromeซึ่งเพิ่มแถบด้านข้างให้กับซอร์สโค้ดที่แสดงข้อมูลเกี่ยวกับการไล่ระดับสีที่ใช้กับองค์ประกอบที่กำลังตรวจสอบ คุณยังสามารถสลับการไล่ระดับสีแต่ละรายการได้เนื่องจากเป็นเลเยอร์ที่แตกต่างกัน

2.

Emmet LiveStyle เป็นปลั๊กอินสำหรับการแก้ไขโค้ด CSS แบบสองทิศทาง (ตัวแก้ไข ↔ เบราว์เซอร์) ปัจจุบันใช้งานได้ใน Google Chrome, Safari และ Sublime Text โดยมีเบราว์เซอร์อื่น ๆ ที่นักพัฒนาจะเพิ่ม ด้วยส่วนขยายนี้ คุณสามารถเชื่อมโยงแหล่ง CSS ที่แตกต่างกันสองแหล่งเพื่อการแก้ไขแบบสดได้

3.

ส่วนขยาย Dimensions Toolkit นำเสนอเครื่องมือที่มีประโยชน์สำหรับการทดสอบโครงการเว็บที่คุณกำหนดเอง โดยมีจุดติดตามและค่าเริ่มต้น ขนาดที่ปรับขนาดได้ ฯลฯ โดยมีให้บริการทั้งส่วนขยายของ Chrome และเว็บแอป

4.

หากคุณทำงานกับ Batman.js ส่วนขยาย Batman.js Devtools Chrome นี้เป็นเครื่องมืออันล้ำค่าสำหรับคุณ ประกอบด้วยเครื่องมือมากมายที่เป็นประโยชน์สำหรับการพัฒนาด้วย Batman.js ในเบราว์เซอร์

5. เครื่องจักร

หากคุณเป็นนักพัฒนา PHP ที่ใช้ Chrome ลองดูส่วนขยาย Clockwork Chrome โดยให้แผงใหม่พร้อมข้อมูลการดีบักและการทำโปรไฟล์ที่มีประโยชน์ทั้งหมด รวมถึงข้อมูลเกี่ยวกับ รับข้อมูลและ POST, คุกกี้, คำขอ, ส่วนหัว, ข้อมูลเซสชัน และอื่นๆ

Google Chrome เป็นเบราว์เซอร์ที่รวดเร็วและได้รับความนิยมในหมู่ผู้ใช้อินเทอร์เน็ต โดยเปิดจากเดสก์ท็อปของคุณได้อย่างรวดเร็ว โหลดหน้าเว็บได้รวดเร็ว และเปิดแอปพลิเคชันเว็บที่ซับซ้อนได้อย่างรวดเร็ว หน้าต่างเบราว์เซอร์ Chrome มีความคล่องตัว สะอาดตา และเรียบง่าย Chrome ได้เปิดตัวส่วนขยายที่เป็นมิตรกับนักพัฒนาเว็บสำหรับ Chrome มากมายเหลือเฟือ แต่นักพัฒนาก็หันมาลองใช้ Chrome มากขึ้น และบางส่วนก็ไม่ได้มองย้อนกลับไป

ในการรีวิวนี้ เราได้รวบรวมส่วนขยาย Chrome ที่ดีที่สุดและมีประโยชน์บางส่วนสำหรับนักพัฒนาและนักออกแบบ ซึ่งจะทำให้งานการพัฒนาเป็นเรื่องง่ายและไม่ยุ่งยาก ดังนั้นโดยไม่ต้อง ความสนใจเป็นพิเศษ ado อนุญาตให้คุณตรวจสอบส่วนขยายของ Chrome ต่อไปนี้

มีส่วนขยาย Chrome ฟรีมากมายที่จะทำให้ชีวิตของคุณง่ายขึ้น เราได้รวบรวมสิ่งที่ดีที่สุดไว้แล้ว

Chrome DevTools นั้นยอดเยี่ยม แต่ก็เป็นไปได้ที่จะเพิ่มคุณสมบัติเจ๋งๆ ให้กับเบราว์เซอร์ของคุณ เพื่อทำให้การออกแบบและพัฒนาเว็บไซต์ง่ายขึ้นมาก เรานำเสนอส่วนขยาย Chrome ที่เราชื่นชอบ 32 รายการ

เร่งกระบวนการจัดสไตล์องค์ประกอบของคุณอย่างรวดเร็วด้วย DomFlags ซึ่งเป็นส่วนขยายที่ยิ่งใหญ่อย่างแท้จริงที่ช่วยให้คุณสร้างแป้นพิมพ์ลัดสำหรับ องค์ประกอบ DOM- สิ่งเหล่านี้เหมือนกับบุ๊กมาร์กสำหรับการนำทาง DOM และจะเปลี่ยนวิธีการทำงานกับ DevTools

วิธีที่สนุกในการทำให้ผู้คนพูดคุย: เครื่องมือเน้นข้อความสูงช่วยให้คุณแบ่งปันตัวอย่างบทความออนไลน์ เพื่อให้คุณสามารถเน้นส่วนที่สำคัญที่สุดของสิ่งที่เขียนได้

Booom ทำให้ Dribbble ดีขึ้นด้วยการแสดงเฟรมในรายการมากขึ้น เพิ่มปุ่ม Like และ Add to Bucket เล่น GIF อัตโนมัติ และทำให้การเลื่อนดูไม่มีที่สิ้นสุด

นี่คือส่วนขยาย Chrome ที่ทรงพลังที่ช่วยให้คุณสามารถสร้างการออกแบบแล้วส่งออกเป็นไฟล์ CSS สำหรับใช้บนเว็บไซต์ของคุณ รองรับเลเยอร์และมีเครื่องมือมากมายที่คุณใช้ในโปรแกรมตกแต่งรูปภาพทั่วไป

ส่วนขยายที่ยอดเยี่ยมนี้จะนำโค้ดและสแนปชอตเอาต์พุตของคุณสำหรับการสาธิตและการจำลอง คุณยังสามารถเพิ่มธีมและเอฟเฟกต์เพื่อสร้างภาพสำหรับพอร์ตโฟลิโอส่งเสริมการขายและออนไลน์ของคุณได้

ในฐานะนักพัฒนาเว็บ คุณต้องทดสอบหน้าเว็บของคุณ การทำซ้ำขั้นตอนเดิมซ้ำแล้วซ้ำอีกอาจเป็นกระบวนการที่น่าเบื่อ iMacros เป็นส่วนขยาย Chrome ที่มีประโยชน์ซึ่งช่วยให้คุณบันทึกการกระทำของคุณและบันทึกไว้ได้ ดังนั้นคุณจึงต้องดำเนินการเฉพาะเพียงครั้งเดียวเท่านั้น จากนั้นคุณสามารถทดสอบหน้าเว็บของคุณซ้ำแล้วซ้ำอีก โดยทำซ้ำได้ด้วยการคลิกปุ่ม ประหยัดเวลาอันมีค่าและช่วยให้คุณมุ่งเน้นไปที่ปัญหาเร่งด่วนได้มากขึ้น

นักออกแบบและนักพัฒนาทุกคนจะพบว่าส่วนขยายนี้มีคุณค่าอย่างยิ่ง Font Playground ช่วยให้คุณสามารถทดลองใช้แบบอักษรในเครื่องและไลบรารีแบบอักษรของ Google ทั้งหมดบนหน้าเว็บโดยไม่ต้องทำการเปลี่ยนแปลงใดๆ เลย ความสวยงามของส่วนขยายนี้คือมันรวมเอาสไตล์แบบอักษร สไตล์ และเอฟเฟกต์ข้อความที่แตกต่างกันทั้งหมด เพื่อให้คุณสามารถดูตัวอย่างหน้าเว็บก่อนที่จะดำเนินการเปลี่ยนแปลง

ส่วนขยาย Chrome นี้เป็นเครื่องมือที่มีประโยชน์มากซึ่งทำหน้าที่ตามที่ชื่อกล่าวไว้ โดยปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเพื่อช่วยคุณสร้างการออกแบบเว็บไซต์แบบตอบสนอง เลือกจากรายการขนาดจอภาพยอดนิยม หรือเพิ่มขนาดและความละเอียดที่กำหนดเองเพื่อเพิ่มความแม่นยำด้วยตนเอง

หากคุณจำเป็นต้องทำงานกับเลย์เอาต์รูปภาพที่มีข้อความในบรรทัด ส่วนขยายนี้จะช่วยให้คุณไม่ต้องกังวลใจเล็กน้อย โครงการแนฟทาสามารถช่วยคุณให้พ้นจากโลกแห่งการระคายเคืองเล็กน้อยได้ ด้วยเทคนิค OCR อันชาญฉลาด ส่วนขยายนี้ทำให้คุณสามารถไฮไลต์ คัดลอกและวางข้อความจากรูปภาพใดก็ได้ และยังแปลให้คุณได้อีกด้วย

ส่วนขยายที่มีประโยชน์มากสำหรับ Google Chrome ที่ช่วยให้นักพัฒนาและนักออกแบบสามารถระบุแบบอักษรที่ใช้บนหน้าเว็บได้ ดังนั้นหากคุณเจอแบบอักษรเว็บที่ดูแปลก ๆ ที่คุณต้องการใช้ในโครงการใดโครงการหนึ่งของคุณในอนาคต เพียงเลื่อนเมาส์ไปเหนือแบบอักษรนั้นแล้วค้นหาได้ทันทีว่าเป็นแบบอักษรอะไร

เครื่องมือนี้ไม่เพียงแต่ตรวจสอบความเร็วในการโหลดหน้าเว็บของคุณเท่านั้น แต่ยังบอกคุณด้วยว่าหน้าเว็บช้าลงหรือไม่ Yslow ตรวจสอบหน้าเว็บของคุณกับกฎ 23 จาก 34 ข้อที่กำหนดโดยทีมงานประสิทธิภาพ ยาฮู- มันเป็นเครื่องมือที่มีประโยชน์อย่างยิ่งสำหรับการวิเคราะห์หน้าเว็บและแนะนำวิธีปรับปรุงประสิทธิภาพ

ในฐานะนักพัฒนาเว็บ คุณอาจถามตัวเองว่าคุณใช้ชีวิตอย่างไรโดยไม่มีส่วนขยายนี้ เพิ่มปุ่มลงในแถบเครื่องมือ Chrome พร้อมด้วยเครื่องมือที่มีประโยชน์มากมายสำหรับนักพัฒนาเว็บ นี่คือพอร์ตอย่างเป็นทางการของส่วนขยาย Web Developer สำหรับ Firefox

Page Ruler เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการวัดองค์ประกอบบนหน้าเว็บอย่างแม่นยำ จากนั้นจึงประมวลผลองค์ประกอบเหล่านั้นตามความต้องการของคุณ วาดไม้บรรทัดเพื่อดูขนาดและตำแหน่งของพิกเซล

เครื่องมือนี้จะช่วยให้คุณตรวจสอบว่าหน้าเว็บของคุณปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับ SEO การใช้งาน การเข้าถึง และประสิทธิภาพ (ความเร็วในการโหลด) หรือไม่ ตัวอย่างเช่น หากหน้าเว็บของคุณไม่มีแท็ก H1 หรือไม่มีเมตาแท็ก ส่วนขยายจะแจ้งให้คุณทราบเพื่อให้คุณแก้ไขปัญหาได้อย่างรวดเร็ว หากคุณคลิกลิงก์ "รายละเอียดและความช่วยเหลือเพิ่มเติม" ที่ด้านล่างของส่วนขยาย คุณจะพบรายการเชิงลึกเพิ่มเติม

อัญมณีที่แท้จริงสำหรับนักพัฒนาเว็บทุกคน DevTools Autosave ช่วยให้คุณสามารถบันทึกการเปลี่ยนแปลงใดๆ ที่เกิดขึ้นกับหน้าเว็บใน CSS และ JS โดยอัตโนมัติผ่าน Chrome DevTools ส่วนขยายนี้ติดตั้งและใช้งานได้ง่ายและยังช่วยคุณประหยัดเวลาได้มากอีกด้วย

เปลี่ยนหน้าเว็บใด ๆ ให้เป็นโครงร่างด้วยการคลิกเพียงครั้งเดียว ส่วนขยายของ Google Chrome นี้ช่วยให้นักพัฒนาเว็บและนักออกแบบสามารถดูหน้าเว็บ ไม่ว่าจะเป็นแบบท้องถิ่นหรือออนไลน์ ด้วยการซ้อนทับแบบ Wireframe

ส่วนขยาย ColorZilla เป็นโปรแกรมดูดสี เครื่องมือเลือกสี เครื่องมือสร้างการไล่ระดับสี และเครื่องมือสีที่มีประโยชน์อื่นๆ เพื่อช่วยคุณในการออกแบบ - จากหน้าต่างเบราว์เซอร์ของคุณโดยตรง

นี่คือโปรแกรมจำลองหลายแพลตฟอร์ม สภาพแวดล้อมแบบเคลื่อนที่ซึ่งสามารถช่วยคุณทดสอบเว็บแอปพลิเคชันของคุณโดยใช้อุปกรณ์และความละเอียดหน้าจอที่แตกต่างกัน Ripple Emulator สามารถใช้ร่วมกับ วิธีการที่มีอยู่การพัฒนาเพื่อทำการดีบัก การตรวจสอบ DOM และการทดสอบอัตโนมัติ

หากคุณเป็นนักพัฒนาเว็บ คุณคงเคยได้ยินเกี่ยวกับ Stack Overflow ซึ่งเป็นแหล่งรวมปัญหาหรือคำถามที่เกี่ยวข้องกับการพัฒนา ถ้าไม่เช่นนั้น คุณควรลองดูอย่างแน่นอน ชุมชนนี้กำลังเจริญรุ่งเรืองและครอบคลุมหัวข้อต่างๆ มากมายตั้งแต่ C# และ Java ไปจนถึง PHP และ jQuery ส่วนขยายที่ยอดเยี่ยมนี้จะเพิ่มช่องค้นหาลงในเบราว์เซอร์ของคุณโดยตรง ช่วยให้คุณสามารถค้นหาทรัพยากรอันกว้างใหญ่ของ Stack Overflow ได้

การจดจำทุกฟังก์ชันอาจเป็นเรื่องยาก ดังนั้นหากคุณอยู่ในสถานการณ์ที่ต้องใช้เวลาหลายชั่วโมงในการค้นหาฟังก์ชัน PHP บางอย่างบน Google ส่วนขยายนี้จะดึงดูดความสนใจของคุณอย่างแน่นอน คู่มือ PHP Ninja มอบเอกสาร PHP-5.5 ทั้งหมดพร้อมตัวอย่างในแปดภาษา ทั้งหมดนี้ทำได้จากเบราว์เซอร์ของคุณอย่างสะดวกสบาย

นักออกแบบเกลียดเมื่อพวกเขาสร้างการออกแบบที่น่าทึ่งซึ่งสุดท้ายแล้วไม่ตรงกับผลการเขียนโค้ด PerfectPixel เป็นส่วนขยายในอุดมคติสำหรับนักพัฒนาเว็บที่ต้องการพัฒนาเว็บไซต์ที่มีการออกแบบที่แม่นยำ ส่วนขยายที่ใช้งานง่ายนี้ช่วยให้คุณสามารถวางซ้อนภาพโปร่งแสงที่ด้านบนของหน้าเว็บ และทำการเปรียบเทียบพิกเซลเพื่อให้มั่นใจว่ามีความถูกต้อง 100%

เครื่องมือนี้จะช่วยให้คุณไม่เพียงแค่ดูเท่านั้น ซอร์สโค้ดซึ่งคุณกำลังทำงานอยู่ แต่ยังทำหน้าที่เป็นตัวแก้ไข CSS ที่คุณสามารถแก้ไขหน้าเว็บของคุณและดูการเปลี่ยนแปลงได้ทันที

เครื่องมือที่ยอดเยี่ยมในการดูว่าเว็บไซต์มีลักษณะอย่างไรโดยใช้เครื่องมือผู้ใช้ที่หลากหลาย เช่น iPad, iPhone หรือ Android สิ่งนี้มีประโยชน์มากหากไซต์ถูกแฮ็ก และด้วยวิธีนี้ คุณจะสามารถดูวิธีการได้ เครื่องมือค้นหาดูหน้าต่างๆ

หนึ่งในอีมูเลเตอร์ IE ที่ได้รับความนิยมและมีประโยชน์มากที่สุด ช่วยให้นักพัฒนาเว็บทดสอบหน้าเว็บใน IE เวอร์ชันต่างๆ ได้โดยตรงในเบราว์เซอร์ Chrome

เป็นโปรแกรมตกแต่งรูปภาพออนไลน์ฟรีที่ใช้งานง่าย ซึ่งให้คุณแก้ไขหน้าเว็บ รูปภาพ และภาพหน้าจอได้ แต่นั่นไม่ใช่สิ่งที่ทำให้มันดี PicMonkey ช่วยให้คุณสามารถจับภาพใด ๆ และจับภาพหน้าจอของทั้งหน้าได้ด้วยการคลิกปุ่มเพียงปุ่มเดียว เมื่อคุณเลือกรูปภาพแล้ว คุณสามารถแก้ไขได้ตามต้องการโดยใช้เอฟเฟ็กต์เพื่อเปลี่ยนการรับแสง

การมองเห็นสีบกพร่องหรือตาบอดสีส่งผลกระทบต่อผู้คนนับล้านทั่วโลก ส่วนขยายอันชาญฉลาดนี้ใช้เทคนิคที่ช่วยให้คุณสามารถสร้างภาพที่เหมาะสำหรับการรับชมโดยผู้ที่เป็นโรคนี้

ส่วนขยายจะช่วยให้นักพัฒนาเว็บตรวจสอบไลบรารีเฟรมเวิร์ก, CMS และ JavaScript บนไซต์ในขณะที่คุณดู ใน แถบที่อยู่ไอคอนจะปรากฏขึ้นเพื่อระบุไลบรารีที่ตรวจพบ ส่วนขยาย Chrome นี้ได้รับการจัดอันดับสูงและสามารถตรวจจับไลบรารี CMS และ JS ยอดนิยมได้มากกว่า 100 รายการ

สร้างเว็บไซต์เสร็จแล้วแต่ลืมตรวจสอบลิงก์ทั้งหมดใช่ไหม ไม่ว่าคุณจะติดตามมันอย่างระมัดระวังแค่ไหน ก็อาจเป็นไปได้ว่าคุณพลาดไปหนึ่งหรือสองอย่าง และการผ่านมันไปทั้งหมดจะค่อนข้างน่าเบื่อ ด้วยส่วนขยายนี้ คุณสามารถปล่อยให้ไซต์ทำงานต่อไปได้ และมันจะอ่านลิงก์ทั้งหมดในแต่ละหน้า โดยเน้นลิงก์ที่มีอยู่เป็นสีเขียวและลิงก์ที่เสียหายเป็นสีแดง

เป็นเพียงส่วนขยายเล็กๆ ที่แสดงรูปภาพยอดนิยมจาก Fickr ทุกครั้งที่คุณเปิดหน้าต่าง คลิกที่ภาพถ่ายเพื่อดูบน Flickr หรือคลิกที่ชื่อผู้ใช้เพื่อดูภาพถ่ายเพิ่มเติมจากช่างภาพ

เช่นเดียวกับส่วนขยายก่อนหน้า ในแต่ละแท็บใหม่ คุณจะเห็นผลงานชิ้นเอกจากศิลปินผู้ยิ่งใหญ่เช่น Van Gogh และ Monet หากคุณชอบภาพนี้ให้คลิกที่ภาพ จากนั้นระบบจะนำคุณไปยังเว็บไซต์ Google Cultural Institute ซึ่งเต็มไปด้วยข้อมูลเกี่ยวกับผลงานและผู้สร้างสรรค์ผลงาน

ดังนั้นใบเรียกเก็บเงินล่าสุดของคุณจากผู้ให้บริการมือถือของคุณสำหรับอินเทอร์เน็ตนั้นหนักมากใช่ไหม อย่าตื่นตกใจ. คุณเพียงแค่ต้องมีส่วนขยายนี้: จะช่วยลดปริมาณข้อมูลที่ใช้ในการท่องเว็บ ที่ กำลังเปิด Chromeจะใช้เซิร์ฟเวอร์ของ Google เพื่อบีบอัดหน้าก่อนที่จะโหลด มีข้อแม้เพียงข้อเดียว: SSL และโหมดไม่ระบุตัวตนจะไม่ถูกเปิดใช้งาน

มีหลายเวอร์ชันที่สร้างขึ้นสำหรับผู้ใช้ประเภทต่างๆ หนึ่งในนั้นเรียกว่า รุ่นนักพัฒนาของ Google Chrome- นี่เป็นรุ่นอะไรและทำไมจึงจำเป็น? นี่คือสิ่งที่จะกล่าวถึงในเนื้อหานี้

เป็นที่น่าสังเกตว่า Chrome ทางเลือกอื่นได้ปรากฏมาเป็นเวลานานแล้ว มาพร้อมกับเบราว์เซอร์ยอดนิยมนี้เกือบจะตั้งแต่เวอร์ชันเปิดตัว แต่ไม่ใช่ผู้ใช้ทุกคนจะเหมาะกับตัวเลือกอื่น

ความจริงก็คือ Chrome รุ่น "อื่นๆ" มีไว้สำหรับมืออาชีพในสาขาใดสาขาหนึ่ง: ผู้ออกแบบเลย์เอาต์ ผู้ทดสอบ นักพัฒนา และอื่นๆ เบราว์เซอร์ดังกล่าวไม่เหมาะสำหรับผู้ใช้ทั่วไป แต่เราต้องพูดถึงพวกเขา

มี Chrome เวอร์ชันใดบ้าง

ในความเป็นจริงมีไม่มาก อย่างไรก็ตาม มีเพียงอันเดียวเท่านั้นที่มั่นคง นี่คือสิ่งที่เปิดเผยต่อสาธารณะ ผู้ใช้ทุกคนสามารถดาวน์โหลดได้ แต่ก็มีเช่นกัน รุ่นทางเลือก- มาดูพวกเขากันดีกว่า

นี่คือเวอร์ชันของ Google Chrome ที่ทุกคนชื่นชอบที่มีอยู่ อย่างไรก็ตาม ในบริบทนี้ เราสนใจ Developer Edition ดังนั้นทุกอย่างจึงต้องได้รับการพิจารณา คุณสมบัติที่สำคัญรุ่นนี้สำหรับรายละเอียดเพิ่มเติม เท่านั้นจึงจะสามารถสรุปผลได้

คุณสมบัติรุ่นนักพัฒนา

คุณสมบัติที่สำคัญของสิ่งนี้ เวอร์ชันของ Google Chrome คือความพร้อมใช้งานของเครื่องมือในการพัฒนา พวกเขาจะมีประโยชน์สำหรับผู้ที่พัฒนาส่วนขยายและปลั๊กอินสำหรับเว็บเบราว์เซอร์นี้ ผู้ใช้โดยเฉลี่ยจะหลงทางในเครื่องมือดังกล่าว

คุณสมบัติที่สองคือคอนโซลขั้นสูง มันถูกใช้เพื่อแก้ไขโค้ดและเปิดใช้งาน ฟังก์ชั่นที่ซ่อนอยู่เบราว์เซอร์ อย่างไรก็ตามคุณจำเป็นต้องรู้วิธีการทำงานด้วย ความผิดพลาดเพียงเล็กน้อยในทีมอาจนำไปสู่ผลลัพธ์ที่เลวร้ายได้

“เคล็ดลับ” อีกประการหนึ่งคือการมีอยู่ของนวัตกรรมล่าสุดทั้งหมดที่ย้ายมาจาก Canary ไปยังเวอร์ชันนี้ ด้วยเหตุนี้ นักพัฒนาจึงสามารถเพิ่มประสิทธิภาพส่วนขยายของตนสำหรับความสามารถใหม่ๆ ของเว็บเบราว์เซอร์ได้

การปรับปรุงบ่อยครั้ง– คุณสมบัติที่โดดเด่นอีกประการหนึ่งของ Developer Edition พวกเขามาไม่สม่ำเสมอ แต่ไม่เกินหนึ่งครั้งทุกสองสัปดาห์ ในบางกรณี การอัปเดตอาจมาถึงภายในสองวัน สะดวกสำหรับผู้ที่กำลังทดสอบคุณสมบัติใหม่ของเว็บเบราว์เซอร์

บทสรุป

ข้างต้นเราได้พูดคุยเกี่ยวกับเวอร์ชันของ Google Chrome และพูดคุยโดยละเอียดเกี่ยวกับโครงสร้างสำหรับนักพัฒนา ตอนนี้ชัดเจนว่าเวอร์ชันนี้โดดเด่นด้วยชุดเครื่องมือและคอนโซลขั้นสูง

เป็นที่น่าสังเกตว่า ผู้ใช้ทั่วไปไม่จำเป็นต้องติดตั้ง Developer Edition เลย จะไม่มีความรู้สึกจากนี้ นอกจากนี้ชุดประกอบนี้ยังไม่เสถียรเป็นพิเศษ หากคุณไม่ใช่นักพัฒนาซอฟต์แวร์ ควรใช้ Stable จะดีกว่า

ในฐานะนักพัฒนาเว็บ คุณอาจใช้เวลาส่วนใหญ่กับเบราว์เซอร์ ปัจจุบัน เกือบทุกเบราว์เซอร์มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของตัวเอง ซึ่งช่วยให้คุณเห็นสิ่งที่เกิดขึ้นเบื้องหลัง เบราว์เซอร์บางตัวมีส่วนขยายมากมายที่สามารถช่วยคุณเพิ่มประสิทธิภาพกระบวนการพัฒนาเว็บของคุณได้

ในโพสต์นี้ เราได้รวบรวมส่วนขยาย Google Chrome ที่เราชื่นชอบและมีประโยชน์ ซึ่งช่วยให้ชีวิตของนักพัฒนาเว็บง่ายขึ้น

1 นักพัฒนาเว็บ

เครื่องมือสำหรับนักพัฒนาเว็บเป็นหนึ่งในส่วนขยายที่มีประโยชน์ที่สุดสำหรับนักพัฒนาทุกคน มันเพิ่มแถบเครื่องมือให้กับ Chrome ด้วยความช่วยเหลือนี้ คุณสามารถแก้ไข CSS ดู JavaScript และอื่นๆ อีกมากมายได้อย่างสะดวก ส่วนขยายมีให้สำหรับ เบราว์เซอร์ Chrome, ไฟร์ฟอกซ์ และโอเปร่า

2 เครื่องมือสำหรับนักพัฒนาเว็บสำหรับการเข้าถึง

ผู้คนหลายล้านคนใช้อินเทอร์เน็ต รวมถึงผู้พิการด้วย ดังนั้น เว็บไซต์ของคุณจะต้องสามารถเข้าถึงได้โดยผู้ใช้ประเภทนี้ ส่วนขยายนี้ช่วยให้คุณสามารถเรียกใช้การตรวจสอบการเข้าถึงบนหน้าใดก็ได้บนเว็บ เพิ่มลงในรายการเครื่องมือสำหรับนักพัฒนาเว็บของคุณ หากต้องการใช้งาน ให้คลิกที่แท็บการตรวจสอบ เลือกการตรวจสอบความพร้อมใช้งาน จากนั้นเลือกเรียกใช้ หากเพจละเมิดกฎใดๆ เพจเหล่านั้นจะแสดงเป็นรายการที่มีองค์ประกอบที่ละเมิดตั้งแต่หนึ่งรายการขึ้นไปบนเพจ

3 ผู้ทดสอบการออกแบบเว็บไซต์ที่ตอบสนอง

ใช้ส่วนขยาย Responsive Web Design Tester เพื่อทดสอบว่าหน้าเว็บตอบสนองอย่างไรบนอุปกรณ์ต่างๆ มันสะท้อนถึงขนาดและเบราว์เซอร์ อุปกรณ์เคลื่อนที่, มาพร้อมพรีเซตต่างๆ อุปกรณ์แอนดรอยด์- เขายังทำงานใน โหมดออฟไลน์ซึ่งมีประโยชน์เมื่อพัฒนาเว็บไซต์บนโฮสติ้งในพื้นที่ที่ไม่มีอินเทอร์เน็ต

4 วาปปาไลเซอร์

หากคุณเคยใช้ Built With คุณจะคุ้นเคยกับแนวคิดของ Wappalyzer ส่วนขยายนี้กำหนดระบบการจัดการเนื้อหา แพลตฟอร์ม อีคอมเมิร์ซ, เว็บเซิร์ฟเวอร์, ฐาน JavaScript, เครื่องมือวิเคราะห์ และอื่นๆ อีกมากมาย นอกจากนี้ แอปพลิเคชันนี้พร้อมใช้งานสำหรับเบราว์เซอร์ Firefox

5 พิกเซลที่สมบูรณ์แบบ

ด้วยส่วนขยายนี้ คุณจึงมั่นใจได้ว่าการออกแบบจะตรงกับโค้ดผลลัพธ์อย่างสมบูรณ์ เพียงติดตั้งส่วนขยาย ซึ่งจะทำให้คุณสามารถวางภาพซ้อนทับแบบกึ่งโปร่งใสไว้ด้านบนของหน้าเว็บเพื่อเปรียบเทียบภาพกับเค้าโครงได้ ภาพซ้อนทับอาจแตกต่างกันไปในแต่ละไซต์และจะถูกบันทึกไว้ระหว่างเซสชันการสืบค้น

6 GitHub ที่ได้รับการปรับปรุง

หากคุณหงุดหงิดกับอินเทอร์เฟซผู้ใช้ของ GitHub ส่วนขยายนี้เป็นสิ่งที่ต้องมีสำหรับคุณ มันทำให้อินเทอร์เฟซ GitHub เริ่มต้นง่ายขึ้นและเพิ่มทุกประเภท ฟังก์ชั่นเพิ่มเติม: ทำเครื่องหมายคำถาม; การทำเครื่องหมายคำขอว่ายังไม่ได้อ่าน เพิ่มปุ่มแก้ไขด่วน เพิ่มลิงค์ของผู้เขียนและอีกมากมาย

7 ส่วนหัวและคุกกี้ CDN

ส่วนขยายนี้ช่วยให้คุณดูส่วนหัว HTTP และคุกกี้ทั้งหมดได้ในที่เดียว นี่คือส่วนขยายที่มีน้ำหนักเบาและเรียบง่าย คุณสามารถเพิ่ม แก้ไข หรือลบส่วนหัวและคุกกี้ของคำขอที่กำหนดเองได้ เช่นเดียวกับการส่งออกส่วนหัวและคุกกี้ของคำขอไปยังไฟล์ CSV

8 ตัวสลับตัวแทนผู้ใช้

ใช้ส่วนขยายนี้เพื่อเปลี่ยน User Agent สำหรับการปลอมแปลงอุปกรณ์และ/หรือการปลอมแปลงเบราว์เซอร์ คุณสามารถสลับไปมาได้อย่างรวดเร็ว โดยผู้ใช้ที่แตกต่างกันหรือเพิ่มของคุณเองด้วยการตั้งค่าที่จำลอง อินเทอร์เน็ตเอ็กซ์พลอเรอร์, iPhone หรือเลียนแบบการทำงานของบอทของ Google สิ่งนี้มีประโยชน์สำหรับการแก้ไขข้อบกพร่องและทดสอบพฤติกรรมของไซต์ อุปกรณ์ต่างๆ.

9 โปรแกรมดู JSON

ส่วนขยายการพิมพ์ JSON และ JSONP ที่คุณสามารถปรับแต่งได้ตามที่คุณต้องการ ประกอบด้วยคุณลักษณะต่างๆ เช่น หน่วยที่ยุบได้ URL ที่คลิกได้ แผ่นจดบันทึกที่คุณสามารถป้อนรูปแบบ JSON เป็นระยะเวลาไม่ จำกัด โดยใช้ปุ่มเดียวหรือคีย์ผสม ธีมในตัว 27 ธีมและอีกมากมาย

10 ตรวจสอบลิงค์ของฉัน

หากคุณแก้ไขหน้าเว็บที่มีลิงก์จำนวนมากเป็นประจำ อย่าลืมรวมส่วนขยายนี้ไว้ในรายชื่อผู้ช่วยนักพัฒนาเว็บของคุณด้วย สามารถค้นหาลิงก์ทั้งหมดบนหน้าได้อย่างรวดเร็วและตรวจสอบแต่ละลิงก์ ลิงค์ที่ดีจะถูกเน้นด้วยสีเขียว และลิงค์ที่ใช้งานไม่ได้จะถูกเน้นด้วยสีแดง ส่วนขยายจะเผยแพร่ URL แบบเต็มของลิงก์ที่ใช้งานไม่ได้ในบันทึกของคอนโซลด้วย

11 สแนปผู้ใช้

บ่อยครั้งที่นักพัฒนาเว็บทำงานร่วมกับคนหลายคนทุกวันในขณะที่ทำงานในโครงการ ส่วนขยายขนาดเล็กนี้จะช่วยปรับปรุงกระบวนการ การทำงานร่วมกันเนื่องจากจะจับภาพหน้าจอของเนื้อหาปัจจุบัน คุณจะสามารถสื่อสารประเด็นต่างๆ แลกเปลี่ยน ได้อย่างมีประสิทธิภาพมากขึ้น ข้อเสนอแนะระหว่างนักพัฒนารายอื่น ลูกค้า และบุคคลอื่นที่เกี่ยวข้องกับการพัฒนาเว็บของโครงการ

12 แท็บ IE

IE Tab จำลอง Internet Explorer โดยใช้กลไกการเรนเดอร์ใน Chrome โดยตรง แอปพลิเคชั่นอนุญาตให้คุณใช้องค์ประกอบ ตัวควบคุม ActiveXเพื่อทดสอบไซต์ที่กำลังพัฒนาด้วย IE เวอร์ชันต่างๆ ตั้งแต่ IE6 ถึง IE9

13 DevTools บันทึกอัตโนมัติ

การใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อทำการเปลี่ยนแปลงทันทีเพื่อการทดสอบ จากนั้นจึงแทรกการเปลี่ยนแปลงเข้าไป โปรแกรมแก้ไขข้อความและการอัปโหลดไปยังเซิร์ฟเวอร์อาจกลายเป็นความทรมานอันเลวร้ายได้ โชคดีที่ส่วนขยายนี้ช่วยชีวิตได้เนื่องจากช่วยให้คุณสามารถบันทึกการเปลี่ยนแปลงใด ๆ ที่คุณทำกับ CSS และ JS ของไซต์ลงในไฟล์ต้นฉบับได้โดยอัตโนมัติ

14 ผู้ดูแลระบบ Chrome MySQL

หากคุณทำงานกับฐานข้อมูลเป็นประจำทุกวัน ให้ลองเพิ่มส่วนขยายนี้ในเวิร์กโฟลว์ของคุณ นี่คือไคลเอนต์ MySQL ธรรมดาที่มีเครื่องมือที่จำเป็นทั้งหมดสำหรับการจัดการฐานข้อมูลและ ตาราง MySQL- คุณจะสามารถเชื่อมต่อและจัดการฐานข้อมูล เรียกใช้แบบสอบถาม สร้างและวางตาราง และอื่นๆ อีกมากมายในอินเทอร์เฟซที่ง่ายและรวดเร็วของแอป

15 เครื่องมือ Grunt Devtools

ส่วนขยายเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome นี้จะเพิ่มเครื่องมือที่รองรับงานในเบื้องหลังและช่วยให้คุณทำงานต่างๆ ให้กับหลายโครงการได้ในหน้าต่างเดียว

หากคุณใช้ส่วนขยายอื่นสำหรับ Google Chrome ที่เป็นประโยชน์สำหรับนักพัฒนาเว็บ โปรดแบ่งปันส่วนขยายเหล่านั้นในความคิดเห็นของบทความ เราสนใจที่จะรู้ว่าโปรแกรมเมอร์และนักออกแบบเลย์เอาต์คนอื่นๆ ใช้อะไรในการทำงานของพวกเขา

มีส่วนขยายฟรีมากมายสำหรับ เบราว์เซอร์ Google Chrome ที่ช่วยทำให้ชีวิตของคุณง่ายขึ้น นี่คือสิ่งที่ดีที่สุด 20 ข้อ

ในบทความนี้เรานำเสนอ ส่วนขยายที่ดีที่สุด Google Chrome เพื่อวัตถุประสงค์ที่แตกต่างกัน - แต่แต่ละอย่างได้รับการออกแบบมาเพื่อให้คุณทำงานได้ง่ายขึ้น

Firefox มีชื่อเสียงมายาวนานในเรื่องของมัน การตั้งค่าแบบกำหนดเองและส่วนขยายมากมาย แต่ Google Chrome ก็ได้รับความนิยมอย่างมากในหมู่นักออกแบบเว็บไซต์และนักพัฒนาในช่วงไม่กี่ปีที่ผ่านมา สาเหตุหนึ่งคือความเร็วและเครื่องมือสำหรับนักพัฒนาในตัว

ขณะนี้ด้วยการพัฒนาคอลเลกชันส่วนขยายของ Chrome ซึ่งขยายตัวทุกวันนี่คือเหตุผลว่าทำไมนักพัฒนาเว็บและนักออกแบบจำนวนมากจึงเลือกเบราว์เซอร์นี้ด้วยตนเอง

ต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้หรือไม่? ตรวจสอบรายชื่อของเรา

01. iMacros สำหรับ Chrome

ส่วนขยาย iMacros สำหรับ Chrome ช่วยให้คุณสามารถบันทึกการกระทำของคุณและบันทึกไว้ได้

ในฐานะนักพัฒนาเว็บ คุณอาจต้องตรวจสอบหน้าเว็บของคุณ การทำสิ่งเดิมๆ ซ้ำๆ อาจเป็นกระบวนการที่น่าเบื่อ iMacros เป็นส่วนขยาย Chrome ที่มีประโยชน์ซึ่งช่วยให้คุณสามารถบันทึกการกระทำของคุณและบันทึกไว้ได้ โดยกำหนดให้คุณต้องดำเนินการเพียงครั้งเดียวเท่านั้น

จากนั้นคุณสามารถตรวจสอบหน้าเว็บของคุณซ้ำแล้วซ้ำอีก โดยทำซ้ำขั้นตอนด้วยการคลิกปุ่มเพียงปุ่มเดียว ซึ่งจะช่วยประหยัดเวลาอันมีค่าและช่วยให้คุณมีสมาธิกับประเด็นที่สำคัญกว่าได้

02. สนามเด็กเล่นแบบอักษร

Font Playground ให้คุณทดลองกับแบบอักษรท้องถิ่นบนหน้าเว็บที่ใช้งานจริง

นักออกแบบและนักพัฒนาทุกคนจะพบกับสิ่งที่มีประโยชน์มากมายในส่วนขยายนี้ Font Playground ช่วยให้คุณสามารถทดลองใช้แบบอักษรในเครื่องและไลบรารีแบบอักษรของ Google ทั้งหมดบนหน้าเว็บที่ใช้งานอยู่ โดยไม่ต้องทำการเปลี่ยนแปลงใดๆ กับหน้าเว็บ

ข้อดีของส่วนขยายนี้คือ มีขนาดแบบอักษร สไตล์ และเอฟเฟกต์ที่เป็นไปได้ทั้งหมด ขั้นแรกให้คุณเห็นภาพตัวเลือกแบบอักษรต่างๆ ก่อนทำการเปลี่ยนแปลงโค้ดจริง

03. แบบอักษรอะไร

พวกเขาใช้แบบอักษรอะไร? ส่วนขยาย What Font Chrome สามารถแสดงสิ่งนี้ให้คุณเห็น!

ส่วนขยายที่มีประโยชน์มากสำหรับ Google Chrome แบบอักษรอะไรช่วยให้นักพัฒนาและนักออกแบบสามารถกำหนดแบบอักษรที่ใช้บนหน้าเว็บได้

ดังนั้น หากคุณพบแบบอักษรออนไลน์ที่ดูสวยงามและต้องการใช้แบบอักษรนั้นในโปรเจ็กต์ในอนาคตของคุณ เพียงเลื่อนเมาส์ไปที่แบบอักษรนั้น คุณจะรู้ทันทีว่ามันคืออะไร

04. อีสโลว์

YSlow จะบอกคุณว่าอะไรที่ทำให้เพจช้าลง

ด้วยเครื่องมือนี้ คุณไม่สามารถตรวจสอบได้ว่าหน้าเว็บโหลดเร็วแค่ไหน แต่ยังแสดงให้คุณเห็นว่ามีอะไรที่ทำให้หน้าเว็บช้าลงหรือไม่

YSlow ทดสอบหน้าเว็บตามกฎประสิทธิภาพ 23 ข้อจาก 34 ข้อที่พัฒนาโดยทีมงาน Yahoo เป็นเครื่องมือที่มีประโยชน์อย่างยิ่งสำหรับการวิเคราะห์หน้าเว็บและยังแนะนำวิธีเพิ่มประสิทธิภาพการทำงานอีกด้วย

05. นักพัฒนาเว็บ

ส่วนขยาย Chrome Web Developer มีเครื่องมือที่มีประโยชน์มากมายสำหรับนักพัฒนา

หากคุณเป็นนักพัฒนาเว็บ คุณอาจถามตัวเองว่า: คุณจัดการอย่างไรจนถึงตอนนี้โดยไม่มีส่วนขยายนี้ เพิ่มปุ่มแถบเครื่องมือที่ช่วยให้ Chrome สามารถเข้าถึงเครื่องมือที่มีประโยชน์มากมายสำหรับนักพัฒนาเว็บ

นี่เป็นเวอร์ชันอย่างเป็นทางการของส่วนขยาย Web Developer ที่พัฒนาขึ้นสำหรับ Firefox

06. รายการตรวจสอบสำหรับนักพัฒนาเว็บ

แก้ไขปัญหาด้านประสิทธิภาพในเครื่องมือ Chrome ที่มีประโยชน์นี้

เครื่องมือนี้ช่วยให้คุณตรวจสอบทุกอย่างได้ ไม่ว่าจะเป็นหน้าเว็บของคุณเป็นไปตามข้อกำหนด SEO, ความสามารถในการใช้งาน ตลอดจนการมองเห็นและประสิทธิภาพหรือไม่ (ความเร็วในการโหลดหน้าเว็บ)

ตัวอย่างเช่น หากคุณพลาดแท็ก H1 หรือหากหน้านั้นไม่มีชื่อเมตาหรือคำอธิบายเมตา ส่วนขยายรายการตรวจสอบสำหรับนักพัฒนาเว็บจะแจ้งให้คุณทราบเกี่ยวกับเรื่องนี้

เพื่อให้คุณสามารถตัดสินใจได้อย่างรวดเร็ว ปัญหานี้- หากคุณคลิกลิงก์ " ข้อมูลเพิ่มเติมและความช่วยเหลือ» ที่ด้านล่างของส่วนขยาย คุณจะพบรายการโดยละเอียดเพิ่มเติม

07. DevTools บันทึกอัตโนมัติ

บันทึกการเปลี่ยนแปลงโดยอัตโนมัติ ไฟล์ต้นฉบับหน้า (CSS และ JS)

สมบัติที่แท้จริงสำหรับนักพัฒนาทุกคน DevTools Autosave ช่วยให้คุณสามารถบันทึกการเปลี่ยนแปลงใดๆ ที่เกิดขึ้นกับไฟล์ต้นฉบับ CSS และ JS ของเพจได้โดยอัตโนมัติผ่านสภาพแวดล้อม Chrome Dev Tools ส่วนขยายนี้ติดตั้งและใช้งานได้ง่ายและจะช่วยคุณประหยัดเวลาได้มาก

08. ไวร์เฟรมทันที

ช่วยให้คุณสามารถดูโครงร่างของหน้าเว็บได้

เชื่อมต่อการดูแบบ Wireframe ของหน้าเว็บใดๆ ก็ได้ด้วยการคลิกเพียงครั้งเดียว ส่วนขยายของ Google Chrome นี้ช่วยให้นักพัฒนาเว็บและนักออกแบบดูหน้าเว็บ ไม่ว่าจะเป็นในท้องถิ่นหรือเผยแพร่ทางออนไลน์ ด้วยการซ้อนทับแบบ Wireframe

09. โปรแกรมจำลองระลอกคลื่น

Ripple Emulator ช่วยในการดีบักหน้าเว็บ การตรวจสอบ DOM และการทดสอบอัตโนมัติ

Ripple Emulator เป็นโปรแกรมจำลองมือถือหลายแพลตฟอร์มที่จะช่วยคุณทดสอบแอปพลิเคชันเว็บของคุณบนอุปกรณ์และความละเอียดหน้าจอต่างๆ

ส่วนขยาย Ripple Emulator สามารถใช้ร่วมกับเครื่องมือการพัฒนาที่มีอยู่สำหรับการดีบัก การตรวจสอบ DOM และการทดสอบอัตโนมัติ

10. สตรีค

ติดตามการสนทนาทางอีเมลในตั๋วใบเดียว การมอบหมายงาน

Streak คือ CRM หลักและเครื่องมือสนับสนุน อีเมล Gmail

ส่วนขยายช่วยให้คุณสามารถรวมกล่องอีเมลทั้งหมดของคุณไว้ในที่เดียว หรือจัดระเบียบการติดตามการแลกเปลี่ยนข้อความในตั๋วใบเดียว มอบหมายงานเพื่อให้คุณสามารถจัดการกระบวนการสื่อสารกับคู่สัญญาของคุณเป็นการส่วนตัว หรือให้สิทธิ์ในการเข้าถึงสิ่งนี้แก่บุคคลอื่น

11. ค้นหา Stackoverflow

รับคำตอบอย่างรวดเร็วสำหรับคำถามของคุณด้วยส่วนขยายที่ต้องใช้นี้

หากคุณเป็นนักพัฒนาเว็บ คุณต้องเคยได้ยินเกี่ยวกับ Stack Overflow ซึ่งเป็นสถานที่ที่นักพัฒนาหลายคนหันไปถามคำถามต่างๆ ที่เกี่ยวข้องกับการพัฒนาโครงการเว็บ ถ้าไม่เช่นนั้นคุณต้องทำความรู้จักกับเขาอย่างแน่นอน เป็นชุมชนที่เจริญรุ่งเรืองอย่างแท้จริงซึ่งครอบคลุมหัวข้อต่างๆ มากมาย ตั้งแต่ C# และ Java ไปจนถึง PHP และ JQuery

ส่วนขยายที่ยอดเยี่ยมนี้จะเพิ่มช่องค้นหาลงในเบราว์เซอร์ของคุณโดยตรง และช่วยให้คุณสามารถใช้ประโยชน์จากทรัพยากรอันมากมายของ Stack Overflow ส่วนขยายที่ต้องใช้!

12. คู่มือ PHP Ninja

เอกสารทั้งหมดสำหรับ PHP 5.5 ในเบราว์เซอร์ของคุณ

เป็นเรื่องยากมากที่จะจดจำทุกฟังก์ชั่น ดังนั้นหากคุณใช้เวลาหลายชั่วโมงในการค้นหาฟังก์ชั่นเฉพาะ ฟังก์ชั่น PHPผ่านทาง Google ส่วนขยายนี้จะดึงดูดความสนใจของคุณอย่างแน่นอน คู่มือ PHP Ninja จัดให้

คุณได้รับเอกสารทั้งหมดสำหรับ PHP 5.5 พร้อมตัวอย่างเฉพาะในแปดภาษาในเบราว์เซอร์ของคุณ

13. เพอร์เฟคพิกเซล

ส่วนขยายนี้จะช่วยให้คุณมั่นใจได้ว่าทุกพิกเซลบนไซต์ของคุณตรงกับการออกแบบ

นักออกแบบเกลียดสถานการณ์เมื่อพวกเขาสร้างการออกแบบที่น่าทึ่ง แต่หลังจากแปลเป็นโค้ดแล้ว มีบางอย่างไม่ตรงกับการออกแบบดั้งเดิม โปรเซสเซอร์ Pixel ที่สมบูรณ์แบบจริงๆ ส่วนขยายที่สมบูรณ์แบบสำหรับนักพัฒนาเว็บที่มุ่งมั่นสร้างเว็บไซต์ที่ตรงกับการออกแบบอย่างถูกต้อง

ส่วนขยายที่ใช้งานง่ายนี้ช่วยให้คุณสามารถวางภาพซ้อนทับแบบกึ่งโปร่งใสที่ด้านบนของหน้าเว็บ และทำการตรวจสอบการจับคู่แบบพิกเซลต่อพิกเซลเพื่อให้แน่ใจว่าตรงกัน 100 เปอร์เซ็นต์

14. โค้ดโคล่า

ช่วยให้คุณสามารถแก้ไข CSS ของหน้าเว็บได้

เครื่องมือนี้ไม่เพียงแต่ช่วยให้คุณดูซอร์สโค้ดที่คุณกำลังทำงานอยู่เท่านั้น แต่ยังสามารถทำงานเป็นตัวแก้ไข CSS ได้อีกด้วย ซึ่งหมายความว่าคุณสามารถแก้ไขได้ สไตล์ CSSหน้าเว็บของคุณตรงนั้นและดูผลลัพธ์การเปลี่ยนแปลงของคุณได้ทันที

15. โครมดมกลิ่น

การตรวจสอบเว็บแอปพลิเคชันและไลบรารี JavaScript

ส่วนขยายนี้จะช่วยให้นักพัฒนาเว็บสามารถตรวจสอบและระบุเว็บแอปพลิเคชันรวมถึงไลบรารี JavaScript ที่แนบมากับโปรเจ็กต์เฉพาะได้ ส่วนขยายทำงานได้ง่ายที่สุด: ไอคอนจะปรากฏในแถบที่อยู่เพื่อระบุเวอร์ชันของเฟรมเวิร์กหรือ CMS ที่ใช้

16. ตัวสลับตัวแทนผู้ใช้

ตรวจสอบว่าไซต์ของคุณมีลักษณะอย่างไรบนอุปกรณ์ต่างๆ

เครื่องมือที่ยอดเยี่ยมสำหรับการดูว่าเว็บไซต์มีลักษณะอย่างไร ประเภทต่างๆอุปกรณ์ต่างๆ เช่น iPad, iPhone หรืออุปกรณ์ Android นอกจากนี้ยังมีประโยชน์มากในแง่ของการดูเว็บไซต์ในแบบที่เครื่องมือค้นหาเห็น