Getting started with Blisk browser

First steps

Download the latest version of Blisk
Create Blisk account
Log into your account in Blisk browser

User interface

Blisk features minimalistic material user interface. Blisk uses Chrome-like tabs, address bar and some other UI elements. Tab is the main container in Blisk. Within each tab, Blisk has Toolbox - the starting point to use a device.

Blisk tabs (Blisk v.13 and later)

Blisk address bar (Blisk v.13 and later)

Blisk toolbar (Blisk v.13 and later)

Blisk toolbox (Blisk v.13 and later)

Blisk device content (Blisk v.13 and later)

Blisk desktop content (Blisk v.13 and later)

Tabs view displays Blisk tabs. Each tab acts like a tab in a regular browser.
Address bar displays current URL. Use it to navigate Device and Desktop contents.
Toolbar is a menu with tools (screenshots and screen recorder, auto-refresh, error notifier etc). Learn more
Toolbox displays global settings and device list. Learn more
Device content displays the selected device and it's properties. Learn more
Desktop content is a regular browser view. Learn more

Blisk layouts

Blisk offers different layouts (workspaces) for browsing and web development: Default, Device + Desktop, Device only, Desktop only.

Default layout (Blisk v.13 and later)

Device+Desktop layout (Blisk v.13 and later)

Device only layout (Blisk v.13 and later)

Browsing mode (Blisk v.13 and later)

Default layout displays Toolbox and Desktop content. This layout displays for all of websites except system pages.
Device + Desktop displays Device and Desktop contents side-by-side. Select any device in the Toolbox to enable this layout.
Device only displays Toolbox + Device content. Expand the Device content to display this layout.
Browsing mode displays regular Desktop content. Blisk uses this layout for system pages and specified pages. You can set up Browsing mode at blisk://setup#browsing-mode.

Toolbar is the main control center of Blisk - you can manage key features from it:

Blisk toolbar (Blisk v.13 and later)

Modes

Blisk offers two modes: Developer mode and Browsing mode.

Developer mode (Blisk v.13 and later)

Browsing mode (Blisk v.13 and later)

Developer mode:

Developer mode is the main mode in Blisk. It is used to create web applications, use Blisk devices, and side-by-side view. This mode is set by default for all domains except the domains from Browsing mode list blisk://setup#browsing-mode.

Browsing mode:

In Browsing mode, Blisk acts like a regular browser. The webview displays maximum width and height, Blisk does not render the Toolbox and devices. You can set up the list of domains to automatically display in Browsing mode at blisk://setup#browsing-mode.

Screenshots and recorder

Blisk provides features for taking screenshots and recording the screen. Screenshots and screen records are automatically saved to your secure Blisk cloud storage. You can share screenshots and screen records with your teammates or attach them to bug reports.

Screenshots and screen recorder (Blisk v.13 and later)

NOTE: Screenshots and screen records are saved to Blisk cloud storage. The storage is available for registered users only. Get Blisk account to use these features

Enable Screenshots and screen recorder:

Start Blisk, click Login or Register
Register or log into your Blisk account
Click button
Take a screenshot or record a video
Screenshots: Blisk opens the Image editor. If needed, annotate the screenshot and click Save To Cloud Storage. Blisk will save your screenshot to the cloud storage and you can share it with your team.
Screen records: your video will be automatically saved to the cloud storage and you can share it with your team.

Multi-device screenshot

Blisk can take screenshots of multiple phones or tablets and combine the screenshots into a single image. With this feature, you can get the testing results even without switching across the devices. Blisk will generate the screenshot of all needed devices.

Multi-device screenshot (Blisk v.13 and later)

Multi-device screenshot options:

OS: iOS or Android
Device type: phone or tablet
Screenshot delay: value in milliseconds. Default value is 0

Existing scenarios of multi-device screenshot:

Take phone screenshot: iOS, Android or iOS + Android
Take tablet screenshot: iOS, Android or iOS + Android

Screenshot delay

Blisk generates screenshot of each device on window.onload event. The delay property delays taking a screenshot in milliseconds as soon as window.onload event has fired.

