quickly-measure-screen.html

<style>
    .measurement-container {
        position: fixed;
        z-index: 999;
        top: 30px;
        left: 30px;
        background: white;
        padding: 15px;
        border: 10px solid wheat;
    }
</style>
<div class="measurement-container">
    <p>hello</p>
</div>
<script>

    const heightContainer = document.querySelector('.measurement-container');

    function displayHeights(){
        const innerHeight = window.innerHeight;
        const outerHeight = window.outerHeight;
        const boundingClientHeight = document.body.getBoundingClientRect().height;
        const screenHeight = window.screen.height;
        const screenAvailableHeight = window.screen.availHeight;

        const measurements = `
            <table>
                <tr><td>innerHeight</td><td>${innerHeight}</td></tr>
                <tr><td>outerHeight</td><td>${outerHeight}</td></tr>
            </table>
        `
      heightContainer.innerHTML = measurements;
    }

    displayHeights();

    window.addEventListener('scroll', displayHeights);
    window.addEventListener('resize', displayHeights);
</script>