https://github.com/alexwkleung/log-browser-resolution-js
A script to log your browser resolution in the console
https://github.com/alexwkleung/log-browser-resolution-js
console-log developer-tools javascript logging
Last synced: 11 months ago
JSON representation
A script to log your browser resolution in the console
- Host: GitHub
- URL: https://github.com/alexwkleung/log-browser-resolution-js
- Owner: alexwkleung
- License: mit
- Created: 2022-08-20T03:48:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-20T05:14:27.000Z (almost 4 years ago)
- Last Synced: 2025-05-19T21:08:27.423Z (about 1 year ago)
- Topics: console-log, developer-tools, javascript, logging
- Language: JavaScript
- Homepage:
- Size: 1.95 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# log-browser-resolution-js
A simple vanilla script to log your browser resolution in the console. This can be helpful during development when you don't want to second guess the browsers' resolution when you need it for a specific task.
Note: You may notice a performance decrease or a bit of stutter when you resize the window with the script since it constantly calculates the resolution dynamically. It's not the most optimal but it works.
# Example Setup
1) Clone the repository and add the script to your project folder. Then add the path of the script within the script tag. i.e.,
```html
```
- You can inline the script if you don't want to download it. i.e.,
```html
//log initial window resolution
console.log("Initial window resolution: " + window.outerWidth + " x " + window.outerHeight);
//log window resolution on resize
window.onresize = () => {
const winWidth = window.outerWidth;
const winHeight = window.outerHeight;
console.clear(); //prevent logs from being spammed
console.log("Current window resolution: " + winWidth + " x " + winHeight);
}
```
- If you're using a framework such as React, you can add it to the file where the main root render is located. i.e.,
```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
//log initial window resolution
console.log("Initial window resolution: " + window.outerWidth + " x " + window.outerHeight);
//log window resolution on resize
window.onresize = (): void => {
const winWidth = window.outerWidth;
const winHeight = window.outerHeight;
console.clear(); //prevent logs from being spammed
console.log("Current window resolution: " + winWidth + " x " + winHeight);
}
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
);
```
2) Run the dev server or build tool for your app/project.
3) Open the dev console in your browser.
4) You will see the initial resolution of your browser window logged.
5) When you resize the browser window, it will log the current resolution.