NOTE: Multi-device screenshots are saved to Blisk cloud storage. The storage is available for registered users only. Get Blisk account to use these features

Enable Multi-device screenshot:

Start Blisk, click Login or Register
Register or log into your Blisk account
Open the website that you want to screenshot
Click button
Select the OS, device type and specify the delay (optional)
Click Start screenshoting
Do not perform any actions with Blisk until it finishes generating your screenshot
Your screenshot will be automatically saved to the cloud storage and you can share it with your team.

Image editor

Blisk launches Image editor after taking a screenshot. You can annotate the screenshot before uploading it to your Blisk cloud storage.

Image editor (Blisk v.13 and later)

Auto-refresh

Auto-refresh (Blisk v.13 and later)

Auto-refresh lets developers and designers be more productive by updating pages automatically. Every time you write the code and save changes - Blisk refreshes tab(s). Auto-refresh has two states:

Ready to set up.
Enabled for this website. Click once again to edit watcher settings.

Basics

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

Auto-refresh works with different file formats. You can set up auto-refreshing for any file, for example:

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

Auto-refresh works with folders. You can set up auto-refresh for any local folder(s).

NOTE: watching a folder with many subfolders and files may affect high CPU load. It depends on your computer specs.

Setting up

Go to the domain you want to refresh automatically
Click auto-refresh button
Adjust auto-refresh settings:
- Dropdown with the domain name. You can pick any domain from the list
- Tabs to refresh. Select, whether you want to refresh all opened tabs from the domain or the active tab only
- File formats. Specify the file formats you want to watch. Formats should be separated by commas
- Add folder. Add the folders you want to watch.
Click Save to enables auto-refresh.

Watchers management

Go to blisk://setup/#auto-refresh. If you have at least one file watcher - it will be displayed in the list watchers You can enable/disable any watcher by clicking toggle button, edit it or remove watchers.

Advanced settings

You can set up advanced setting for each auto-refresh:

Disable cache: this option prevents caching of resources. Auto-refresh reloads the page entirely.
CSS live reload: Blisk updates the CSS without a full page reload.
Auto-refresh delay:: use this option to delay the auto-refresh in case your sources need extra time to bundle.

Error notifier

Blisk monitors page errors in JavaScript and resources that failed to load. Blisk notifies you when the issue appears, provides errors report and searches for the solution on StackOverflow.

Error Notifier (Blisk v.13 and later)

Error notifier has two states:

No errors on the page
The page has errors. Click the button to view the errors report.

Page inspector

Blisk delivers own page inspector with most important CSS properties. It powers quick inspecting of any element on desktop or mobile without launching DevTools.

Inspector (Blisk v.13 and later)

Page inspector has two states:

Ready to launch.
Inspector enabled. Hover your page to inspect it. Click the button again to disable.

DevTools

Blisk delivers best DevTools (same as in Chrome). You can launch separate DevTools for desktop and device and use them simultaneously to inspect elements, measure performance etc.

DevTools (Blisk v.13 and later)

NOTE: You can use DevTools for device and desktop simultaneously

Toolbox

Within Toolbox you can enable/change the device and make changes to Blisk settings (Scroll sync, Device sync, Cache, Blisk theme). Since v.11, Blisk shows Toolbox on all pages except system pages.

Toolbox toggler

With Device list toggler, you can collapse or expand the device list. The toggler has two states:

Collapse device list (default).
Expand device list.

Scroll sync

Scroll sync allows the device and desktop follow each other by the scroll position. Scroll sync has two states:

On. Blisk synchronizes scroll position of device and desktop on current tab.
Off. Device and desktop have independent scrolls.

Device sync

With enabled Device sync, Blisk sets the last selected device with its settings (device name, device size, device orientation) on each opened tab. Device sync has two states:

On. Blisk sets the last selected device with its settings on each opened tab.
Off (default). You can use independent devices and device settings on each tab.

Caching

Blisk provides two modes of caching: Enabled and Disabled.

