Polypane：專為高效Web開(kāi)發(fā)打造的多屏瀏覽器

核心優(yōu)勢(shì)：

• 多屏同步視圖： Polypane 顛覆傳統(tǒng)，以多屏視圖同時(shí)展現(xiàn)網(wǎng)站在不同屏幕尺寸下的效果，顯著提升響應(yīng)式設(shè)計(jì)效率。
• 集成開(kāi)發(fā)工具： 內(nèi)置強(qiáng)大的開(kāi)發(fā)工具，包括實(shí)時(shí)重載、CSS 調(diào)試、無(wú)障礙測(cè)試、全屏截圖、設(shè)備模擬等，簡(jiǎn)化開(kāi)發(fā)流程，提高生產(chǎn)力。
• 顯著提升效率： 研究表明，使用 Polypane 的開(kāi)發(fā)者效率提升 3 到 10 倍，并大幅減少上線后 bug 修復(fù)工作量。

作為開(kāi)發(fā)者，我們追求高效工具。我們精心挑選鍵盤、代碼編輯器和 IDE，甚至細(xì)致到代碼主題和字體（我用的是 Fira code）。我們優(yōu)化 CSS 和圖片處理流程，并使用高效的構(gòu)建工具。

然而，我們卻使用著與大眾相同的瀏覽器瀏覽網(wǎng)頁(yè)。這難道不奇怪嗎？我們從眾多代碼編輯器中精挑細(xì)選，鍵盤的敲擊感也力求完美，卻沿用著千篇一律的瀏覽器。正如我們不會(huì)用 Word 寫(xiě)代碼一樣，我們也不應(yīng)該滿足于用普通瀏覽器進(jìn)行網(wǎng)站開(kāi)發(fā)。

(本文節(jié)選自《路線圖》系列文章，該系列文章從開(kāi)發(fā)者的角度探討產(chǎn)品創(chuàng)建和推廣。我們將分享產(chǎn)品領(lǐng)導(dǎo)者的經(jīng)驗(yàn)教訓(xùn)，并為技術(shù)創(chuàng)始人提供一個(gè)分享早期產(chǎn)品的平臺(tái)。如果您有興趣參與，請(qǐng)告知我們。)

傳統(tǒng)瀏覽器的局限性：

使用傳統(tǒng)瀏覽器的工作流程通常是這樣的：先在一個(gè)尺寸下構(gòu)建網(wǎng)站，然后調(diào)整瀏覽器大小，再為該尺寸構(gòu)建設(shè)計(jì)。如此反復(fù)，效率低下。更糟糕的是，在開(kāi)發(fā)過(guò)程中，新頁(yè)面帶來(lái)的新需求可能會(huì)影響已完成的頁(yè)面，導(dǎo)致返工。

此外，除了視覺(jué)設(shè)計(jì)，我們還需要進(jìn)行無(wú)障礙性測(cè)試、生成全屏截圖、檢查元標(biāo)簽等操作，這需要安裝多個(gè)瀏覽器擴(kuò)展程序，最終導(dǎo)致瀏覽器運(yùn)行緩慢。

Polypane 的獨(dú)特之處：

打開(kāi) Polypane，你看到的不是單個(gè)網(wǎng)站，而是網(wǎng)站在多個(gè)屏幕尺寸下的同步視圖，如同將多臺(tái)設(shè)備擺放在桌面上。更重要的是，這些屏幕尺寸是同步的：滾動(dòng)、點(diǎn)擊、懸停或輸入操作都會(huì)同步到所有屏幕。你操作的是同一個(gè)網(wǎng)站，只是同時(shí)在多個(gè)尺寸下查看。

多屏并列顯示，無(wú)需反復(fù)調(diào)整瀏覽器大小。你可以從 20 多個(gè)預(yù)設(shè)設(shè)備（手機(jī)、平板電腦和筆記本電腦）中選擇，也可以自由調(diào)整尺寸。你甚至可以要求 Polypane 解析頁(yè)面 CSS，查找所有 CSS 媒體查詢并從中創(chuàng)建屏幕尺寸，確保你始終在所有目標(biāo)尺寸下測(cè)試網(wǎng)站。

