Getting started with Blisk browser

First steps

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

Toolbar

Blisk features toolbar with buttons to manage Blisk:

Blisk toolbar (Blisk v.8 and later)

Layout settings

Blisk features three layouts:

• Default layout with device and desktop side-by-side.
• Device-only layout.
• Desktop-only layout.

To make your browsing experience more comfortable, Blisk shows Desktop-only layout for:

• New tab page and system pages
• Blisk website
• Search engines (Google, Yahoo, Bing etc)
• Social networks (Facebook, Twitter)
• Other top websites (YouTube, Stackoverflow, Reddit etc)

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.10 and later)

Enable Screenshots and screen recorder:

1. Start Blisk, click Login or Register
2. Register or log into your Blisk account
3. Click button
4. Take a screenshot or record a video
5. Screenshots: Blisk opens the Image editor, annotate the screenshot if needed 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.10 and later)

Multi-device screenshot settings:

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

Existing scenarios of multi-device screenshot:

• Take screenshot of iOS phones
• Take screenshot of Android phones
• Take screenshot of iOS + Android phones
• Take screenshot of iOS tablets
• Take screenshot of Android tablets
• Take screenshot of iOS + Android tablets

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

Enable Multi-device screenshot:

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

Image editor

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.

Image editor (Blisk v.10 and later)

Auto-refresh

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

Setting up

1. Go to the domain you want to refresh automatically
2. Click auto-refresh button
3. 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.
4. 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.8 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.

Page inspector (Blisk v.8 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.8 and later)

Google Tab

Google Tab is an overlaying tab with Google search. You can use this tab to quickly find anything on the web without leaving your current tab.

Google Tab (Blisk v.8 and later)

Google Tab has two states:

• Ready to launch.
• Google Tab enabled. Click the button again to disable.

Blisk settings

Blisk settings (Blisk v.8 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.
• My cloud storage - go to your cloud storage.
• 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.

Device list

Within device list panel you can change the device, view the settings of the current device, change the device orientation or change the behavior of device toolbar.

Blisk device list (Blisk v.10 and later)

Device list 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.

Favorites

Favorites is the list of selected favorite devices with easy access to your devices. Click Favorites button to add the selected device to Favorites or to remove from Favorites.

The Favorites has two states:

• Add to Favorites (default).
• Remove from Favorites.

Device info

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

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

Device orientation

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

Device orientation states:

•    Portrait orientation enabled (default).
•    Landscape orientation enabled.

Device size

Blisk provides two mode of device size: fullscreen mode and real-size mode.

• Fullscreen mode. The fullscreen mode scales the device to fit maximum window width and height (default).
• Real-size mode. The real size mode shows the device in its real size.

Toolbar behavior

Blisk provides four states of toolbar behavior: Expands at start, Native behavior, Is expanded, Is collapsed.

• Expands at start. Toolbar expands once on page load and collapses on scroll
• Native behavior. Native toolbar expands and collapses on scroll.
• Is expanded. Toolbar is always expanded and does not collapse on scroll.
• Is collapsed. Toolbar is always collapsed and does not expand on scroll.

Caching

Blisk provides two modes of caching: Enabled and Disabled.

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

Troubleshooting

• No Blisk device
• Blisk device list disappeared
• Auto-refresh is not working
• Update Blisk browser

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.