Polypane使您的網(wǎng)站開發(fā)速度提高五倍

時(shí)間：2024-04-15 01:30:01 | 來源：建站知識

時(shí)間：2024-04-15 01:30:01 來源：建站知識

作為網(wǎng)站開發(fā)人員，我們喜歡使用專門為提高效率而設(shè)計(jì)的工具。我們進(jìn)行了過多的研究并獲得了完美的工具，我們精心挑選了代碼編輯器或IDE，并使用了完美的編碼主題和編碼字體。我們擁有用于優(yōu)化CSS和圖像的工作流程，并且優(yōu)化了構(gòu)建工具，以使其盡可能快地完成工作。

我們會從數(shù)十種可用的代碼編輯器中專門挑選工具，但我們使用的瀏覽器與其他所有人相同。就像我們不會因?yàn)槊總€(gè)人都使用Word編寫東西而使用Word編寫代碼一樣，我們也不應(yīng)該接受使用常規(guī)瀏覽器來構(gòu)建網(wǎng)站。

常規(guī)瀏覽器 具有常規(guī)瀏覽器的典型工作流程如下所示：以一個(gè)大小構(gòu)建網(wǎng)站，然后調(diào)整瀏覽器大小并為此進(jìn)行設(shè)計(jì)。然后再次調(diào)整瀏覽器的大小并為此構(gòu)建設(shè)計(jì)。然后……好吧，你明白了。您正在一步一步地完成自己，一次又一次地重復(fù)自己。而且，如果您不走運(yùn)，則可以在構(gòu)建時(shí)完成幾次，新頁面帶來了新要求，這些新要求會影響已經(jīng)完成的頁面。

而且，您可能需要做的不僅僅是構(gòu)建頁面的視覺效果。您要隨時(shí)檢查網(wǎng)頁的可訪問性嗎？您是否要?jiǎng)?chuàng)建完整的屏幕截圖以發(fā)送給您的老板或客戶？您是否要檢查元標(biāo)記是否正確？那您就可以使用Polypane瀏覽器。

多窗格的工作原理不同 打開Polypane時(shí)，您不會僅看到一個(gè)網(wǎng)站。您可以同時(shí)在多種屏幕尺寸下看到您的網(wǎng)站，就像桌上有很多設(shè)備一樣。更好的是，所有這些屏幕尺寸都是同步的：如果您與一個(gè)屏幕交互，那么您將與所有這些屏幕交互，無論您是滾動(dòng)，單擊，懸停還是鍵入。您正在與一個(gè)網(wǎng)站進(jìn)行交互；您恰巧同時(shí)看到了多種尺寸。

并排查看所有屏幕尺寸，這意味著您不再需要調(diào)整瀏覽器的大小并一一瀏覽。這些屏幕尺寸可供您選擇：您可以從20多種預(yù)配置的設(shè)備中進(jìn)行選擇，例如手機(jī)，平板電腦和筆記本電腦的尺寸，也可以根據(jù)需要隨意調(diào)整其尺寸。

或者，您可以要求Polypane通過頁面的CSS進(jìn)行解析，找到所有CSS媒體查詢并根據(jù)這些查詢創(chuàng)建屏幕尺寸，以確保您始終以所需的所有尺寸測試網(wǎng)站。

僅此一項(xiàng)就使Polypane大大提高了生產(chǎn)率。但是，如果您一直不調(diào)整瀏覽器的大小，那么我們還能做什么？

好吧，重裝呢？

就像所有其他現(xiàn)代瀏覽器一樣，Polypane可以與任何熱重裝或?qū)崟r(shí)重裝系統(tǒng)一起使用。但是Polypane還具有內(nèi)置的實(shí)時(shí)重載服務(wù)器，該服務(wù)器需要零配置。只需告訴它要檢查哪個(gè)文件夾即可。它甚至適用于純HTML文件！最重要的是，如果您更新CSS文件或圖像，Polypane只會刷新它而不是重新加載整個(gè)頁面。

您的瀏覽器成為開發(fā)工具 此時(shí)，您可能會問：但是開發(fā)人員工具呢？常規(guī)瀏覽器附帶的開發(fā)人員工具非常棒，Polypane使用與Google Chrome和Microsoft Edge相同的強(qiáng)大開發(fā)人員工具（包括開發(fā)人員工具擴(kuò)展）。但是瀏覽器中的開發(fā)人員工具也是最好的附加工具。瀏覽器的目標(biāo)受眾中有99％是非開發(fā)人員，因此，我們實(shí)際上只是把這小盒開發(fā)人員工具作為我們的版圖。

但是，如果我們將整個(gè)瀏覽器視為開發(fā)人員工具，我們不僅可以解鎖更多的新功能，還可以對其進(jìn)行優(yōu)化，以使每個(gè)新功能都不會像瀏覽器擴(kuò)展那樣降低瀏覽器的其余部分的速度。

這就是為什么Polypane具有如此多的內(nèi)置功能：

• 整頁截圖
• 設(shè)備仿真
• 在社交媒體上共享時(shí)頁面外觀的實(shí)時(shí)預(yù)覽
• 內(nèi)置可訪問性測試
• 暗模式和簡化運(yùn)動(dòng)媒體查詢仿真
• 在所有屏幕上進(jìn)行實(shí)時(shí)CSS編輯
• 自定義標(biāo)題
• 觸摸仿真
• 色盲模擬器
• 側(cè)面瀏覽器，以便您可以在站點(diǎn)旁邊顯示切換工具，文檔或設(shè)計(jì)
• CSS顏色對比檢查器，可為您建議顏色，然后進(jìn)行實(shí)時(shí)預(yù)覽
• 用于視覺回歸測試或像素完美設(shè)計(jì)的圖像疊加

先進(jìn)的測試工具 我們才剛剛開始。元素檢查器又如何使您可以同時(shí)在所有屏幕上編輯頁面并真正方便地測試新樣式和內(nèi)容呢？這就是“多窗格元素”檢查器允許您執(zhí)行的操作。

沒有其他瀏覽器可以讓您以這種直觀，快速的方式同時(shí)編輯多個(gè)屏幕尺寸。我們還提供了一些面板，可讓您檢查頁面的輪廓（顯示所有標(biāo)題和它們的層次結(jié)構(gòu)），一個(gè)面板可讓您編輯所有l(wèi)ocalStorage和cookie信息，或者一個(gè)面板可讓您編寫CSS或Sass，然后將其插入每個(gè)屏幕以進(jìn)行超快速原型。

使用Polypane中的疊加層，您可以在單個(gè)屏幕上快速嘗試各種操作，例如模擬色盲或其他視覺障礙，檢查布局是否有問題或在頁面上列出所有z索引。

所有這些工具都可以幫助您開發(fā)網(wǎng)頁的不同部分，并且在我們與Polypane用戶進(jìn)行的研究中，我們發(fā)現(xiàn)開發(fā)人員使用Polypane時(shí)的工作效率是任務(wù)的三到十倍。此外，由于Polypane使得檢查元信息和所有瀏覽器大小之類的操作變得如此容易，因此發(fā)布后的錯(cuò)誤修復(fù)數(shù)量急劇下降。

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