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.

Steps for capturing issues in a responsive layout

Here's how to capture issues with BetterBugs 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

Open the BetterBugs extension and capture the issue using screenshot capture, screen record, or Rewind.

For instance, click once on the screen to take a screenshot of the entire mobile layout.

5

Confirm action

Hit the "✔️" button from the annotation toolbar to confirm the action.

6

Enter details

Add the issue details, such as the Title* (required), description, and others.

7

Upload

Finally, hit the "Upload Bug Details" button at the bottom right of your screen to create the report.

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