As developers, we like to use tools specifically made to make us as efficient as possible. We excessively research and get the perfect keyboard, our code editor or IDE is carefully picked and uses the perfect coding theme and coding font (Fira code, in my case). We have workflows to optimize our CSS and images and our build tools are optimized to do as much as possible as fast as possible.
作为开发人员，我们喜欢使用专门为提高效率而设计的工具。 我们进行了过多的研究并获得了完美的键盘，我们精心挑选了代码编辑器或IDE，并使用了完美的编码主题和编码字体(在我的情况下为Fira代码)。 我们拥有用于优化CSS和图像的工作流程，并且优化了构建工具以使其尽可能快地完成工作。
And then we use the same browser that everyone else uses to like cat videos on Facebook.
然后，我们使用与其他所有人喜欢的Facebook浏览器上的猫视频相同的浏览器。
Isn’t that weird? We pick our code editor specifically out of dozens available; our keyboard has the perfect clickiness for our fingers; yet we use the same browser as everyone else. Just like we’re not using Word to write code just because everyone uses Word to write things, we shouldn’t accept using a regular browser to build websites.
那不是很奇怪吗？ 我们从数十种可用的代码编辑器中专门挑选代码。 我们的键盘对手指具有完美的点击感； 但是我们使用的浏览器与其他所有人相同。 就像我们不是因为每个人都使用Word编写东西而使用Word编写代码一样，我们也不应该接受使用常规浏览器来构建网站。
This article is part of The Roadmap, where we look at the creation and promotion of products from the developer’s perspective. We’ll share top lessons from product leaders, and give technical founders a space to share their early-stage products with you. If you’re interested in being featured, let us know.
本文是The Roadmap的一部分，我们从开发人员的角度研究产品的创建和促销。 我们将分享产品负责人的最新经验，并为技术创始人提供与您分享其早期产品的空间。 如果您有兴趣被推荐，请告诉我们 。
常规浏览器 (Regular Browsers)
A typical workflow with a regular browser looks a little like this: Build the website on one size, then resize your browser and build the design for that. Then resize the browser again and build the design for that. Then … well, you get it. You’re doing it all one by one, repeating yourself over and over again. And if you’re unlucky, you get to do it all over a couple of times as you build, with new pages bringing new requirements that affect pages you’ve already finished.
具有常规浏览器的典型工作流程如下所示：以一种尺寸构建网站，然后调整浏览器尺寸并为此进行设计。 然后再次调整浏览器的大小并为此构建设计。 然后……好吧，你明白了。 您正在一步一步地完成自己，一次又一次地重复自己。 而且，如果您不走运，则可以在构建时完成几次，新页面带来了新要求，这些新要求会影响已经完成的页面。
And you may want to do more than just build the visual side of your page. Do you want to check your pages for accessibility as you go? Add a browser extension. Do you want to create a full page screenshot to send to your boss or client? Add a browser extension. Do you want to check that your meta tags are correct? You guessed it, add a browser extension. With just a few basic things you already need half a dozen browser extensions. Have you used a browser with half a dozen extensions? It makes IE11 look fast in comparison.
而且，您可能需要做的不仅仅是构建页面的视觉效果。 您要随身检查网页的可访问性吗？ 添加浏览器扩展。 您是否要创建完整的屏幕截图以发送给您的老板或客户？ 添加浏览器扩展。 您是否要检查元标记是否正确？ 您猜对了，添加一个浏览器扩展。 仅需几项基本操作，您就已经需要六个浏览器扩展。 您是否使用了具有六个扩展名的浏览器？ 与之相比，它使IE11看上去更快。
多窗格的工作原理不同 (Polypane Works Differently)
When you open Polypane, you don’t see just a website. You see your website at multiple screen sizes at the same time, just as if you had a bunch of devices on your desk. What’s better, though, is that all these screen sizes are synced: if you interact with one you interact with all of them, whether you’re scrolling, clicking, hovering or typing. You’re interacting with a single website; you just happen to see it at multiple sizes at the same time.
打开Polypane时 ，您不会仅看到一个网站。 您可以同时在多种屏幕尺寸下看到您的网站，就像桌上有很多设备一样。 更好的是，所有这些屏幕尺寸都是同步的：如果您与一个屏幕交互，那么您将与所有屏幕交互，无论您是滚动，单击，悬停还是键入。 您正在与一个网站进行交互； 您恰巧同时看到了多种尺寸。
Seeing all the screen sizes side by side means you no longer have to resize your browser and go through them one by one. And those screen sizes are yours to pick: you can pick from over 20 pre-configured devices, like phones, tablets and laptop sizes or you can resize them freeform however you like.
并排查看所有屏幕尺寸，这意味着您不再需要调整浏览器的大小并一一浏览。 这些屏幕尺寸可供您选择：您可以从20多种预配置的设备中进行选择，例如手机，平板电脑和笔记本电脑的尺寸，也可以随意调整其尺寸。
Or you can ask Polypane to parse through the CSS of the page, find all the CSS media queries and create screen sizes from those, making sure you’re always testing the site on all the sizes you want to support.
或者，您可以要求Polypane通过页面CSS进行解析，找到所有CSS媒体查询并根据这些查询创建屏幕尺寸，以确保您始终以所需的所有尺寸来测试网站。
This alone makes Polypane a massive productivity boost. But if you eliminate resizing your browser all the time, what else can we do?
仅此一项就使Polypane大大提高了生产率。 但是，如果您一直不调整浏览器的大小，那么我们还能做什么？
Well, what about reloading?
好吧，重装呢？
Polypane works with any hot reloading or live reloading system, just like any other modern browser out there. But Polypane also has a built-in live reloading server that requires zero configuration. Just tell it which folder to check and you’re done. It even works with plain HTML files! And best of all, if you update a CSS file or image, Polypane just refreshes that instead of reloading the full page.
就像所有其他现代浏览器一样，Polypane可以与任何热重装或实时重装系统一起使用。 但是Polypane还具有内置的实时重载服务器，该服务器需要零配置。 只需告诉它要检查哪个文件夹即可。 它甚至适用于纯HTML文件！ 最重要的是，如果您更新CSS文件或图像，Polypane只会刷新它而不是重新加载整个页面。
您的浏览器成为开发工具 (Your Browser Becomes the Dev Tool)
At this point you might ask: but what about developer tools? The developer tools that ship with regular browsers are amazing, and Polypane uses the same powerful developer tools as Google Chrome and Microsoft Edge (developer tool extensions included). But the developer tools in browsers are also an add-on as best. 99% of a browser’s target audience is non-developers, so we only really get this small box of developer tools as our territory.
此时，您可能会问： 但是开发人员工具呢？ 常规浏览器附带的开发人员工具令人惊叹，Polypane使用与Google Chrome和Microsoft Edge相同的强大开发人员工具(包括开发人员工具扩展)。 但是浏览器中的开发人员工具也是最好的附加工具。 浏览器的目标受众中有99％是非开发人员，因此，我们实际上只是把这小盒开发人员工具作为我们的版图。
But if we think of the entire browser as the developer tool, we can not only unlock much more new functionality, but we can also optimize it so each new function doesn’t slow down the rest of the browser like browser extensions do.
但是，如果我们将整个浏览器视为开发人员工具，我们不仅可以解锁更多的新功能，还可以对其进行优化，以使每个新功能都不会像浏览器扩展那样降低浏览器的其余部分的速度。
And that’s why Polypane has so many features built-in:
这就是为什么Polypane内置了这么多功能的原因：
- full page screenshots 整页截图
- device emulation 设备仿真
- live previews of what your page looks when shared on social media 在社交媒体上共享时页面外观的实时预览
- built-in accessibility testing 内置可访问性测试
- dark mode and reduced motion media query emulation 暗模式和简化运动媒体查询仿真
- live CSS editing in all screens 在所有屏幕上进行实时CSS编辑
- custom headers 自定义标题
- touch emulation 触摸仿真
- color blindness simulators 色盲模拟器
- a side browser so you can show your handoff tool, documentation or design right next to your site 侧面浏览器，以便您可以在站点旁边显示切换工具，文档或设计
- a CSS color contrast checker that suggests colors for you that you can then live-preview CSS颜色对比检查器，可为您建议颜色，然后进行实时预览
- image overlays for visual regression testing or pixel-perfect design 用于视觉回归测试或像素完美设计的图像叠加
先进的测试工具 (Advanced Testing Tools)
And we’re just getting started. What about an element inspector that lets you edit your page in all screens at the same time and makes it really easy to test out new styles and content? That’s what the Polypane Element inspector lets you do.
我们才刚刚开始。 元素检查器又如何使您可以同时在所有屏幕上编辑页面并真正方便地测试新样式和内容呢？ 这就是“多窗格元素”检查器允许您执行的操作。
No other browser lets you edit multiple screen sizes at the same time in such an intuitive and fast way. We also have panels that let you check your page’s outline (showing all the headers and their hierarchy), one that lets you edit all localStorage and cookie information, or one that lets you write CSS or Sass that then gets inserted into every screen for ultra-quick prototyping.
没有其他浏览器可以让您以这种直观，快速的方式同时编辑多个屏幕尺寸。 我们还提供了一些面板，可让您检查页面的轮廓(显示所有标题和它们的层次结构)，一个面板可让您编辑所有localStorage和cookie信息，或者一个面板可让您编写CSS或Sass，然后将其插入每个屏幕以进行超快速原型。
The overlays in Polypane let you quickly try out a wide variety of things on single screens, like emulating color blindness or other visual impairments, check your layout for issues or list all the z-indexes on a page.
使用Polypane中的叠加层，您可以在单个屏幕上快速尝试各种操作，例如模拟色盲或其他视觉障碍，检查布局是否有问题或在页面上列出所有z索引。
All of these tools help you with different parts of developing your web page, and in research we’ve done with Polypane users we’ve seen that developers are between three and ten times as productive when they use Polypane, depending on the task. Furthermore, because Polypane makes it so easy to check things like meta information and all browser sizes, the amount of post-launch bug fixes drops dramatically.
所有这些工具都可以帮助您开发网页的不同部分，并且在我们与Polypane用户进行的研究中，我们发现开发人员使用Polypane时的工作效率是任务的三到十倍。 此外，由于Polypane使得检查元信息和所有浏览器大小之类的操作变得如此容易，因此发布后的错误修复数量急剧下降。
In future articles, we’ll explore how to do a full website audit using Polypane, and how to build a responsive design from scratch using everything Polypane has to offer.
在以后的文章中，我们将探讨如何使用Polypane进行完整的网站审核，以及如何使用Polypane提供的所有内容从头开始构建响应式设计。
Polypane has a free trial that gets you started with 14 days to try it out.
Polypane有一个免费试用版 ，您可以从14天开始试用。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
