Powerful JavaScript — How to Use JS to Access System Information such as Memory, CPU/GPU, Battery, and More

Currently, browsers are capable of accessing certain system information, such as memory size, CPU/GPU, battery, and more.

How to Get Memory Size in JavaScript

It’s simple; the following line of code is all you need:

navigator.deviceMemory

For example, the output in my Chrome browser console is:

The compatibility of deviceMemory is shown in the screenshot below; currently, only the Chrome browser supports it.

How to Get CPU Information in JavaScript

Currently, the web cannot access detailed CPU parameter information, but you can retrieve the number of CPU cores.

This is also part of the navigator object, but the property name doesn’t include the letters “CPU.” It’s called hardwareConcurrency, which indicates the number of hardware threads that can run in parallel.

Code example:

navigator.hardwareConcurrency

Example of the output:

On a Mac, you can see the brand of the chip. For example, my Mac office computer returns ‘MacIntel’ when running navigator.platform.

The compatibility of hardwareConcurrency is far better supported than that of deviceMemory. As shown in the image below, all major browsers support it:

GPU information can also be accessed.

code

navigator.gpu

However, the value returned by navigator.gpu is not a specific number but a GPU object, which is closely related to the WebGPU API.

It has one property and two methods. The property is wgslLanguageFeatures, and the methods are requestAdapter() and getPreferredCanvasFormat().

The value returned by navigator.gpu.wgslLanguageFeatures.size indicates the number of WGSL language features supported in the current web environment. For example, my Windows computer returns 4, and my Mac laptop also returns 4. Some older GPUs may not support all 4 features.

However, this API… well, let’s just say it’s a bit different from what you might expect. What it actually checks is whether the browser supports WebGPU and whether an adapter can be invoked to use WebGL and other features.

Looking at compatibility, hey, the latest Safari and Firefox already support it — quite a coincidence!

Device Battery Status Detection

let batteryIsCharging = false;

navigator.getBattery().then((battery) => {
  console.log(battery.level);
  batteryIsCharging = battery.charging;
  battery.addEventListener("chargingchange", () => {
    batteryIsCharging = battery.charging;
  });
});

With the above code, we can retrieve the current battery status of the device, as well as whether it is charging.

For example, on a PC that’s plugged into power and doesn’t have a battery, the battery level will always be 1 as long as the device is running. But it’s different for a portable laptop.

Based on this, we can display a custom battery progress bar, a charging animation, or interactive low battery notifications (e.g., turning off unnecessary animations to help users conserve power).

This API is closely tied to the user experience. As for compatibility, let me check, and here’s the result:

It’s a bit disappointing that only the Chrome browser supports this. No wonder there is so little discussion about this API in the community.

Moreover, based on when Chrome started supporting it, there seems to be no sign of Safari supporting it in the near future.

Such a great API, but for now, it can only be used as a toy.

Identification of Other Hardware and Devices

The navigator object also provides many other hardware identification features, such as Bluetooth, virtual keyboards, USB devices, external cameras, and online/offline status (navigator.onLine), among others.

Due to space limitations, I won’t demonstrate them all. If you’re interested, you can refer to the relevant documentation.

As long as you’re aware of this capability in the web, that’s enough for similar scenarios.