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.

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).

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.

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 (Blisk v.14 and later)

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.

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.

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.

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.

Menu

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).

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.

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:

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.

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).

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.

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:

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.

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.

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.

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

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

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.

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.

Setting up Page Auto-refresh

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

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.

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.

Tools

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.