Issue: Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

Question

I started a new project in vue.js. I added navbar. At one point, I noticed issue in the console:

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

I don't understand this, because I don't use any navigator in the project.

Why am I seeing this issue? How can I change it?

Answer 1

The reason one sees the message is well explained in the description of the very same message (audit).

The real question is who/what is the source of it. There is a hint to the file extended-css.js.

Here is an example with another file (as I do not have the extended-css.js):

Right click on the file and then choose Open in new tab.

So there you can see that the reason for the audit message is the hook.js file from the Vue.js devtools extension.

In your case it would be another extension or library you are using - direct or indirect (for example a part of vuetify, etc.).

From there you have 3 choices:

1. ignore it
2. wait for the authors of the library to fix the issue and update it
3. disable the extension/remove the library causing it.

Answer 2

https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html

Is helpful to read. Some key points:

"Beginning in M92, we plan to start sending deprecation notices for the navigator.userAgent, navigator.appVersion, and navigator.platform getters in the DevTools Issues tab."

"If your site, service, library or application relies on certain bits of information being present in the User Agent string such as Chrome minor version, OS version number, or Android device model, you will need to begin the migration to use the User Agent Client Hints API instead."

I know I am not using the navigator getters in question so at this point, it seems I can only wait for an update to the library's .js (in my case, bootstrap 4) to make the warning go away.