Polypane - เบราว์เซอร์สำหรับนักพัฒนาเว็บที่มีความทะเยอทะยาน

• เดสก์ท็อปเบราว์เซอร์ (บนพื้นฐาน Chromium) ที่รวมฟีเจอร์สำหรับการพัฒนา ดีบัก และทดสอบเว็บไซต์ เช่น responsive design, accessibility และ performance testing
• งานทุกอย่างซิงก์กันแบบเรียลไทม์ และสามารถดูรวมถึงโต้ตอบกับ viewport หลายขนาดได้พร้อมกัน
  • การคลิก การพิมพ์ การเลื่อน และการ hover ทุกอย่างจะแสดงผลกับทุก viewport ทันที
• ใช้งานได้บน Mac, Windows, Linux และมีให้ทดลองใช้ฟรี 14 วัน

สรุปฟีเจอร์หลัก

• การออกแบบแบบตอบสนอง

  • ดูทุก viewport ได้ในครั้งเดียว ตั้งแต่มือถือไปจนถึงจอ 5K
  • ทดสอบ CSS breakpoints ได้โดยไม่ต้องปรับขนาดเบราว์เซอร์ด้วยตนเอง

• การวิเคราะห์และซิงก์แบบเรียลไทม์

  • การเลื่อน คลิก พิมพ์ และ hover ทุกอย่างจะซิงก์กับทุก viewport แบบเรียลไทม์
  • มีทั้งคอนโซลและตัวตรวจสอบองค์ประกอบรวมอยู่ในตัว เพื่อลดงานที่ต้องทำซ้ำ

• การตรวจสอบด้านการเข้าถึงและประสิทธิภาพ

  • ตรวจสอบโครงสร้าง เมตะดาต้า และการเข้าถึง (A11y) แบบเรียลไทม์ พร้อมเสนอสิ่งที่ควรปรับปรุง
  • มีเครื่องมือดีบักมากกว่า 40 รายการ รองรับการทดสอบได้หลายรูปแบบ

• โหมดมืดและการทดสอบสื่อหลากหลายรูปแบบ

  • ทดสอบ dark/light mode พร้อมกันได้โดยไม่ต้องเปลี่ยนการตั้งค่าระบบปฏิบัติการ
  • จำลองเงื่อนไขสื่อได้หลากหลาย เช่น reduced motion, โหมดประหยัดข้อมูล และสไตล์สำหรับพิมพ์

• พรีวิวโซเชียลมีเดียการ์ด

  • รองรับพรีวิวเมตะการ์ดของแพลตฟอร์มหลัก เช่น Twitter(X), Facebook, Slack, LinkedIn และ Discord
  • ให้พรีวิวที่แม่นยำระดับพิกเซลได้แม้อยู่ในโหมด light/dark และในสถานะ localhost

• รองรับส่วนขยายเครื่องมือนักพัฒนา

  • ใช้งานส่วนขยาย DevTools ได้หลากหลาย เช่น React, Vue, Angular, Svelte และ Redux
  • เนื่องจากเป็นเบราว์เซอร์บนพื้นฐาน Chromium จึงมอบสภาพแวดล้อมการพัฒนาที่คุ้นเคย

จุดเด่นเฉพาะของ Polypane

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

รายการฟีเจอร์สำคัญอื่น ๆ

• สร้าง viewport ได้ไม่จำกัด
• ซิงก์คีย์บอร์ด, hover และการเลื่อน
• กริดโอเวอร์เลย์
• JSON viewer และพรีเซ็ตอุปกรณ์หลากหลายแบบ
• ตรวจจับ horizontal overflow
• เปรียบเทียบดีไซน์แบบภาพ (diff)
• จำลองภาวะตาบอดสี
• ภาพรวมเมตะดาต้า
• ตัวตรวจสอบ Web Vitals
• การจำลองการสัมผัส
• ตรวจจับลิงก์เสีย
• ตั้งค่า custom headers
• ฟังก์ชันบันทึกและแชร์ workspace

คำจากผู้สร้าง

• เป็นโปรเจกต์ที่นักพัฒนา Kilian Valkhof เริ่มต้นขึ้นเพื่อแก้ปัญหาความไม่สะดวกที่พบระหว่างสร้างเว็บไซต์จำนวนมาก
• เมื่อเทียบกับการใช้ Chrome เพียงอย่างเดียว ความเร็วในการทำงานเพิ่มขึ้นราว 60% และผู้ใช้เองก็รู้สึกถึงประสิทธิภาพที่เพิ่มขึ้น 2–5 เท่า
• เป็นโปรเจกต์ที่ดำเนินงานด้วยฟีดแบ็กและการสมัครใช้งานจากผู้ใช้โดยไม่มีเงินลงทุน และมุ่งเน้นการพัฒนาเครื่องมือเพื่อเหล่านักพัฒนา

สรุปรีวิวจากผู้ใช้

• Vivian Guillen: “เร็วมาก และการซิงก์การเลื่อนยอดเยี่ยมสุด ๆ”
• Scott Tolinski: “ช่วยให้เจอปัญหาระยะห่างระหว่าง breakpoints ได้ง่าย”
• Sara Soueidan: “เครื่องมือดีบักยอดเยี่ยมมากจนน่าทึ่ง”
• Kevin Powell: “ฟีเจอร์ตรวจสอบการเข้าถึงและการดีบักยอดเยี่ยมมาก”
• Segun Adebayo (ผู้พัฒนา Chakra UI): “เป็นเครื่องมือที่จำเป็นสำหรับการพัฒนาแอปและเว็บไซต์ยุคใหม่”

