# GBrowser: DevTools and device emulation

> For the complete documentation index, see [llms.txt](https://edgafner.github.io/llms.txt).

> **TL;DR**
> Open DevTools: `F12`
>
>
>
> Toggle device emulation: `Ctrl+Shift+M`
>
>
>
> Debug port: `Settings | Tools | GBrowser | Developer Options`

GBrowser includes the developer tools of Chromium and a device toolbar similar to the one in Chrome. Use them to inspect the page you are working on and to check how it looks on smaller screens.

The default shortcuts in this topic are for Windows and Linux. On macOS, GBrowser shortcuts use `⌘` instead of `Ctrl` and `⌥` instead of `Alt`; see [Default shortcuts on macOS](gbrowser-keyboard-shortcuts.html#macos-shortcuts).

## Open DevTools

Procedure: Inspect the current page

Load a page in GBrowser first; the action is not available for an empty tab.

* Press `F12`.

* Click More Options and select Open DevTools.

* Right-click the page and select Open DevTools.

Chromium DevTools opens in a separate window, with the Elements, Console, Network and other panels for the page in the current tab.

## Emulate a mobile device

Procedure: Turn on device emulation

1. Click More Options and select Emulate Mobile Device Viewport and User Agent, or press `Ctrl+Shift+M`. A device toolbar appears above the page, and the page is shown in a frame of the selected size. In the keymap, the action is named Toggle Device Emulation.

2. In the device list, keep Responsive or select a device. Responsive starts at 400 × 626 pixels.

![GBrowser device toolbar with iPhone SE selected and the page shown in a phone-sized frame](images/gbrowser_device_emulation.png)

3. Optional: change the width and height in the two number fields, select a zoom level, or click Rotate to swap the width and height.

When you select a device, GBrowser resizes the page frame to the device's screen size and reloads the page. GBrowser also tries to report the device's user agent to scripts on the page, but requests to the server keep GBrowser's own User-Agent header, so server-side mobile detection does not see the emulated device. Width and height accept values from 50 to 9999 pixels. The zoom list offers 50% to 150%, and you can type another value. If the frame is larger than the tool window, GBrowser scales the page down to fit.

Device emulation applies to the current tab only and is not saved. While it is on, the menu item shows the device name, for example Device: iPhone SE. To turn emulation off, select that item again or press `Ctrl+Shift+M`. GBrowser then shows the page at the full size of the tool window again, resets the zoom to 100% and reloads the page.

### Available devices

The device list contains Responsive and these profiles:

* iPhone SE

* iPhone XR

* iPhone 12 Pro

* iPhone 14 Pro Max

* Pixel 7

* Samsung Galaxy S8+

* Samsung Galaxy S20 Ultra

* iPad Mini

* iPad Air

* iPad Pro

* Surface Pro 7

* Surface Duo

* Galaxy Z Fold 5

* Asus Zenbook Fold

* Samsung Galaxy A51/71

* Nest Hub

* Nest Hub Max

## Debug from Chrome through a port

You can also attach desktop Chrome to the IDE's embedded browser and inspect GBrowser pages from there. The port applies to every embedded browser in the IDE, not only to GBrowser.

Procedure: Set the debugging port

1. Open the Settings dialog (`Ctrl+Alt+S`, macOS: `⌘ ,`) and select `Tools | GBrowser`.

2. Under Developer Options, select Debug port and enter the port number. The default is 9222.

3. Click OK and restart the IDE.

4. In Chrome, open `chrome://inspect`.

5. Click Configure and add `localhost:` followed by your port number, for example `localhost:9222`.

6. Under Remote Target, click inspect next to a page that is open in the IDE.

## See also

### Related topics

[GBrowser: Browse the web](work-with-gbrowser.html) [GBrowser: Open project files and links](gbrowser-open-files-and-links.html) [GBrowser: Settings reference](gbrowser-settings-and-configuration.html)

### Useful resources

[Chrome DevTools documentation](https://developer.chrome.com/docs/devtools) [GBrowser on JetBrains Marketplace](https://plugins.jetbrains.com/plugin/14458-gbrowser)