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

核心優(yōu)勢：

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

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

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

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

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

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

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

Polypane 的獨(dú)特之處：

打開 Polypane，你看到的不是單個網(wǎng)站，而是網(wǎng)站在多個屏幕尺寸下的同步視圖，如同將多臺設(shè)備擺放在桌面上。更重要的是，這些屏幕尺寸是同步的：滾動、點(diǎn)擊、懸?；蜉斎氩僮鞫紩降剿衅聊?。你操作的是同一個網(wǎng)站，只是同時在多個尺寸下查看。

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

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

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

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

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

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

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

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

高級測試工具：

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

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

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

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

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

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

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

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

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