{"id":18729431,"url":"https://github.com/alexwkleung/log-browser-resolution-js","last_synced_at":"2025-08-01T17:06:59.686Z","repository":{"id":155670077,"uuid":"526818184","full_name":"alexwkleung/log-browser-resolution-js","owner":"alexwkleung","description":"A script to log your browser resolution in the console","archived":false,"fork":false,"pushed_at":"2022-08-20T05:14:27.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T21:08:27.423Z","etag":null,"topics":["console-log","developer-tools","javascript","logging"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexwkleung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-20T03:48:25.000Z","updated_at":"2022-11-15T01:14:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"62b0ab2d-3233-4f99-96d9-ada44c8a77b4","html_url":"https://github.com/alexwkleung/log-browser-resolution-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexwkleung/log-browser-resolution-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwkleung%2Flog-browser-resolution-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwkleung%2Flog-browser-resolution-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwkleung%2Flog-browser-resolution-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwkleung%2Flog-browser-resolution-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexwkleung","download_url":"https://codeload.github.com/alexwkleung/log-browser-resolution-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexwkleung%2Flog-browser-resolution-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268265824,"owners_count":24222524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["console-log","developer-tools","javascript","logging"],"created_at":"2024-11-07T14:27:10.439Z","updated_at":"2025-08-01T17:06:59.624Z","avatar_url":"https://github.com/alexwkleung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# log-browser-resolution-js\n\nA 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.\n\nNote: 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.\n\n# Example Setup\n\n1) Clone the repository and add the script to your project folder. Then add the path of the script within the script tag. i.e.,\n\n```html\n\u003cscript src=\"../scripts/log-browser-res.js\"\u003e\u003c/script\u003e\n```\n\n- You can inline the script if you don't want to download it. i.e.,\n\n```html\n\u003cscript\u003e\n    //log initial window resolution \n    console.log(\"Initial window resolution: \" + window.outerWidth + \" x \" + window.outerHeight);\n\n    //log window resolution on resize\n    window.onresize = () =\u003e {\n        const winWidth = window.outerWidth;\n        const winHeight = window.outerHeight;\n\n        console.clear(); //prevent logs from being spammed\n        console.log(\"Current window resolution: \" + winWidth + \" x \" + winHeight);\n    }\n\u003c/script\u003e\n```\n\n- 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.,\n\n```tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\n\n//log initial window resolution \nconsole.log(\"Initial window resolution: \" + window.outerWidth + \" x \" + window.outerHeight);\n\n//log window resolution on resize\nwindow.onresize = (): void =\u003e {\n    const winWidth = window.outerWidth;\n    const winHeight = window.outerHeight;\n\n    console.clear(); //prevent logs from being spammed\n    console.log(\"Current window resolution: \" + winWidth + \" x \" + winHeight);\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n\nroot.render(\n    \u003cReact.StrictMode\u003e\n        \u003cApp\u003e\u003c/App\u003e\n    \u003c/React.StrictMode\u003e\n);\n```\n\n2) Run the dev server or build tool for your app/project.\n\n3) Open the dev console in your browser.\n\n4) You will see the initial resolution of your browser window logged.\n\n5) When you resize the browser window, it will log the current resolution.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexwkleung%2Flog-browser-resolution-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexwkleung%2Flog-browser-resolution-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexwkleung%2Flog-browser-resolution-js/lists"}