Getting started with Blisk browser

Introduction

Blisk is the first developer-oriented browser with built-in devices that runs on your desktop and is available for Windows and macOS. It provides teams and freelancers with a workspace to develop and test modern web applications twice faster.

Blisk v.14

You can use Blisk as a regular browser to look for something across the web (Browsing mode) or you can use a workspace for web development (Developer Mode).

NOTE This documentation covers Developer Mode in detail. Browsing mode displays web content in a single Webview same as all other major browsers do. Learn more about Developer mode...

First steps

  1. Download the latest version of Blisk
  2. Create a Blisk account
  3. Log into your account in Blisk browser

Workflow

With Blisk, you can do a variety of tasks to get things done faster, whether you need to browse the web or build and test web applications. Use Browsing Mode to look for something across the web or start Developer Mode when you need to develop and test your website.

Browse the Web

Like other browsers, Blisk uses an address bar (Omnibox) to navigate across the web. Type a URL or search query into the address bar to view web content.

Browsing Mode

Developer Mode

Developer mode is an extended mode and includes the features you need for highly productive web development and testing. With enabled Developer mode, Blisk displays additional interface elements and controls: menus, notifications, device panes, devices, dialog overlays, etc. To learn more about Development Interface, see the Developer mode GUI section below.

Enable Developer Mode
Enable Developer Mode (Blisk v.14 and later)
Developer Mode
Developer Mode (Blisk v.14 and later)

Developer mode includes:

  • More than 50 devices. Use different types of devices: mobiles, tablets, laptops, and desktops. You can use one device or multiple devices simultaneously. In addition, you can mix devices with a Chrome-like view - a regular responsive desktop view.
  • Error monitor. Blisk continuously monitors for page errors in JavaScript and resources that failed to load. The user is notified when the issue appears on any device. and searches for the solution on StackOverflow.
  • Screen Capture. Use different types of captures: screenshots or video recording. Take a screenshot of a single device or capture an entire device set. Annotate the screenshot with Image Editor.
  • Page Auto-refresh Page Auto-refresh keeps the code updated to the latest version across devices. Web contents refresh automatically when you modify source code and save changes. CSS is updated even without page refresh. You decide which file types trigger Auto-refresh. Use Auto-refresh delay for complex projects with bundling or preprocessing.
  • Other tools and features

Enable Developer Mode

To enable Developer mode, click the Developer Mode button to the left of Omnibox. This will open the last used device set. In case you click this button for the first time: Blisk starts Device Manager.

Enable Developer Mode

To use Developer Mode on any website:
Click Menu ➜ Settings ➜ Developer Mode and select Apply Developer Mode to All Domains in the dropdown.

Disable Developer Mode

To disable Developer mode, click the Developer Mode button to the left of Omnibox. You can also use Menu ➜ Device Set ➜ Exit Developer Mode.

Exit Developer Mode

Development Domain

In some cases, you may need to automatically start a specific domain in Developer Mode. For these purposes, use the Development Domain button. When you click on this button, you will notice a checkmark appear and disappear. Thus, with a visible checkmark, Blisk indicates that Developer Mode starts with the current domain automatically.

Development Domain

User Interface

Blisk is built on top of Chromium (also used by Chrome browser) and features a minimalistic material user interface.

Layout basics

Like many other browsers, Blisk uses a common user interface (tabs, address bar, toolbars, notifications) on the top to navigate and manipulate tabs, and Webview on the bottom, showing web content of opened URLs.

With enabled Developer Mode, Blisk displays additional interface elements and controls: menus, notifications, device panes, devices, dialog overlays, etc. To learn more about Developer Mode, see the Developer Mode section.

Blisk v.14

Use the Menu to manipulate your Device Set, to control the layout and the size of devices, to enable and disable features (e.g. Auto-refresh, URL Sync, Scroll Sync, Device Cache, etc).

Menu in Developer Mode

The menu contains items:

  1. Device Set: use the menu item to control the current device set. Learn more...
  2. View: use the menu item to control the look and feel of the user interface in Developer Mode. Learn more...
  3. Capture: use the menu item to use captures (take screenshots or record a video), and view your saved assets in cloud storage. Learn more...
  4. Auto-refresh: use the menu item to enable or disable Auto-refresh, update the settings of existing file watchers. Learn more...
  5. Tools: use the menu item to use extra built-in tools (Image editor, Scroll sync, URL Sync, Cache control). Learn more...
  6. Account: use the menu item to access your Blisk account, change your password, use Premium license, etc. Learn more...

