FF dev tools; finding code by selecting element not element by selecting code
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.
Solution eye eponami
Don't you see "Inspect" in the right-click context menu ?
Tanga eyano oyo ndenge esengeli 👍 1All Replies (2)
Solution eye oponami
Don't you see "Inspect" in the right-click context menu ?
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.
Ezalaki modifié