Log out Bootstrap (v4) breakpoint changes (add as a snippet in Google Chrome/Chromium and then run)

bootstrap-breakpoint-logger.js

function getResponseBreakpoint() {
    const breakpoints = ['xl', 'lg', 'md', 'sm'];

    return breakpoints.find((breakpoint) => {
        const div = document.createElement("div");

        div.classList.add("d-none", `d-${breakpoint}-block`);

        document.body.appendChild(div);

        const style = window.getComputedStyle(div);

        const visible = style.display !== "none";

        document.body.removeChild(div);

        return visible;
    }) || "xs";
}

let currentBreakpoint = getResponseBreakpoint();

console.info(`[bootstrap] current breakpoint = ${currentBreakpoint}`);

window.addEventListener("resize", () => {
    const newBreakpoint = getResponseBreakpoint()

    if (newBreakpoint !== currentBreakpoint) {
        console.info(`[bootstrap] breakpoint changed = ${newBreakpoint}`);
        currentBreakpoint = newBreakpoint;
    }
});