1. Home
  2. Knowledge Base
  3. Ghostlab: Feature Reference
  4. Clients: Overview and Inspection

Clients: Overview and Inspection

Ghostlab lets you test your site on any client you have available – be it one of your web browser, your tablets and smartphones, or your network-connected TV set.

Client overview

In order to connect to Ghostlab, clients must be in the same local network as Ghostlab. Any client that is connected to the active Ghostlab site will show up in the client list. You can cause all clients to reload the current page by clicking the Refresh button.

Client information

For all displayed clients, basic information such as the kind (device or browser) and the operating system are evident in the listing. To obtain more information on a specific client, click the i button. When you click on a client, it’s viewport will identify itself by briefly showing the client id.

clients1

Client inspection and debugging

To inspect or debug a client, click on the </> icon in the client list. This will open the tray and enter the dev tools perspective, where you’ll see your familiar Chrome dev tools ready for duty.
clients2

In the top area, you have three options: “Synchronized inspection”, “JavaScript debugging” and “Reload Inspector”.

If you enable synchronized inspection, then any manipulation you perform on the dom of the client you are inspecting will be broadcast to all other devices. This is ideal if you want to quickly see the effect of a modification across all clients. By disabling synchronized inspection, manipulations made to the DOM are limited to the device you are currently inspecting.

As for JavaScript debugging – you have to select this option if you want to debug JavaScript on the remote device. When you check this option, the page will be reloaded, as we have to prepare the JavaScript code to allow debugging. Note that using JavaScript debugging will result in a performance penalty. Also, note that the synchronized inspection option does not apply to JavaScript debugging – when you’re debugging a client, others aren’t affected.

The ability to reload the inspector can come in handy in case something breaks along the way of manipulating the DOM, or some connection problems have occurred during loading of the dev tools. Don’t be shy to use it!

clients3

Client synchronization behavior

By default, everything that happens on any one client is synced to all other clients – scrolling, clicks, hovering, form fills, etc. However, there are two other modes in which Ghostlab can handle synchronization – presentation mode and selective sync. You can access these settings by clicking the sync mode icon in the client list.

If you select presentation mode, then the first client that is running on your local computer (e.g. Google Chrome) will be made the presenter, and all other clients will be made viewers. Only events that occur on the presenter client will be synchronized to other clients – if a viewer, say, scrolls, this will not be propagates. You can have multiple presenters – simple change the role of each individual device by clicking on the respective icon in the client list.

If you select selective sync mode, the only clients that are marked as active will synchronize events. When entering selective sync mode, all clients are marked as inactive. You can set them to active by clicking the respective icon on the client. Selective sync is ideal if you have multiple clients connected, but want to not include some of them in your current activity without having to disconnect them

clients4

Was this article helpful?

Related Articles