为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

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

  • 2 个回答
  • 1 人有此问题
  • 1 次查看
  • 最后回复者为 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.

被采纳的解决方案

所有回复 (2)

more options

选择的解决方案

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

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.

由SkyHook于修改