In Progress
Status Update
Comments
al...@google.com <al...@google.com>
jl...@google.com <jl...@google.com> #2
Or is there a bug in Google Chrome version 133.0.6905.0 (Official version) dev 64-bit, on Fedora Rawhide Linux: 6.13.0-0.rc5.42.fc42.x86_64
In the console (from the developer tools, DevTools), empty parentheses after "Symbol" return an error, whereas without empty parentheses, it returns what is stated in the information "URL to the relevant page onweb.dev "
16:11:31.288 Symbol( "String" ) === Symbol().for( "String" );
16:11:31.291 VM590:1 Uncaught TypeError: Symbol(...).for is not a function at <anonymous>:1:36 (anonymous) @ VM590:1
16:11:52.488 Symbol().for( "String" ) === Symbol().for( "String" );
16:11:52.490 VM594:1 Uncaught TypeError: Symbol(...).for is not a function at <anonymous>:1:13 (anonymous) @ VM594:1
16:12:02.226 Symbol( "String" ) === Symbol( "String" );
16:12:02.239 false
From the Gemini AI support in DevTools itself (once enabled in the DevTools settings), with some simplifications made by me:
Explanation
The error "Uncaught TypeError: Symbol(...).for is not a function" indicates that the for method you're trying to call is not available on a Symbol object.
Here's the breakdown of why this happens and how to fix it:
Understanding the Issue
Symbol() creates unique, anonymous symbols: When you call Symbol(), you get a brand new, unique symbol. These symbols are distinct even if the description is the same (e.g., Symbol("String") !== Symbol("String")). They are meant for internal use within your code and are not shared or registered.
Symbol.for() creates and retrieves global symbols: Symbol.for(key) is a static method on the Symbol constructor, not on a specific instance of a symbol. It's used to create or retrieve a symbol from a global registry using the given key (a string). If a symbol with that key already exists, it returns the existing symbol. Otherwise, it creates a new one and registers it.
The Error in your Code
In your code:
Code (Use code snippets with caution)
Symbol().for( "String" ) === Symbol().for( "String" );
You're mistakenly trying to call for as a method on the result of Symbol() which is a unique anonymous symbol object.
The Correct Usage
The correct way to use Symbol.for() is as a static method of the Symbol constructor:
Code (Use code snippets with caution)
Symbol.for( "String" ) === Symbol.for( "String" ); // This is correct
Explanation of the Correct Code
Symbol.for("String") (First Instance):
The JavaScript engine checks if a symbol with the key "String" exists in the global symbol registry.
If it doesn't exist, a new symbol is created, registered with the key "String", and returned.
If a symbol with the key "String" already exists, it's retrieved from the registry and returned.
Symbol.for("String") (Second Instance):
The same process repeats. Since "String" was already used as a key, the engine looks for an existing symbol with this key.
It finds the symbol created in the previous step and returns it (the same object!).
=== (Strict Equality):
Because both instances of Symbol.for("String") return the same object, the strict equality comparison (===) evaluates to true.
Summary
The error Symbol(...).for is not a function arises from incorrectly trying to call for as a method on a unique, anonymous symbol instance. The correct usage is Symbol.for(key), where for is a static method on the Symbol constructor, and key is the string used to register and retrieve the globally registered symbol.
Revised Code (Correct)
Code (Use code snippets with caution)
console.log(Symbol.for( "String" ) === Symbol.for( "String" ));
This code will now work correctly and output true.
In the console (from the developer tools, DevTools), empty parentheses after "Symbol" return an error, whereas without empty parentheses, it returns what is stated in the information "URL to the relevant page on
16:11:31.288 Symbol( "String" ) === Symbol().for( "String" );
16:11:31.291 VM590:1 Uncaught TypeError: Symbol(...).for is not a function at <anonymous>:1:36 (anonymous) @ VM590:1
16:11:52.488 Symbol().for( "String" ) === Symbol().for( "String" );
16:11:52.490 VM594:1 Uncaught TypeError: Symbol(...).for is not a function at <anonymous>:1:13 (anonymous) @ VM594:1
16:12:02.226 Symbol( "String" ) === Symbol( "String" );
16:12:02.239 false
From the Gemini AI support in DevTools itself (once enabled in the DevTools settings), with some simplifications made by me:
Explanation
The error "Uncaught TypeError: Symbol(...).for is not a function" indicates that the for method you're trying to call is not available on a Symbol object.
Here's the breakdown of why this happens and how to fix it:
Understanding the Issue
Symbol() creates unique, anonymous symbols: When you call Symbol(), you get a brand new, unique symbol. These symbols are distinct even if the description is the same (e.g., Symbol("String") !== Symbol("String")). They are meant for internal use within your code and are not shared or registered.
Symbol.for() creates and retrieves global symbols: Symbol.for(key) is a static method on the Symbol constructor, not on a specific instance of a symbol. It's used to create or retrieve a symbol from a global registry using the given key (a string). If a symbol with that key already exists, it returns the existing symbol. Otherwise, it creates a new one and registers it.
The Error in your Code
In your code:
Code (Use code snippets with caution)
Symbol().for( "String" ) === Symbol().for( "String" );
You're mistakenly trying to call for as a method on the result of Symbol() which is a unique anonymous symbol object.
The Correct Usage
The correct way to use Symbol.for() is as a static method of the Symbol constructor:
Code (Use code snippets with caution)
Symbol.for( "String" ) === Symbol.for( "String" ); // This is correct
Explanation of the Correct Code
Symbol.for("String") (First Instance):
The JavaScript engine checks if a symbol with the key "String" exists in the global symbol registry.
If it doesn't exist, a new symbol is created, registered with the key "String", and returned.
If a symbol with the key "String" already exists, it's retrieved from the registry and returned.
Symbol.for("String") (Second Instance):
The same process repeats. Since "String" was already used as a key, the engine looks for an existing symbol with this key.
It finds the symbol created in the previous step and returns it (the same object!).
=== (Strict Equality):
Because both instances of Symbol.for("String") return the same object, the strict equality comparison (===) evaluates to true.
Summary
The error Symbol(...).for is not a function arises from incorrectly trying to call for as a method on a unique, anonymous symbol instance. The correct usage is Symbol.for(key), where for is a static method on the Symbol constructor, and key is the string used to register and retrieve the globally registered symbol.
Revised Code (Correct)
Code (Use code snippets with caution)
console.log(Symbol.for( "String" ) === Symbol.for( "String" ));
This code will now work correctly and output true.
rv...@google.com <rv...@google.com> #3
I agree with Jeremy that paints are required so it's technically correct, but this is a common point of confusion and the docs could be clearer. Similar to the "What's in an interaction?" section, we could have a "What's in the next paint?" section to go into this more.
cl...@gmail.com <cl...@gmail.com> #4
What triggeres the next paint is for the person behind this screen not I but them to leave us alone
ba...@google.com <ba...@google.com> #5
Missed this earlier!
I thought we'd updated this to "the moment the browser is next able to paint a frame to paint" previously? Or maybe I imagined that?
To me that's a small change which should resolve this without being overly explicit about there not needing to be an update. It's very rare that there is no update after an interaction—as above examples show*—so I don't think think we should over emphasize this in the docs.
* Note: I don't 100% agree there is "always a paint". Using above demo with mouse leads to rendering work (even if it doesn't lead to a different paint) which can be seen in a trace, but doing it with keyboard doesn't, so arguably there is no "paint". Plus it's tricky for some paints like scrolling that can happen without the need of the main thread and those are outside of INP so I don't think we can count "paints" as pixels either when considering INP. Anyway... it's messy.
I thought we'd updated this to "the moment the browser is next able to paint a frame to paint" previously? Or maybe I imagined that?
To me that's a small change which should resolve this without being overly explicit about there not needing to be an update. It's very rare that there is no update after an interaction—as above examples show*—so I don't think think we should over emphasize this in the docs.
* Note: I don't 100% agree there is "always a paint". Using above demo with mouse leads to rendering work (even if it doesn't lead to a different paint) which can be seen in a trace, but doing it with keyboard doesn't, so arguably there is no "paint". Plus it's tricky for some paints like scrolling that can happen without the need of the main thread and those are outside of INP so I don't think we can count "paints" as pixels either when considering INP. Anyway... it's messy.
jl...@google.com <jl...@google.com> #6
I think we can focus on clarifying the majority of cases—which in the case of INP, I think it's reasonable to assume there is always* a paint.
*Most of the time, and almost always when it really counts, as far as my understanding of this goes.
*Most of the time, and almost always when it really counts, as far as my understanding of this goes.
ar...@gmail.com <ar...@gmail.com> #7
Comment has been deleted.
ar...@gmail.com <ar...@gmail.com> #8
Comment has been deleted.
Description
Hello, this section of the INP definition page, reports:
As that part is the detail on how INP calculated, I think it would be worth mentioning that a paint is not necessary to end the INP measurement time span.
Find more details in this article , "Misconception 1".
What do you think? Should it be updated?