Here's a thread of cool things I found exploring the #Firefox Developer Tools!
-
@adamhotep @blinry $$$ will retrieve éléments in the shadow dom, which is not the case for $$ (see https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/ for the full doc)
-
@adamhotep @blinry $$$ will retrieve éléments in the shadow dom, which is not the case for $$ (see https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/ for the full doc)
@nicolaschevobbe @adamhotep I also had to look that up, but here's an example where a shadow DOM is used: In MDN's web dev playground, they want to isolate the CSS you write to only act on "your" HTML, not on the entire site. So they put it in a shadow root.
So $$ doesn't access the <h1> here, but $$$ does!
-
@nicolaschevobbe @adamhotep I also had to look that up, but here's an example where a shadow DOM is used: In MDN's web dev playground, they want to isolate the CSS you write to only act on "your" HTML, not on the entire site. So they put it in a shadow root.
So $$ doesn't access the <h1> here, but $$$ does!
@blinry @nicolaschevobbe while I've got your attention, do you know how to inject helper JS code (just some functions) into a document for the Console? I only know how to do it in a UserScript, which means it's not available from the Console.
-
There are more "Console Helpers" in #firefox:
$_ is a shortcut to the result of the last expression you executed, allowing you to do some neat step-by-step exploration.
And $0 refers to the currently-inspected element on the page.
-
There are more "Console Helpers" in #firefox:
$_ is a shortcut to the result of the last expression you executed, allowing you to do some neat step-by-step exploration.
And $0 refers to the currently-inspected element on the page.
@blinry you can right-click an element and "Use in Console" will create a temporary variable with that element
-
R ActivityRelay shared this topic