On. Blisk stores the data so that future requests for that data can be served faster (default).
Off. Blisk loads all resources each time as if it is the first visit.

Theme

Blisk offers two themes: Default (light gray) and Dark theme.

Default. Blisk applies the default theme to Tabs, Address bar, Toolbar, Toolbox, Device content, New tab page etc.
Dark. Blisk applies the dark theme to GUI and internal pages.

Device content

Select any device in the Toolbox to enable Device content. Device content displays the selected device, its properties and some options. Learn more about Blisk interface.

Favorites

Favorites is the list of selected favorite devices with quick access to your favorite devices. Click Favorites button to add the selected device to Favorites or to remove from Favorites. Favorites has two states:

Add to Favorites (default).
Remove from Favorites.

Device info

Device info section provides the detailed information about the selected device:

Viewport size (pixels): height × width
Screen diagonal size (inches): value
Device pixel ratio (ddpx): value
Screen pixels per inch (ppi): value
Device OS and browser: OS + browser

Device orientation

Blisk provides two states of device orientation: portrait orientation and landscape orientation.

Click to toggle Portrait/Landscape orientation.

Device only layout

Click button to expand Device content and to enable Device-only layout. This action closes Desktop content. Learn more about Layouts

Click to enable Device only layout.
Click to enable Device + Desktop layout.

Device size

Blisk provides two options of device size: Fit to view and Real size.

Fit to view: Blisk scales the device to fit maximum window width and height (default).
Real size: Blisk renders the device in its real size.

Close the device

Click button to close the active device.

Zoom the device

Press SHIFT, hover over the device and drag the cursor to top / to bottom.

Resize the device

Drag the splitter to resize device and desktop views. Splitter is a gray vertical bar between device view and regular desktop view.

Enable the device

Open New tab page, click Login or Register
Log into your Blisk account

Note: restart Blisk in case you cannot launch the devices with active Premium or Trial plan.

Desktop content

Desktop content is a regular webview (same as in Chrome, Firefox or Safari). Learn more about Blisk user interface.

Desktop content is available within three layouts. Learn more about Blisk layouts.

Default layout - no device selected.
Device+Desktop layout - with device selected.
Browsing mode - device content disabled.

Desktop content header

Blisk displays Desktop content header when Device+Desktop layout enabled. The header can be disabled at blisk://setup#desktop-view.
The header displays current device type (desktop/laptop/tablet/phone) based on the size of viewport and the size of Desktop content.

Desktop content ruler

Click to show/hide the ruler pane with the ruler.

Desktop content toggler

Click to expand Desktop content and to hide the device.

Close Desktop content

Click to close Desktop content and to enable Device-only layout.

Blisk settings

Blisk setup (Blisk v.13 and later)

Blisk includes additional links to settings:

Blisk setup - find more Blisk settings.
My account - go to your account.
Upgrade plan - update Blisk to Premium version.
Scroll-sync - manage scroll-sync.

Blisk shortcuts

Blisk lets you perform most tasks directly from the keyboard. You can find the list of the default bindings (keyboard shortcuts) below. Note: you cannot change the existing shortcuts.

NOTE: shortcuts are temporarily disabled due to conflicts with other software.

Action	Windows	Mac
Default view	+ 1	+ 1
Mobile-only view	+ 2	+ 2
Desktop-only view	+ 3	+ 3
Take mobile screenshot	+ + 1	+ + 1
Take desktop screenshot	+ + 2	+ + 2
Start screen recording	+ + 3	+ + 5
Auto-refresh	+ + A	+ + A
Error notifier	+ + E	+ + E
Page inspector	+ I	+ + Y
Show device DevTools	+ + K	+ + L
Rotate the device	+ R	+ R
Blisk setup	+ + S	+ Z

Troubleshooting

If you face the issue with Blisk, please try to restart the browser and check if the problem still reproduces. Before submitting a bug report, please check that you're using the latest version of Blisk.

When submitting the bug report, please mention your Operating system and it's version, version of Blisk.

You can subscribe to our news and updates by leaving your Email in the footer or by following us on Twitter.