Display Current Window Size And Cursor Position With jQuery - Debug Window

A jQuery plugin that creates a tiny debug window on the webpage to show the current viewport size (width/height) and cursor position.

How to use it:

1. Download and include the JavaScript file jquery.debug-window.js after the latest version of jQuery.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.debug-window.js"></script>

2. Invoke the plugin with default settings and done.

$('body').debugWindow();

3. The default HTML template for the debug window.

$('body').debugWindow({
  debugHtml:
    '<div class="mouse-position">' +
        '<strong>Mouse: </strong>' +
        'x<span class="x">' + mouseX + '</span>, ' +
        'y<span class="y">' + mouseY + '</span>' +
    '</div>' +
    '<hr>' +
    '<div class="window-dim">' +
        '<strong>Window </strong>' +
        '<ul>' +
            '<li class="window-width">' +
                '<strong>Width: </strong>' +
                '<span class="width">' + windowWidth + '</span>px' +
            '</li>' +
            '<li class="window-height">' +
                '<strong>Height: </strong>' +
                '<span class="height">' + windowHeight + '</span>px' +
            '</li>' +
        '</ul>' +
    '</div>'
});

4. Let's start to style the debug window.

#debug-window {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #fff;
  border: 1px solid #888;
  min-width: 100px;
  min-height: 50px;
  padding: 10px;
  font-family: sans-serif;
  font-size: 11px;
  line-height: 15px;
  text-align: left;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5)
}

#debug-window ul {
  padding-left: 20px;
  list-style: disc
}

---

This awesome jQuery plugin is developed by brandontrowe. For more Advanced Usages, please check the demo page or visit the official website.