npm install rdmkit-mzr --save-dev

This will install MZR as a devDependency.

Quick setup

import mzr from "rdmkit-mzr";
mzr();

This will get you going, but you will have to comment it out or remove it for production builds. Unless, you want it in your build code.

Conditional setup

if (process.env.NODE_ENV === "development") {
  var mzr = require("rdmkit-mzr");
  mzr();
}

If you are using environment variables, this will only enable MZR while in development. It will not be included in the build. If you happen to use ParcelJS process.env.NODE_ENV === "development" is set for you on all non-build runs. And it will also set process.env.NODE_ENV === "production" when you do build. Super handy.

Usage

Pick any element in your web page and give it a data attribute of data-mzr="". Assign this attribute any number. You can assign multiple numbers separated by a `/` to indicate multiple character counts in one line of text. Peep the example below.

<p data-mzr="35/55/75">Cardinals arch gooey butter cake south grand muny nelly mississippi river, CWE barnes-jewish hospital toasted ravioli anheuser-busch neon sign. Lindbergh St. Louis science center and zoo turtle park soulard bowling riverfront times. Delmar loop blueberry hill tivoli COCA moonrise hotel RAC answers.com washington university forest park spanish pavilion art hill.</p>

Output

Cardinals arch gooey butter cake south grand muny nelly mississippi river, CWE barnes-jewish hospital toasted ravioli anheuser-busch neon sign. Lindbergh St. Louis science center and zoo turtle park soulard bowling riverfront times. Delmar loop blueberry hill tivoli COCA moonrise hotel RAC answers.com washington university forest park spanish pavilion art hill.

Above, the first 35 characters have been highlighted in magenta. The magenta and yellow highlighted characters show the first 55 characters. The magenta, yellow and green highlighted characters show the first 75 characters. Everything in blue is outside the bounds of the top limit specified.

I usaully put this on a main paragraph at the beginning of developing a site. It helps me visualize multiple line-lengths at once. If I have to define columns with px then the colors help me locate the desired characters-per-line while I use the inspector to adjust the column width. And even after that is done MZR helps me to visualize my breakpoints without having to reduce the window's width.