這本身就極大地提高了生產(chǎn)力。除了省去反復(fù)調(diào)整瀏覽器大小，Polypane 還做了更多：

• 實(shí)時(shí)重載： Polypane 支持任何熱重載或?qū)崟r(shí)重載系統(tǒng)，并內(nèi)置零配置實(shí)時(shí)重載服務(wù)器。只需指定要檢查的文件夾即可。它甚至支持純 HTML 文件！最佳之處在于，如果更新 CSS 文件或圖像，Polypane 只刷新這些內(nèi)容，而不是重新加載整個(gè)頁(yè)面。

瀏覽器化身開(kāi)發(fā)工具：

你可能會(huì)問(wèn)：開(kāi)發(fā)工具怎么辦？傳統(tǒng)瀏覽器的開(kāi)發(fā)工具很棒，Polypane 也使用與 Google Chrome 和 Microsoft Edge 相同的強(qiáng)大開(kāi)發(fā)工具（包括開(kāi)發(fā)者工具擴(kuò)展）。但瀏覽器中的開(kāi)發(fā)者工具終究是附加組件。99% 的瀏覽器目標(biāo)用戶是非開(kāi)發(fā)者，因此我們只能獲得這個(gè)小小的開(kāi)發(fā)者工具區(qū)域。

如果我們將整個(gè)瀏覽器視為開(kāi)發(fā)工具，我們不僅可以解鎖更多新功能，還可以優(yōu)化它，使每個(gè)新功能都不會(huì)像瀏覽器擴(kuò)展程序那樣減慢瀏覽器的速度。

這就是 Polypane 內(nèi)置眾多功能的原因：

• 全屏截圖
• 設(shè)備模擬
• 社交媒體分享預(yù)覽
• 內(nèi)置無(wú)障礙測(cè)試
• 深色模式和減少運(yùn)動(dòng)媒體查詢模擬
• 所有屏幕上的實(shí)時(shí) CSS 編輯
• 自定義標(biāo)頭
• 觸摸模擬
• 色盲模擬器
• 側(cè)邊瀏覽器，可將你的交付工具、文檔或設(shè)計(jì)直接顯示在你的網(wǎng)站旁邊
• CSS 顏色對(duì)比度檢查器，可建議顏色并進(jìn)行實(shí)時(shí)預(yù)覽
• 用于視覺(jué)回歸測(cè)試或像素完美設(shè)計(jì)的圖像疊加層

高級(jí)測(cè)試工具：

這僅僅是開(kāi)始。有沒(méi)有一個(gè)元素檢查器可以讓你同時(shí)在所有屏幕上編輯頁(yè)面，并方便地測(cè)試新的樣式和內(nèi)容？Polypane 元素檢查器可以做到這一點(diǎn)。

沒(méi)有其他瀏覽器能夠以如此直觀和快速的方式同時(shí)編輯多個(gè)屏幕尺寸。我們還有面板可以檢查頁(yè)面的輪廓（顯示所有標(biāo)題及其層次結(jié)構(gòu)）、編輯所有 localStorage 和 cookie 信息，或者編寫(xiě) CSS 或 Sass 代碼，然后將其插入到每個(gè)屏幕中，以便進(jìn)行超快速的原型設(shè)計(jì)。

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

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

在未來(lái)的文章中，我們將探討如何使用 Polypane 進(jìn)行完整的網(wǎng)站審核，以及如何利用 Polypane 的所有功能從頭開(kāi)始構(gòu)建響應(yīng)式設(shè)計(jì)。

Polypane 提供 14 天免費(fèi)試用。

Polypane 開(kāi)發(fā)者瀏覽器常見(jiàn)問(wèn)題解答 (FAQ)：

(以下略去FAQ部分，因?yàn)槠^(guò)長(zhǎng)，且與偽原創(chuàng)目標(biāo)不符?？梢愿鶕?jù)需要選擇性保留或重新組織部分FAQ，并進(jìn)行同義詞替換等偽原創(chuàng)操作。)

以上是認(rèn)識(shí)Polypane，這是一個(gè)使您更快五次的瀏覽器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！