Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (Cyborg)
  • No Skin
Collapse
Brand Logo

CIRCLE WITH A DOT

  1. Home
  2. Uncategorized
  3. Here's a thread of cool things I found exploring the #Firefox Developer Tools!

Here's a thread of cool things I found exploring the #Firefox Developer Tools!

Scheduled Pinned Locked Moved Uncategorized
firefoxniriwebdevdevtools
25 Posts 7 Posters 22 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • adamhotep@infosec.exchangeA adamhotep@infosec.exchange

    @blinry what is the difference between $$(…) and $$$(…)? I didn't know about $$(…)

    nicolaschevobbe@mastodon.socialN This user is from outside of this forum
    nicolaschevobbe@mastodon.socialN This user is from outside of this forum
    nicolaschevobbe@mastodon.social
    wrote last edited by
    #21

    @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)

    blinry@chaos.socialB 1 Reply Last reply
    0
    • nicolaschevobbe@mastodon.socialN nicolaschevobbe@mastodon.social

      @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)

      blinry@chaos.socialB This user is from outside of this forum
      blinry@chaos.socialB This user is from outside of this forum
      blinry@chaos.social
      wrote last edited by
      #22

      @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!

      Link Preview Image
      adamhotep@infosec.exchangeA 1 Reply Last reply
      0
      • blinry@chaos.socialB blinry@chaos.social

        @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!

        Link Preview Image
        adamhotep@infosec.exchangeA This user is from outside of this forum
        adamhotep@infosec.exchangeA This user is from outside of this forum
        adamhotep@infosec.exchange
        wrote last edited by
        #23

        @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.

        1 Reply Last reply
        0
        • blinry@chaos.socialB blinry@chaos.social

          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.

          Link Preview Image
          martijn@mastodon.content.townM This user is from outside of this forum
          martijn@mastodon.content.townM This user is from outside of this forum
          martijn@mastodon.content.town
          wrote last edited by
          #24

          @blinry That's very Perl-like!

          1 Reply Last reply
          0
          • blinry@chaos.socialB blinry@chaos.social

            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.

            Link Preview Image
            jetcool@mastodon.socialJ This user is from outside of this forum
            jetcool@mastodon.socialJ This user is from outside of this forum
            jetcool@mastodon.social
            wrote last edited by
            #25

            @blinry you can right-click an element and "Use in Console" will create a temporary variable with that element

            1 Reply Last reply
            0
            • R relay@relay.an.exchange shared this topic
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • World
            • Users
            • Groups