Chrome snippets

h-scroll.js

// Detect elements that add horizontal scroll to the page

docWidth = document.documentElement.offsetWidth

Array.from(document.getElementsByTagName("*")).filter(el => {
    const rect = el.getBoundingClientRect()

    return rect.right > docWidth || rect.left < 0
})

ruler.js

let svg = document.createElementNS ('http://www.w3.org/2000/svg',"svg")
svg.setAttribute("style", "position: absolute; top:0; left:0; height: 100vh; width: 100%")

let rect = document.createElementNS('http://www.w3.org/2000/svg','rect')
rect.setAttribute("style", "stroke-width: 1; stroke: red; fill: none;")

let text = document.createElement('div')
text.style = `position: absolute; user-select:none; text-align: left;`

svg.appendChild(rect);
document.body.appendChild(text);
document.body.appendChild(svg)

let fromX = null
let fromY =  null

document.body.addEventListener("mousedown", function (e) {
    fromX = e.pageX
    fromY = e.pageY
})

document.body.addEventListener("mousemove", function (e) {
    if (fromX === null) {
        return
    }

    let x1 = fromX
    let x2 = e.pageX
    let y1 = fromY
    let y2 = e.pageY
    let w = Math.abs(x2 - x1)
    let h = Math.abs(y2 - y1)   

    let distance = {
        h: Math.abs(x2 - x1),
        v: Math.abs(y2 - y1),
        d: Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)).toFixed(1)
    }

    text.innerHTML = `
        h: ${distance.h}<br/>
        v: ${distance.v}<br/>
        d: ${distance.d}
    `

    text.style.left = x2 + 'px'
    text.style.top  = y2 + 'px'

    if(x1 > x2) {
        [x1, x2] = [x2, x1]
    }

    if(y1 > y2) {
        [y1, y2] = [y2, y1]
    }

    rect.setAttribute("x", x1)
    rect.setAttribute("y", y1)
    rect.setAttribute("width", w)
    rect.setAttribute("height", h)

    console.log(distance)
})

document.body.addEventListener("mouseup", function (e) {
    fromX = null
    fromY = null
});

z-index.js

// Visualize the z-index of the elements

function contrast(color) {
    return '#' +
        (Number('0x' + color.substr(1)).toString(10) > 0xffffff / 2 ? '000000' : 'ffffff')
}

function htmlToElement(html) {
    const template = document.createElement('template')
    template.innerHTML = html
    return template.content.firstChild
}

function getStyle(elem, prop) {
    return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop)
}

Array.from(document.querySelectorAll('*'))
    .filter((elem) => {
        return getStyle(elem, 'z-index') !== 'auto'
    }).forEach((elem) => {
    const color = '#' + Math.floor(Math.random() * 16777215).toString(16)
    const zIndex = getStyle(elem, 'z-index')

    elem.style.outline = '1px solid ' + color
    const a = htmlToElement('<span>z-index: ' + zIndex + '</span>')
    a.style = `background: ${color}; color: ${contrast(color)};position: absolute;top:0;left:0;textIndent:0`
    elem.append(a)
})