This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

FF dev tools; finding code by selecting element not element by selecting code

  • 2 replies
  • 1 has this problem
  • 1 view
  • Last reply by SkyHook

SkyHook
SkyHook
more options

Using built-in FF developer tools, I wish to select page elements on the screen render and have that highlight the associated html in the inspector.

Drilling down through inspector code while watching highlightsis is slow, and difficult with reduced window area and buried divs that require clicks to expand. I haven't found any other way.

I'm sure this must be possible but I'm not getting it. Of course I have a lot to learn, but is there a place that specifically explains the dev tools or presents them in the form of a lesson? My inability to figure out this highlight thing has been humbling, and searching specific questions has proven a dead end that just leads me back to this community site.

Using built-in FF developer tools, I wish to select page elements on the screen render and have that highlight the associated html in the inspector. Drilling down through inspector code while watching highlightsis is slow, and difficult with reduced window area and buried divs that require clicks to expand. I haven't found any other way. I'm sure this must be possible but I'm not getting it. Of course I have a lot to learn, but is there a place that specifically explains the dev tools or presents them in the form of a lesson? My inability to figure out this highlight thing has been humbling, and searching specific questions has proven a dead end that just leads me back to this community site.

Chosen solution

Don't you see "Inspect" in the right-click context menu ?

Read this answer in context 👍 1

All Replies (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Chosen Solution

Don't you see "Inspect" in the right-click context menu ?

SkyHook
SkyHook Question owner
more options

Thanks to you cor-el, I do now. I've seen your name before so thank you for answering these one-offs.

What follows below is just a verbose bunch of excuses, but I see now that <CTRL+Shift+c> is what I imagined originally, one less click and it allows me to select highlighted elements without activating them. I'm still working on selecting right-click context menu items with the keyboard.

My false assumptions were stacked up. I thought "inspect" context menu only launched the inspector, not interacted with it. I thought page elements were supposed to respond to hover with the tools up, highlight first then action. I had no idea the breadcrumb toolbar was interactive, assumed only status, so It never occurred to me to flick it. I see the breadcrumb scroll stays to the right if I go there manually, preserving the view of the end of the hierarchy when I thought I had to re-scroll for every selection. As a bonus, I see the selected element flashes once if within view, so that's a nice touch.

Thank you, and you can see why I wondered if there is such a thing as a recommended tutorial or lesson. The link you offered is an excellent page that I'll read stem to stern. Also, while putzing around I found [https://developer.mozilla.org/en-US/d.../UI_Tour], which looks like the tutorial I wished for in addition to other tours.

MDN documents are excellent so spending quality time there might be my best approach.

Modified by SkyHook