[nemorize]

https://responsiveviewer.org/
มีเวอร์ชันที่แจกจ่ายเป็นส่วนขยายของ Chrome ด้วย หากยอมสละฟีเจอร์บางส่วนไป ก็สามารถใช้งานได้ทันทีโดยไม่ต้องติดตั้งส่วนขยาย

[qyurila]

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

[luiseok]

มีเบราว์เซอร์ที่คล้ายกันอยู่ แม้ฟีเจอร์จะยังขาดไปบ้าง
https://responsively.app/
ถ้าใครยังลังเลเพราะ Polypane เป็นแบบเสียเงิน ก็แนะนำให้ลองใช้ดูครับ

[GN⁺]

ความคิดเห็นบน Hacker News

• สวัสดีครับ ผมคือ Kilian ผู้ก่อตั้งและนักพัฒนาเดี่ยวของ Polypane รู้สึกน่าสนใจที่ได้เห็นมันกลับขึ้นหน้าแรกอีกครั้ง
• ไม่นานมานี้ผมเพิ่งทำ responsive web design ด้วย CSS สมัยใหม่เป็นครั้งแรก เรียนรู้ flexbox กับ grid และใช้ทั้งหลายเบราว์เซอร์กับตัวจำลองอุปกรณ์หลายแบบ ถ้ารู้จักแอปนี้ก่อนก็น่าจะประหยัดแรงไปได้มาก
• ผมใช้ Polypane อยู่บ่อยมาก เป็นผลิตภัณฑ์ที่ยอดเยี่ยม และจำลองปัญหายิบย่อยของอุปกรณ์ที่ Chrome device view จัดการได้ไม่ดีนักได้อย่างดี
• ผมใช้ Polypane มานานกว่าหนึ่งปีแล้ว มันอาจจะไม่เหมาะกับทุกคน แต่ตรงกับความต้องการของผมมาก
  • การจัดการเซสชันช่วยให้เวิร์กโฟลว์เป็นระเบียบดี
  • การออกแบบแบบ responsive-first พร้อมพาเนลสำหรับมุมมองเดสก์ท็อปและมือถือ
  • ฟีเจอร์จับภาพหน้าจอที่ครบถ้วนพร้อมคำอธิบายประกอบ
  • คุณอาจทำฟีเจอร์เหล่านี้ซ้ำได้ด้วยเบราว์เซอร์อื่นหรือปลั๊กอิน แต่ผมชอบที่ทุกอย่างถูกตั้งค่าไว้ให้พร้อมตั้งแต่แรกและไม่ต้องตั้งค่าเพิ่ม
  • การซัพพอร์ตยอดเยี่ยมมาก ตอนที่ IDE ของผมมีปัญหารัน Polypane ได้ไม่ถูกต้อง ผมได้รับความช่วยเหลือผ่าน Slack และแก้ปัญหาได้อย่างรวดเร็ว
  • ถ้าอ่านบทสนทนาใน Slack ก็จะเห็นชัดว่าพวกเขาทุ่มเทเพื่อสร้างผลิตภัณฑ์ที่ดีที่สุดให้ผู้ใช้
• อยากให้มีเบราว์เซอร์ที่สามารถจำลองเบราว์เซอร์บนอุปกรณ์มือถือได้อย่างแม่นยำ ไม่ใช่แค่เปลี่ยนขนาดหน้าจอ แม้แต่ iOS Simulator ของ Apple เองก็ยังทำส่วนนี้ได้ไม่ดี
• ดูเหมือนว่าจะจำลองอะไรได้หลายอย่างมาก แต่อยากรู้ว่ามีอะไรบ้างที่มันจำลองได้ไม่ดี
  • ดูเหมือนว่าสร้างบน Chromium เลยอาจจะไม่สามารถแสดงปัญหาที่เกิดเฉพาะใน Safari หรือ Mozilla ได้
  • น่าจะมีบอกไว้ในเอกสาร
  • แก้ไข: มีอยู่ด้านล่างของ FAQ แล้ว อยากรู้ว่านอกจากเรื่องเอนจินเบราว์เซอร์จริง ยังมีข้อจำกัดที่ทราบอื่น ๆ อีกไหม
• ฟีเจอร์แทบทั้งหมดนี้มีอยู่แล้วในเครื่องมือนักพัฒนาของ Firefox เลยสงสัยว่าทำไมถึงต้องมีเบราว์เซอร์ใหม่ น่าจะทำเป็นส่วนขยายก็ได้
• อยากรู้ว่ามีฟีเจอร์อะไรบ้างที่ให้ได้เหนือกว่า Browserstack (ในแง่ของการทดสอบข้ามเบราว์เซอร์)
• อยากรู้ว่ามีการผสาน GenAI ไหม (Copilot, Claude ฯลฯ)
  • อยากให้ช่วยเอาผลิตภัณฑ์นี้ไปขายกับผู้จัดการได้ง่ายขึ้น
• อยากให้โมเดลราคามีแบบซื้อขาดด้วย ดูยอดเยี่ยมมากแต่คงยากที่จะหาเหตุผลมารองรับค่าใช้จ่ายรายเดือน/รายปี
• เจ๋งมาก! อยากรู้ว่ามีโอกาสได้ส่วนลดสำหรับนักศึกษาไหม ตอนนี้ตั้งใจจะลองทดลองใช้ฟรีก่อน