Polypane: A multi-screen browser specially designed for efficient web development

Core advantages:

• Multi-screen synchronization view: Polypane subverts tradition and uses multi-screen views to simultaneously show the website's effect under different screen sizes, significantly improving the efficiency of responsive design.
• Integrated development tools: Powerful development tools are built-in, including real-time reloading, CSS debugging, barrier-free testing, full-screen screenshots, device simulation, etc., simplifying the development process and improving productivity.
• Significantly improve efficiency: Research shows that developers using Polypane are 3 to 10 times more efficient, and significantly reduce the workload of bug fixes after going online.

As developers, we pursue efficient tools. We carefully selected the keyboard, code editor, and IDE, and even meticulously thoughtful about the code theme and fonts (I used Fira code). We optimize CSS and image processing flow and use efficient build tools.

However, we are browsing the web using the same browser as Volkswagen. Isn't this strange? We carefully selected from many code editors, and the keyboard's typing sense is also strived to be perfect, but we continue to use the same browser. Just as we don’t know how to write code in Word, we shouldn’t be content with using a normal browser for website development.

(This article is excerpted from the "Road Map" series of articles, which explore product creation and promotion from the perspective of developers. We will share the lessons learned by product leaders and provide technical founders with experience and lessons learned by product leaders. A platform to share early products. If you are interested in participating, please let us know. )

Limitations of traditional browsers:

The workflow of using a traditional browser is usually like this: first build the website at one size, then adjust the browser size, and then build the design for that size. Repeat this, it is inefficient. Worse, during development, new demands brought by new pages may affect completed pages, resulting in rework.

In addition, in addition to visual design, we also need to perform accessibility testing, generate full-screen screenshots, check meta tags, etc., which requires installing multiple browser extensions, which ultimately leads to slow browser running.

The uniqueness of Polypane:

Open Polypane, you see not a single website, but a synchronous view of the website under multiple screen sizes, as if multiple devices are placed on a desktop. More importantly, these screen sizes are synchronized: Scroll, tap, hover, or input actions are synchronized to all screens. You are operating the same website, just viewing it in multiple sizes at the same time.

Multiple screens are displayed side by side, without repeated adjustment of browser size. You can choose from over 20 preset devices (phones, tablets, and laptops) or you can adjust the size freely. You can even ask Polypane to parse page CSS, find all CSS media queries and create screen sizes from it, making sure you always test the website at all target sizes.

This itself greatly improves productivity. In addition to eliminating the browser resize repeatedly, Polypane has done more:

• Real-time reload: Polypane supports any hot or real-time reload system, and has a built-in zero configuration real-time reload server. Just specify the folder you want to check. It even supports pure HTML files! The best thing is that if you update a CSS file or image, Polypane refreshes only the content, rather than reloading the entire page.

Browser avatar development tool:

You may ask: What to do if you develop a tool? The development tools for traditional browsers are great, and Polypane also uses the same powerful development tools (including developer tool extensions) as Google Chrome and Microsoft Edge. But the developer tools in the browser are add-ons after all. 99% of the browser target users are non-developers, so we can only get this small developer tool area.

If we think of the entire browser as a development tool, we can not only unlock more new features, but also optimize it so that each new feature does not slow down the browser like a browser extension.

This is why Polypane has many built-in features:

• Full screenshot
• Equipment simulation
• Social Media Sharing Preview
• Built-in accessibility test
• Dark Mode and Reduced Motion Media Query Simulation
• Real-time CSS editing on all screens
• Custom header
• Touch Simulation
• Color blindness emulator
• Side browser that displays your delivery tools, documents or designs directly next to your website
• CSS color contrast checker, suggest colors and preview them in real time
• Image overlay for visual regression testing or pixel perfect design

Advanced Test Tool:

This is just the beginning. Is there an element inspector that allows you to edit pages on all screens at the same time and conveniently test new styles and content? The Polypane Element Inspector can do this.

No other browser can edit multiple screen sizes simultaneously in such an intuitive and fast way. We also have a panel that checks the outline of the page (shows all titles and their hierarchies), edits all localStorage and cookie information, or writes CSS or Sass code and inserts it into each screen for super fast prototyping .

Overlays in Polypane allow you to quickly try various actions on a single screen, such as simulating color blindness or other visual impairments, checking for layout problems, or listing all z-indexes on the page.

All of these tools can help you develop different parts of your web page, and according to our research on Polypane users, developers are getting 3 to 10 times more efficient, depending on the task. In addition, since Polypane makes it very easy to check meta information and all browser sizes, the workload of bug fixing after going online is also greatly reduced.

In future articles, we will explore how to use Polypane for a complete website review and how to build a responsive design from scratch using all of Polypane’s capabilities.

Polypane offers a 14-day free trial.

Polypane Developer Browser FAQ:

(The FAQ part is omitted below because it is too long and does not match the pseudo-original goal. You can selectively retain or reorganize part of the FAQ as needed, and perform pseudo-original operations such as synonyms replacement.)

The above is the detailed content of Meet Polypane, a Browser That Makes You Five Times Faster. For more information, please follow other related articles on the PHP Chinese website!