#web-testing #workbench #devtools #mobile

Use DevTools in the Workbench

Use the DevTools Workbench integration to inspect browser tabs and WebViews during a live session on a compatible mobile device. The tool opens the native browser inspector for the selected debug target, such as Chrome DevTools for Chromium-based browsers or WebKit Inspector for Safari and iOS WebViews.

Prerequisites

Before you start:

  • DevTools integration is enabled for your account. Contact webmate support if the DevTools button is not available.
  • The selected device supports DevTools. Compatible devices expose the machine.devtools.available property.
  • A live Workbench session is running on the compatible device.
  • The browser tab, page, or WebView that you want to inspect is already open on the device.

The DevTools button is available in the console toolbar only while the live Workbench session runs on a compatible device.

Open DevTools

  1. Open the Workbench for the compatible device.
  2. Click DevTools in the console toolbar.
  3. Select a debug endpoint. Each endpoint represents a browser or WebView runtime running on the device, such as Chrome, Safari, or an inspectable WebView.
  4. If no endpoint appears, click Refresh to scan again.
  5. Select a target. Targets are the individual tabs or pages exposed by the selected endpoint.
  6. Click Open to launch DevTools in a new window.

The connection is authenticated automatically with the current Workbench session. You do not need to pass an additional access token manually.

Supported Devices

Android devices with Chromium-based browsers use the Chrome DevTools Protocol. The inspector opens through http://devtools-chrome.webmate.io.

iOS devices with Safari or inspectable WebViews use WebKit Remote Debugging. The inspector opens through http://devtools-webkit.webmate.io.

Troubleshooting

If the endpoint list is empty, confirm that the selected device supports DevTools and that the browser or WebView is running on the device. Then click Refresh to rescan the available endpoints.

If the target list is empty, make sure the page or WebView that you want to inspect is open on the device, then refresh the endpoint and target lists.

If the DevTools button is missing from the console toolbar, contact webmate support to check whether DevTools integration is enabled for your account.