13 điểm bởi GN⁺ 2025-03-26 | 4 bình luận | Chia sẻ qua WhatsApp
  • Trình duyệt desktop (dựa trên Chromium) tích hợp các tính năng để phát triển, gỡ lỗi và kiểm thử website như thiết kế responsive, khả năng truy cập và kiểm tra hiệu năng
  • Mọi thao tác đều được đồng bộ theo thời gian thực, cho phép xem và tương tác đồng thời với nhiều viewport kích thước khác nhau
    • Mọi hành động như click, nhập liệu, cuộn, hover... đều được phản ánh ngay lập tức trên tất cả viewport
  • Có sẵn trên Mac, Windows, Linux và cho phép dùng thử miễn phí 14 ngày

Tóm tắt tính năng cốt lõi

  • Thiết kế responsive

    • Có thể xem mọi viewport từ di động đến màn hình 5K trong cùng một cái nhìn
    • Có thể kiểm thử CSS breakpoint mà không cần chỉnh kích thước trình duyệt thủ công
  • Phân tích và đồng bộ thời gian thực

    • Mọi thao tác như cuộn, click, nhập liệu, hover đều được đồng bộ theo thời gian thực trên tất cả viewport
    • Tích hợp cả console và trình kiểm tra phần tử để giảm các thao tác lặp lại
  • Kiểm tra khả năng truy cập và hiệu năng

    • Kiểm tra cấu trúc, metadata, khả năng truy cập (A11y) theo thời gian thực và đề xuất cải thiện
    • Tích hợp hơn 40 công cụ debug để kiểm thử theo nhiều cách khác nhau
  • Chế độ tối và kiểm thử đa phương tiện

    • Có thể kiểm thử đồng thời chế độ dark/light mà không cần thay đổi cài đặt hệ điều hành
    • Mô phỏng nhiều điều kiện media như giảm chuyển động, chế độ tiết kiệm dữ liệu, kiểu in ấn
  • Xem trước thẻ mạng xã hội

    • Hỗ trợ xem trước meta card của các nền tảng chính như Twitter(X), Facebook, Slack, LinkedIn, Discord
    • Cung cấp preview chính xác đến từng pixel ngay cả ở chế độ light/dark và trên localhost
  • Hỗ trợ mở rộng công cụ phát triển

    • Có thể sử dụng nhiều tiện ích mở rộng DevTools như React, Vue, Angular, Svelte, Redux
    • Vì là trình duyệt dựa trên Chromium nên mang lại môi trường phát triển quen thuộc

Điểm mạnh riêng của Polypane

  • Có thể kiểm thử nhiều thiết bị và môi trường chỉ với một trình duyệt duy nhất
  • Tăng tốc quy trình phát triển và thiết kế lên tới 5 lần
  • Tích hợp tất cả trong một: công cụ debug đa năng, kiểm tra khả năng truy cập, đồng bộ viewport, chụp màn hình, tải lại theo thời gian thực...
  • Dự án phát triển dựa trên phản hồi người dùng và là dự án tự cấp vốn 100%, lấy người dùng làm trung tâm

Danh sách các tính năng đáng chú ý khác

  • Tạo viewport không giới hạn
  • Đồng bộ bàn phím, hover, cuộn
  • Grid overlay
  • JSON viewer và nhiều preset thiết bị khác nhau
  • Phát hiện tràn ngang
  • So sánh thiết kế trực quan (diff)
  • Mô phỏng mù màu
  • Tổng quan metadata
  • Trình kiểm tra Web Vitals
  • Giả lập cảm ứng
  • Phát hiện liên kết hỏng
  • Thiết lập custom header
  • Lưu và chia sẻ workspace

Lời từ nhà sáng tạo

  • Đây là dự án được khởi động để giải quyết những bất tiện mà nhà phát triển Kilian Valkhof gặp phải khi xây dựng vô số website
  • Tốc độ làm việc đã tăng khoảng 60% so với khi chỉ dùng Chrome, và người dùng cũng cảm nhận năng suất tăng từ 2 đến 5 lần
  • Đây là dự án vận hành bằng phản hồi và đăng ký của người dùng mà không nhận đầu tư, tập trung phát triển công cụ lấy nhà phát triển làm trung tâm

Tóm tắt đánh giá người dùng

  • Vivian Guillen: “Cực kỳ nhanh và tính năng đồng bộ cuộn thật tuyệt vời”
  • Scott Tolinski: “Dễ dàng phát hiện vấn đề khoảng trắng giữa các breakpoint”
  • Sara Soueidan: “Các công cụ debug quá xuất sắc đến mức phải trầm trồ”
  • Kevin Powell: “Tính năng kiểm tra khả năng truy cập và debug rất vượt trội”
  • Segun Adebayo (nhà phát triển Chakra UI): “Đây là công cụ thiết yếu cho việc phát triển ứng dụng và website hiện đại”

