Made in Builder.io

Visual Copilot Livestream | Dec 6 @10am PST

Introducing Visual Copilot: Figma to code with AI

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Web Development

How to Inspect Interactions in the Browser

February 14, 2023

Written By Sami Jaber

The other day, I tried to debug this autocomplete list’s broken styles:

A screenshot of autocomplete broken styles.

But as many of you have experienced, when you click in your console, that moves focus out of your webpage, and the popover goes away! In this case, I can’t even right-click the popover to click Inspect Element:

I looked around and found two wonderful solutions to this problem in Chromium browsers.

Solution #1: Emulate Focus Page

Open your console, press Cmd+Shift+p to open the command palette, and search for Show Rendering :

A screenshot of a search in the command palette in chrome devtools for "show rendering".

This opens a Rendering tab, where you can enable Emulate a focused page.

a screenshot of the Rendering pane inside devtools showing "emulate a focused page" checkbox selected.

This will preserve focus when you click around in your console.

This one is less practical for this particular example, but can be really useful in situations that have nothing to do with focus. You can COMPLETELY pause JS and enter debugging mode whenever a portion of the HTML has any modifications happen to it!

You start by adding a breakpoint to the subset you care about. In this case, I’ll choose the entire code editor area:

A screenshot of devtools element pane with the sub menu showing and highlighting "break on".

And now, this is what happens when I type a character in the editor:

As you can tell, this requires stepping a lot in the debugger. I prefer solution #1 to preserve focus, but I can see myself using the Break On feature for other complex interactions, especially if I want to jump into the JS code!

Hopefully, you’ll be able to use these tools the next time you want to debug your client-side UIs. If you know of any other cool browser dev tools, share them with us!

Introducing Visual Copilot: a new AI model to convert Figma designs to high quality code in a click.

No setup needed. 100% free. Supports all popular frameworks.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code.

Try Visual Copilot

Like our content?

Join Our Newsletter

Continue Reading
AI12 MIN
Training Your Own AI Model Is Not As Hard As You (Probably) Think
WRITTEN BYSteve Sewell
November 22, 2023
Latest News21 MIN
Create your own GPT, Astro gains resumability, and the right way build an AI project
WRITTEN BYYoav Ganbar
November 17, 2023
AI12 MIN
Figma to HTML: Convert designs to clean HTML code in a click
WRITTEN BYVishwas Gopinath
November 17, 2023