Device Manager

Device manager controls the list of devices in a Device Set and their size. Device Manager has a simple user interface: tabs with device categories and groups on the top, the list of devices on the left to select a device, and a list with selected devices on the right.

Device Manager

To launch Device Manager:

  • From Home Page: click New device set... from the Start section.
  • From Developer Mode:
    • Solution 1: Menu ➜ Device Set ➜ New Set...
    • Solution 2: Click the Device Manager button on the top right.

With Device Manager, you can:

  • Create or edit your Device Set by selecting devices.
  • Reorder the devices in Device Set with drag and drop.
  • Start the devices in real size.
  • Use Device Templates - the predefined lists of devices (e.g. iOS Mobile).
  • View and launch recently used Device Sets.

Device Set & Device Pane

Device Set can contain one or more devices that are wrapped into Device Panes. The maximum number of devices is limited to eight units per Device Set to avoid high CPU load. Device Pane displays device information, device actions, errors and warnings, and device state.

Device Pane contains areas:

Device Pane

  1. Device Information - The area with device name and device properties (e.g. operating system, viewport size, PPI).
  2. Device Actions - Contains buttons to take a screenshot, launch Developer Tools, rotate the device, and remove the device from Device Set.
  3. Errors and Warnings - Displays the Errors and Warnings that appear on a webpage inside a device. Click this area to open the window Errors and Warnings and view the list of errors.
  4. Device State - The area contains dropdowns that control device size and network speed:
    • Device Size: You can switch between Scaled Size and Real Size.
    • Network Speed: You can simulate different networks ( Online, Fast 3G, Slow 3G, Very Slow).

Create Device Set:

Use Device Manager to create Device Set:

  1. Home Page ➜ click New device set from the Start section.
  2. Blisk starts Device Manager.
  3. Select the devices from the list and click Launch devices.
  4. Blisk creates Device Set with previously selected devices.

Edit Device Set:

To edit Device Set with enabled Developer Mode, click the button Device Manager on the top right. Update the list of devices in Device Manager and click Launch devices. Blisk will start the new Device Set.

Splitter

The Splitter appears inside Multi-device Set (a set with two and more devices), splits Device Panes, and allows to control the layout of Device Set. Use the splitter to resize the devices.

Splitter

Use Menu ➜ View ➜ Reset Splitter Position reset the position of all Splitters in Device Set and restore the size of Device Panes to defaults (equal size).

NOTE The splitter may cut the devices on small screens. To avoid device cutting, try resetting splitter position or change device size setting from Real Size to Scaled. See Device Size section for more details.

Themes

Color Themes let you modify the colors in Blisk's user interface to suit your preferences and work environment. By default, Blisk inherits the theme of your operating system (light or dark). Tip: After setting your OS to change the theme automatically to dark mode, Blisk will display in Dark theme at night time reducing the chance of eye injury.

To change the Color Theme:

  1. Open Home Page or use the keyboard shortcut Ctrl+T / ⌘+T.
  2. Click Theme from Customize section
  3. In Settings window, select an option from Theme section.

Splitter

NOTE Click Menu ➜ Settings ➜ Theme to change the theme directly from Developer mode.

Devices in Blisk

Device is one of the core components in Blisk. They are built into the application and ready to use from the very beginning, so you do not need to download or install anything else. Devices display in Developer Mode only, enable Developer Mode to use them (see the Developer mode section).

You can use a single device or multiple devices simultaneously. To learn more about using multiple devices simultaneously, see the Multi-device Set section below.