4 bình luận

 
nemorize 2025-03-26

https://responsiveviewer.org/
Cũng có một bản được phát hành dưới dạng tiện ích mở rộng Chrome. Nếu chấp nhận bỏ qua một số tính năng thì bạn cũng có thể dùng ngay mà không cần tiện ích mở rộng.

 
qyurila 2025-03-26

Khá khó tìm thấy chỗ họ nhắc đến điều này, nhưng nếu liên kết với tài khoản sinh viên GitHub thì có thể dùng miễn phí. Nhờ vậy mà tôi đã dùng rất ổn cho dự án cá nhân trước đây.

 
luiseok 2025-03-26

Có một trình duyệt tương tự, dù hơi thiếu một số tính năng.
https://responsively.app/
Nếu bạn còn do dự vì Polypane là trả phí, tôi khuyên bạn nên thử dùng ứng dụng này.

 
GN⁺ 2025-03-26
Ý kiến trên Hacker News
  • Xin chào, tôi là Kilian, người sáng lập và cũng là nhà phát triển duy nhất của Polypane. Thật thú vị khi thấy nó lại xuất hiện trên trang chủ
  • Gần đây tôi lần đầu triển khai thiết kế web responsive bằng CSS hiện đại, học flexbox và grid, đồng thời dùng nhiều trình duyệt và trình giả lập thiết bị. Nếu biết đến ứng dụng này sớm hơn thì có lẽ tôi đã đỡ tốn rất nhiều công sức
  • Tôi đã dùng Polypane khá nhiều. Đây là một sản phẩm tuyệt vời và mô phỏng rất tốt những vấn đề thiết bị tinh vi mà chế độ xem thiết bị của Chrome xử lý chưa tốt
  • Tôi đã dùng Polypane hơn một năm, có thể không phù hợp với tất cả mọi người nhưng lại rất hợp với nhu cầu của tôi
    • Quản lý phiên giúp quy trình làm việc được sắp xếp gọn gàng
    • Thiết kế ưu tiên responsive với các panel cho chế độ xem desktop và mobile
    • Tính năng chụp màn hình toàn diện, có kèm chú thích
    • Có thể tái tạo các tính năng này bằng trình duyệt hoặc plugin khác, nhưng tôi thích việc mọi thứ đã được thiết lập sẵn nên không cần cấu hình thêm
    • Hỗ trợ rất xuất sắc. Khi tôi gặp vấn đề IDE không thể chạy Polypane đúng cách, tôi đã được trợ giúp qua Slack và giải quyết rất nhanh
    • Nếu đọc các cuộc trò chuyện trên Slack, có thể thấy rõ họ tận tâm tạo ra sản phẩm tốt nhất cho người dùng
  • Tôi ước gì có một trình duyệt có thể mô phỏng chính xác trình duyệt trên thiết bị di động. Không chỉ thay đổi kích thước màn hình, vì ngay cả trình mô phỏng iOS của Apple cũng thất bại ở điểm này
  • Có vẻ nó mô phỏng được rất nhiều thứ, nhưng tôi tò mò không biết những gì nó mô phỏng chưa tốt là gì
    • Có vẻ nó được xây trên nền Chromium nên chắc sẽ không hiển thị được các lỗi chỉ xuất hiện trên Safari hoặc Mozilla
    • Có lẽ tài liệu có nói về điều này
    • Sửa: Có ở cuối phần FAQ. Tôi muốn biết ngoài engine trình duyệt thực tế ra thì còn hạn chế nào đã biết nữa không
  • Gần như mọi tính năng đều đã được tích hợp sẵn trong bộ công cụ phát triển của Firefox. Tôi tự hỏi vì sao lại cần một trình duyệt mới. Có vẻ làm dưới dạng tiện ích mở rộng cũng được
  • Tôi tò mò không biết nó cung cấp những tính năng nào hơn Browserstack (liên quan đến kiểm thử đa trình duyệt)
  • Tôi muốn biết liệu nó có tích hợp GenAI không (Copilot, Claude, v.v.)
    • Tôi muốn có thêm thứ gì đó giúp bán sản phẩm này với quản lý
  • Tôi ước mô hình giá có tùy chọn mua một lần. Trông rất tuyệt nhưng có lẽ khó biện minh cho chi phí hàng tháng/hàng năm
  • Thật sự rất hay! Tôi muốn biết có khả năng có ưu đãi cho sinh viên không. Trước mắt tôi sẽ thử bản dùng thử miễn phí