Skip to content

Instantly share code, notes, and snippets.

@mrpapercut
Last active November 19, 2016 19:17
Show Gist options
  • Save mrpapercut/7a004210306b62dcf813 to your computer and use it in GitHub Desktop.
Save mrpapercut/7a004210306b62dcf813 to your computer and use it in GitHub Desktop.
Google Chrome 49 removed the Viewport Helper, an indicator that shows the dimensions of the current window. Especially useful when developing a responsive website
(() => {
const vpd = document.createElement('div'),
st = {
'position': 'fixed',
'right': '0',
'top': '0',
'border': '5px solid #ccc',
'background': '#ccc',
'font-family': 'Arial',
'font-size': '13px',
'box-shadow': '0px 1px 2px',
'z-index': '999999'
},
getD = () => {const {clientWidth, clientHeight} = document.documentElement; vpd.innerHTML = [clientWidth, clientHeight].map(c => c+'px').join(' × ')};
for(var i in st) {
vpd.style[i] = st[i]
}
getD();
document.body.appendChild(vpd);
window.addEventListener('resize', getD);
let {left, right, top, bottom} = vpd.getBoundingClientRect();
window.addEventListener('mousemove', ({clientX, clientY}) => {
if (clientX > left && clientX < right && clientY > top && clientY < bottom) {
vpd.style.top = 'auto';
vpd.style.bottom = '0px';
} else {
vpd.style.top = '0px';
vpd.style.bottom = 'auto';
}
})
})();
@Yaroslavoff
Copy link

Great thanks man!
I use it every day and was unpleasantly surprised when after update I'm not find it again.
PS: I find that It's still showing in Opera (WebKit/Chromium versions). Nevertheless Chrome is my primary browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment