Switching to Polypane

Switching to a new browser for development takes effort. You're used to the way your current browser works and you use it for your regular browsing too. With the following tips and tools, switching to using Polypane becomes a little easier.

Configure Polypane to look like other browsers

You can make Polypane work similar to regular browsers by switching to the "Full" layout, and opening the Chromium devtools. This will give you a full browser with the devtools you're used to.

From here, you can start to explore other parts of the application, like the panel and debug tools.

Browser extensions

The Polypane browser extensions for Google Chrome, Microsoft Edge, Apple Safari, Mozilla Firefox and Opera let you quickly open any tab or url in Polypane. The Google Chrome extension also works for other browsers that support the Chrome store, like Brave and Vivaldi.

The browser extension adds a Polypane icon to your browser header. With it you can:

• Click the Polypane icon to open the current page in Polypane.
• Press alt + r to open the current page in Polypane.
• Right-click any link and clik "Open in Polypane".

Polypane will auto-start if not open yet. Get the extensions from the Download page.

Browsersync

If you use Browsersync, you might have configured it to open your browser using the browser options. You can replace your current browser with "polypane", or add it to the list. To configure Browsersync to work nicely with Polypane, read the instructions at other tools.

Create-react-app

You can prefix your start script with BROWSER=polypane to open your app in Polypane directly instead of in your default browser.

"scripts": {
    "start": "BROWSER=polypane react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Browser managers

For both Mac and Windows there are browser managers available. These will lets you send the URLs you open to any browser they support, either manually or by defining rules. You can configure this to always open localhost in Polypane, for example. The following browser managers have excellent support for Polypane:

Finicky (MacOS)

With Finicky you can set which URLs are opened in which browser, ideal if you always want to open for example localhost in Polypane, while keeping your regular browsing in your default browser.

Follow the installation instructions for Finicky, then add the following handler to your .finicky.js file to open all localhost URLS in Polypane.

module.exports = {
  defaultBrowser: 'Google Chrome',
  // Or "Safari", "Firefox" etc.
  handlers: [
    {
      match: /^https?:\/\/localhost.*$/,
      browser: 'Polypane',
    },
  ],
};

Choosy (MacOS)

Choosy can either prompt you when you open a new URL, or you can configure rules to open specific URLs in specific browsers, and comes with a UI to configure different rules.

Browserosaurus (MacOS)

Browserosaurus is an open source application developed by Will Stone. Use the settings to favorite Polypane and open it with "space", or add a single letter (like "P") to use to open links in Polypane.

Account surfer (Windows)

Account surfer is available via the Microsoft Store and is developed by Marat Dospolov. Hotkeys are dependent on the position.

Bowser and Bowser Gnome extension (Linux)

Bowser is an open source application and available as a Gnome extension or a stand-alone python application. Add a rule for "localhost" and set it to open Polypane.

Full overview and setup instructions

For a full overview of browser managers including setup instructions, check out our tutorial: Always open localhost in your development browser.