Check Your Browser & Device Information View detailed browser, device, and system information including hardware specs and network status.

The tool works by accessing various browser APIs to gather system information. It uses the Navigator API to read properties such as userAgent, platform, language, hardwareConcurrency, deviceMemory, and maxTouchPoints. Additionally, it utilizes the Screen and Window objects to obtain details like screen width, height, color depth, orientation, inner window width, inner window height, and device pixel ratio. The Network Information API is also used to retrieve connection type, downlink speed, and latency data. To handle cases where certain APIs are not supported by the browser, optional chaining is employed to prevent errors. The detectBrowser function parses the userAgent string to identify the browser type, while the detectOS function does the same for the operating system. WebGL capabilities are detected by creating a canvas element and attempting to get a WebGL context. If successful, it retrieves the renderer information using the WEBGL_debug_renderer_info extension.

The gathered data is stored in a SystemInfo object, which contains properties like userAgent, platform, language, cookiesEnabled, doNotTrack, onLine, hardwareConcurrency, deviceMemory, maxTouchPoints, screenWidth, screenHeight, viewportWidth, viewportHeight, devicePixelRatio, colorDepth, orientation, timezone, timezoneOffset, connection, browser, os, isMobile, and webGL. This object is then used to populate a series of sections that display the system information in a readable format. The tool uses React's useState hook to manage the state of the SystemInfo object and the copied status of the text. When the user clicks the copy button, it constructs a text string containing all the system information, including section titles and labels, and writes it to the clipboard using the navigator.clipboard.writeText method.

The connection data is obtained from the Network Information API, which provides details about the user's network connection, such as the effective type, downlink speed, and latency. The tool also checks for the presence of certain APIs before attempting to access them, using optional chaining to prevent errors. For example, it checks if the 'connection' property exists in the navigator object before trying to access its properties. This approach ensures that the tool can handle different browser implementations and versions without encountering errors. The use of Intl.DateTimeFormat to get the timezone and Date.getTimezoneOffset to calculate the UTC offset allows for accurate determination of the user's location and time zone.