Blisk offers devices of different operating systems, types, and viewports. See Device Manager section to use the devices and create device sets. Devices in Blisk use proper screen resolution, device pixel ratio, user-agent header, and support touch + touch events. What you should know:

  • Screen resolution is the number of pixels a screen can show, both horizontally and vertically. So, a screen that has a resolution of 1920 x 1080 (a popular resolution that's also known as 1080p or Full HD), can display 1,080 pixels vertically, and 1,920 pixels horizontally. Blisk supports devices with different screen resolution: from small 320px to large 2560px screens.
  • Device pixel ratio is the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. Blisk supports devices with usual or retina high-resolution display
  • User-Agent request header is a string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.
  • Touch support. Mobile devices (phones and tablets) support native touch events: tap, double-tap, swipe etc.

Supported devices:

Device Type Device OS Vendor
Mobile iOS, Android Apple, Google, Samsung, OnePlus, LG
Tablet iPadOS Apple
Laptop/Desktop Windows, macOS Apple, Dell
Chrome-like View User's OS User's device

Using devices in Blisk:

Launch Device Manager to use one device or multiple simultaneously.

Multi-device Set

In Blisk, you can create a device set with multiple devices and use them simultaneously. You can mix devices of different types and operating systems to develop and test for mobile, tablet, and desktop simultaneously. With this approach, development tasks can be done twice faster than before.

Multi-device Set

When you use multiple devices simultaneously, they use a single shared Cache, Cookies, Local and Session storage, Database, etc. Thus, when you browse any website (Internet or Local Server), devices log into websites automatically and use the same website settings (e.g. Cookies and Local Storage). Use Menu ➜ Tools ➜ Enable Device Cache to control Caching.

The most common case is using mobile along with Chrome-like view. Follow the steps:

  • Go to Home Page ➜ click New device set. This will launch the Device Manager.
  • Select any mobile device (e.g. iPhone X) and check Add Chrome-like desktop view.
  • Click the button Launch devices. As a result, Blisk will create a device set with iPhone X and Chrome-like view.
NOTE You can use the Template - a predefined Device set. To use a Template: start Device Manager ➜ click Templates ➜ select any Template from the list.

URL Synchronization

By default, Blisk uses URL synchronization (URL Sync) for Device set with multiple devices. Devices from the device set navigate to the current URL in the Address Bar (Omnibox). When you click any link or perform navigation on one device, URL Sync navigates the other devices to the same URL. As a result, devices follow each other by URL. This approach works with regular websites and single-page applications.

URL Sync management. URL Sync works per tab: its state can be changed manually on each tab. To enable or disable URL Sync, use Menu ➜ Tools ➜ Enable URL Sync.

Redirects. In case your web application has some custom redirect specified, the device navigates with a redirect. Blisk monitors for cases with too many redirects. When devices start redirecting each other multiple times and create an infinite loop of redirects, Blisk stops redirects, disables URL Sync, and displays a dialog window with a warning. You can enable URL Sync directly from this dialog window.

Scroll Synchronization

By default, Blisk uses Scroll synchronization (Scroll Sync) for Device set with multiple devices. When you scroll one device, the other devices follow the current device by scroll position automatically. As a result, devices follow each other by scroll position.

NOTE Scroll Sync does work when you scroll the BODY or HTML element. This feature does not work with other scrollable elements (e.g. scrollable DIV).

Scroll Sync management. The state of Scroll Sync applies to the whole window. It means that if you disable Scroll Sync on tab #1, Scroll Sync will be disabled on tab #2, #3, etc. To enable or disable Scroll Sync, use Menu ➜ Tools ➜ Enable Scroll Sync.

View

View Menu

Use Menu ➜ View to control the look and feel of Blisk while working in Developer Mode. This menu item has the following options:

  • Smart Scaling is a global setting that displays phones across all tabs in relative size to each other (the largest phone has max height). The feature works best with up to 4 phones in Device Set.
  • Full Screen is a global setting that launches the current Window in full-screen mode.
  • Reset Splitter Position is a setting that resets all splitters in the current Device Set to their default position, making all device panes equal size.
  • Show Errors and Warnings is a global setting that shows or hides Page Errors and Warnings Counter inside each Device Pane.

Capture

Capture Menu

Use Menu ➜ Capture to use capturing features, like taking screenshots and recording videos, and to access your saved assets. This menu item has the following options:

  • Take Screenshot of Device Set - use this feature to take a screenshot of the entire device set. After taking a screenshot, Blisk starts Image Editor, where you can annotate the screenshot and save it locally or to the cloud storage.
  • Record Video - use this feature to record a video of the entire screen or custom window. After recording a video, Blisk uploads the video to the cloud storage automatically.
  • Saved Screenshots and Videos - click this menu item to open cloud storage and view saved assets in the cloud. You can share the assets from the cloud with your teammates, download them and attach them to bug reports, etc.
NOTE By default, Blisk starts Image Editor after taking a screenshot. In case you want Blisk to automatically upload screenshots to the cloud storage after taking them, use Menu ➜ Capture ➜ Capture Settings and change the setting.

Page Auto-refresh

Page Auto-refresh keeps the code updated to the latest version across devices. Web contents refresh automatically when you modify source code and save changes. CSS is updated even without page refresh.

Basics of Page Auto-refresh

Page Auto-refresh works with domains, not specific URLs. If you set up auto-refreshing for http://localhost, Blisk will refresh all URLs from this domain automatically (e.g. http://localhost/some-page).

Page Auto-refresh works with different file formats. You can specify any file format to trigger Page Auto-refreshing when these files change, for example:

  • Regular web files: HTML, CSS, JS.
  • Platform-specific: CSHTML, JAVA, PHP, PY.
  • Font files: OTF, TTF, WOFF.
  • Raster and vector images: JPG, PNG, SVG.

Page Auto-refresh works with folders. You need to specify at least one folder that will be watched for changes. When any specified file format changes in this folder, the webpage in devices refreshes automatically.

NOTE Watching a folder with many subfolders and files may affect high CPU load. To avoid high CPU load, specify the folder of the lowest system hierarchy level (e.g. watching drive C: is not the best practice).

Setting up Page Auto-refresh

Follow the steps to set up Page Auto-refresh for your local environment:

Auto-refresh Menu

  1. Navigate to the domain you want to refresh automatically and enable Developer Mode.
  2. Click Menu ➜ Auto-refresh. Blisk shows the Window with Auto-refresh setup.
  3. Specify the Auto-refresh settings:
    1. Textbox with domain name that will be refreshed automatically. The current domain from Address Bar (Omnibox) will be preselected. You can specify another domain name. Note: best practice is to copy the URL from the Address bar.
    2. Textbox with file formats. The specified file formats will trigger the webpage to refresh automatically. File formats should split by comma.
    3. The button Select Folder. Click this button, browse across your local file system, and select the needed folder. Blisk will watch for the changes in files within this folder.
  4. Click OK. Blisk saves Page Auto-refresh settings and enables created Auto-refresh.
  5. As a result, Blisk shows checkbox in Menu ➜ Auto-refresh, meaning that Page Auto-refresh is enabled for the current domain.
TROUBLESHOOTING In case the checkbox is missing in Menu ➜ Auto-refresh: check the URL. You may have specified the incorrect URL in Auto-refresh settings or you navigated to the incorrect URL.

Edit created Page Auto-refresh

Follow the steps to edit Page Auto-refresh settings:

  1. Navigate to the domain that has Page Auto-refresh specified.
  2. Click Menu ➜ Auto-refresh. Blisk shows the Window with Auto-refresh setup.
  3. Modify the Auto-refresh settings
  4. Click OK. Blisk saves changes in Page Auto-refresh settings.
TIP To view CSS and JavaScript changes, you may need to disable Cache: click Menu ➜ Tools ➜ Enable Device Cache.
NOTE To view and modify the list of domains with previously setup Page Auto-refresh, click Menu ➜ Settings ➜ Auto-refresh.
NOTE You may need to use Advanced Settings of Page Auto-refresh in case you work on complex projects with bundling or preprocessing. You can enable/disable CSS Live Reload and specify custom Auto-refresh Delay.

Tools

Tools Menu

Use Menu ➜ Tools to use extra features, like Image Editor, to manage URL Sync, Scroll Sync, and Device Cache. This menu item has the following options:

  • Image Editor - use this feature to annotate screenshots and images (you can draw text and shapes on top of the picture). By default, Blisk starts Image Editor after taking a screenshot. If you want to skip Image Editing - click Menu ➜ Capture ➜ Capture Settings and change the setting.
    You can start Image Editor from Menu ➜ Tools ➜ Image Editor independently, select an image from your local folder, and use this tool to annotate an image.
  • Enable URL Sync - use this feature to enable and disable URL Sync. To learn more about URL Sync, see the URL Sync section.
  • Enable Scroll Sync - use this feature to enable and disable Scroll Sync. To learn more about Scroll Sync, see the Scroll Sync section.
  • Enable Device Cache - click this menu item to enable or disable the Caching of resources (e.g. CSS, JavaScript, images, etc) in devices.

Settings

Use Menu ➜ Settings to control Blisk features, to customize the look and feel of Blisk application. Within Settings, you may control Developer Mode, Home Page, Theme, Auto-refresh, Device Sync, and Captures.

Settings Menu

Blisk Logo
You are about to download Blisk for:
Download DMG
version 14.0.71.69 for macOS 10.9 and later
Download EXE
version 14.0.71.69 for Windows 10/8.1/8/7
Blisk is not available for Linux, you can subscribe for Linux release:

By downloading Blisk, you accept the License Agreement and our Privacy policy