認識Polypane，這是一個使您更快五次的瀏覽器

Polypane：專為高效Web開發打造的多屏瀏覽器

核心優勢：

• 多屏同步視圖： Polypane 顛覆傳統，以多屏視圖同時展現網站在不同屏幕尺寸下的效果，顯著提升響應式設計效率。
• 集成開發工具： 內置強大的開發工具，包括實時重載、CSS 調試、無障礙測試、全屏截圖、設備模擬等，簡化開發流程，提高生產力。
• 顯著提升效率： 研究表明，使用 Polypane 的開發者效率提升 3 到 10 倍，並大幅減少上線後 bug 修復工作量。

作為開發者，我們追求高效工具。我們精心挑選鍵盤、代碼編輯器和 IDE，甚至細緻到代碼主題和字體（我用的是 Fira code）。我們優化 CSS 和圖片處理流程，並使用高效的構建工具。

然而，我們卻使用著與大眾相同的瀏覽器瀏覽網頁。這難道不奇怪嗎？我們從眾多代碼編輯器中精挑細選，鍵盤的敲擊感也力求完美，卻沿用著千篇一律的瀏覽器。正如我們不會用 Word 寫代碼一樣，我們也不應該滿足於用普通瀏覽器進行網站開發。

---

(本文節選自《路線圖》系列文章，該系列文章從開發者的角度探討產品創建和推廣。我們將分享產品領導者的經驗教訓，並為技術創始人提供一個分享早期產品的平台。如果您有興趣參與，請告知我們。)

---

傳統瀏覽器的局限性：

使用傳統瀏覽器的工作流程通常是這樣的：先在一個尺寸下構建網站，然後調整瀏覽器大小，再為該尺寸構建設計。如此反复，效率低下。更糟糕的是，在開發過程中，新頁面帶來的新需求可能會影響已完成的頁面，導致返工。

此外，除了視覺設計，我們還需要進行無障礙性測試、生成全屏截圖、檢查元標籤等操作，這需要安裝多個瀏覽器擴展程序，最終導致瀏覽器運行緩慢。

Polypane 的獨特之處：

打開 Polypane，你看到的不是單個網站，而是網站在多個屏幕尺寸下的同步視圖，如同將多台設備擺放在桌面上。更重要的是，這些屏幕尺寸是同步的：滾動、點擊、懸停或輸入操作都會同步到所有屏幕。你操作的是同一個網站，只是同時在多個尺寸下查看。

多屏並列顯示，無需反複調整瀏覽器大小。你可以從 20 多個預設設備（手機、平板電腦和筆記本電腦）中選擇，也可以自由調整尺寸。你甚至可以要求 Polypane 解析頁面 CSS，查找所有 CSS 媒體查詢並從中創建屏幕尺寸，確保你始終在所有目標尺寸下測試網站。

這本身就極大地提高了生產力。除了省去反複調整瀏覽器大小，Polypane 還做了更多：

• 實時重載： Polypane 支持任何熱重載或實時重載系統，並內置零配置實時重載服務器。只需指定要檢查的文件夾即可。它甚至支持純 HTML 文件！最佳之處在於，如果更新 CSS 文件或圖像，Polypane 只刷新這些內容，而不是重新加載整個頁面。

瀏覽器化身開發工具：

你可能會問：開發工具怎麼辦？傳統瀏覽器的開發工具很棒，Polypane 也使用與 Google Chrome 和 Microsoft Edge 相同的強大開發工具（包括開發者工具擴展）。但瀏覽器中的開發者工具終究是附加組件。 99% 的瀏覽器目標用戶是非開發者，因此我們只能獲得這個小小的開發者工具區域。

如果我們將整個瀏覽器視為開發工具，我們不僅可以解鎖更多新功能，還可以優化它，使每個新功能都不會像瀏覽器擴展程序那樣減慢瀏覽器的速度。

這就是 Polypane 內置眾多功能的原因：

• 全屏截圖
• 設備模擬
• 社交媒體分享預覽
• 內置無障礙測試
• 深色模式和減少運動媒體查詢模擬
• 所有屏幕上的實時 CSS 編輯
• 自定義標頭
• 觸摸模擬
• 色盲模擬器
• 側邊瀏覽器，可將你的交付工具、文檔或設計直接顯示在你的網站旁邊
• CSS 顏色對比度檢查器，可建議顏色並進行實時預覽
• 用於視覺回歸測試或像素完美設計的圖像疊加層

高級測試工具：

這僅僅是開始。有沒有一個元素檢查器可以讓你同時在所有屏幕上編輯頁面，並方便地測試新的樣式和內容？ Polypane 元素檢查器可以做到這一點。

沒有其他瀏覽器能夠以如此直觀和快速的方式同時編輯多個屏幕尺寸。我們還有面板可以檢查頁面的輪廓（顯示所有標題及其層次結構）、編輯所有localStorage 和cookie 信息，或者編寫CSS 或Sass 代碼，然後將其插入到每個屏幕中，以便進行超快速的原型設計。

Polypane 中的疊加層允許你快速在單個屏幕上嘗試各種操作，例如模擬色盲或其他視覺障礙、檢查佈局問題或列出頁面上的所有 z-index。

所有這些工具都能幫助你開發網頁的不同部分，根據我們對 Polypane 用戶的研究，開發者的效率提升了 3 到 10 倍，具體取決於任務。此外，由於 Polypane 使檢查元信息和所有瀏覽器尺寸變得非常容易，因此上線後 bug 修復的工作量也大幅減少。

在未來的文章中，我們將探討如何使用 Polypane 進行完整的網站審核，以及如何利用 Polypane 的所有功能從頭開始構建響應式設計。

Polypane 提供 14 天免費試用。

Polypane 開發者瀏覽器常見問題解答 (FAQ)：

(以下略去FAQ部分，因為篇幅過長，且與偽原創目標不符。可以根據需要選擇性保留或重新組織部分FAQ，並進行同義詞替換等偽原創操作。)

以上是認識Polypane，這是一個使您更快五次的瀏覽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！