Mobile inspector

BetterBugs for capturing issues in a responsive layouts/mobile inspector.

You can use the capture issues with the responsive layout/mobile inspector turned on from the Chrome dev tools. This enables you to capture issues, especially UI issues, for your application's mobile device layout.

How to Capture Issues using BetterBugs.io in a Responsive Layout/Mobile Inspector?

Here's how to capture issues with BetterBugs.io for responsive layouts:

1

Open "inspect" for the Web Page

Right-click on your web page and select the "Inspect" option from the menu.

2

Toggle Device Mode

Click the toggle device toolbar (mobile inspector icon) from the top left corner of your Chrome Dev Tools.

Alternatively, you can use the following shortcuts to toggle device mode:

• For Windows: Ctrl + Shift + M

• For Mac: Command + Shift + M

3

Select Device

Select your desired mobile device/resolution to get the responsive layout.

4

Capture Issue using Visible Screenshot

Open the BetterBugs.io extension and capture the issue using Capture Screenshot (visible screen), Record Screen, or Rewind.

For instance, click the visible screenshot option to take a screenshot of the entire mobile layout.

5

Annotate Screenshot (Optional)

Use the markup toolbar at the left to highlight the issue.

6

Enter Issue Details

You can add the details (Title + Quick Summary + Steps to Reproduce) manually in the description area manually or automatically with the "AI" toggle.

7

Select BetterBugs Workspace and Project

From the two dropdowns above the description area, select:

• Workspace (Default: My Workspace)

• Project (Default: My Project)

This is where your report saves once you create a session.

8

Create Session

Finally, hit "Create Session" button on the top right.

Your visual bug report is good to go with the added information and auto-attached technical details for developers.