Javascript Developer - Unable to get properly functioning "$" function

Developer Tools
#1

Hi Mozilla Community,

I am a Javascript Developer and I need a bit of help. This is my first time in a very long time contacting technical support. Please bare with me as I explain my situation. I recommend that someone that is familiar with Javascript and the browser console help test this issue.

I try to create a function in the browser console on a very blank html file. I created a function using the following code “const $ = $ => $”. When I called the function with the following code “$(‘test’)” I would get a return of “null”. What is expected to return is “test”. I have tested other browsers and it would seem to work perfectly fine. These browsers include: Edge, Chrome, Epiphany. I have also tried creating a function like so “const a = a => a”. Then I called the function like this “a(‘test’)”. The result would be “test”.

I had also asked a developer friend of mine to test this out and nothing is wrong on his end. I cannot recall what machine my friend runs but I know it does not run Linux. I wouldn’t know well enough but my suspicions lie with the Linux version of Firefox. I have also tried uninstalling and reinstalling Firefox from my computer the results seem to remain the same.

I will attach images for a visual of the situation. I will also leave some specs that might be of concern down below.

Here are my computer specs:

LMDE 4 (debbie) x86_64
Kernel: 4.19.0-14-amd64
Shell: bash 5.0.3
Resolution: 2560x1080
DE: Cinnamon 4.8.6
CPU: AMD Ryzen 7 1700 (16) @ 3.000GHz
GPU: NVIDIA GeForce GTX 1070
Memory: 6153MiB / 64414MiB

Firefox Version: 78.9.0esr (64bit)

Please get back to me,
Terrance Banh

Note: This is a copy of my post found in the link here. Thanks to jscher2000 for recommending me to post here.

Screenshot from 2021-03-23 17-08-08
Screenshot from 2021-03-23 17-08-081251×978 18 KB

Screenshot from 2021-03-23 17-05-11
Screenshot from 2021-03-23 17-05-112560×1080 136 KB

#2

Hey,

I confirm that I see the problem in Firefox ESR (v78), but it seems fixed in more recent versions. I doubt we’ll fix this in v78 so I can only suggest to use latest stable version instead.

The underlying problem is likely that $ has a special handling in the console. Maybe some devtools developer will be able to give some more background story.

Hope this helps!

1 Like
#3

When I check DevEd(88) or Nightly, this gives me an error:

$('wtf?');
Uncaught DOMException: Document.querySelector: 'wtf?' is not a valid selector

I’m not able to redefine what $() does using the simple syntax in the original post.

Can you override the helper function on yours? Or is there a way to disable them?

1 Like
#4

Hi!

I think this is tracked in the following bug https://bugzilla.mozilla.org/show_bug.cgi?id=1517907

It’s not really related to $, but rather to the way we handle let/const declarations as opposed to globals.

Your snippet would “work” with $ = $ => $ or var $ = $ => $.

cc @nchevobbe

(note: I also don’t see a difference on ESR vs Nightly?)

1 Like
#5

I may have been confused, indeed I don’t see a difference with const now. This works if the page defined $ (for example by loading jQuery), so this may be my confusion.

Using $ = $ => $ or var $ = $ => $ don’t work for me either.

$ = $ => $: then running $("test") gives null.
var $ = $ => $: then running $("test") gives Uncaught TypeError: $ is not a function.

Do you see that as well?

1 Like
#6

This is a combination of using const/let + overriding the built-in $ helper.

  • const a = a => a; a("body") // -> "body"
  • var $ = a => a; $("body") // -> "body"
  • let $ = a => a; $("body") // -> <body> (we didn’t override the helper)

we have a mechanism to disable helpers when a global with the same name exists (devtools/server/actors/webconsole/eval-with-debugger.js#606-608), so that’s why we don’t use the helper for page defining $
But here, assigning $ with let does not override the global $ (and doesn’t put it on the global, so next calls will still reach for the global one).
I’m not sure how we could fix this, I need to investigate more

2 Likes