The bar
The floating bar's buttons, from Inspect to Turn off, and the key for each.
The floating bar is how you switch tools. Every button has a tooltip with its key. From left to right:
| Button | What it does | Read more |
|---|---|---|
| Inspect 1 | Box model on hover, select, measure | Inspecting |
| Rulers 2 | Page rulers, crosshair and guides | Rulers and guides |
| Live edit | Change the selection's styles and text with controls, on the page | Live edit |
| Annotate the page | Draw on the page itself, then capture it | Annotate the page |
| Breakpoints B | Draw the widths the page's media queries switch at | Breakpoints |
| Parent, Child | Select the parent or first child of the selection (the same as Alt⌥+Shift⇧+↑ and Alt⌥+Shift⇧+↓) | Selecting |
| Capture | Screenshot an element, an area or the visible page | Capture |
| Pause P | Hand the page back to you; press again to resume | Pause |
| Side panel | Open or close the side panel | Side panel |
| Open in a window | Show the side panel's content in its own window | Own window |
| More | The tools and settings listed below | Below |
| Hide the bar | Slide the bar off its edge, leaving a small tab there; the tab brings it back. Your tools and keys keep working | Below |
| Turn off Esc | Turn Nitpique off on this tab | Turn it off |
In the More menu, by default:
| Button | What it does | Read more |
|---|---|---|
| Colour 3 | The colour picker and its loupe | Colour picker |
| Pixel edges E | Measure shapes and gaps from the pixels | Pixel edges |
| Text edges T | Measure text from its glyphs | Text edges |
| X-Ray X | Outline every element in view | X-Ray |
| Layout grid G | Lay a column grid over the page | Layout grid |
| Unit U | Choose px, rem, em, %, vw, vh or device pixels | Units |
| Move the bar | Pick one of eight spots, or drag the button anywhere | Below |
| Settings | Open Nitpique's settings in the side panel | Settings |
What can be on together
- Overlays combine with anything: rulers, text edges, X-Ray, the layout grid and breakpoint lines.
- Modes take the pointer, so one runs at a time: Inspect, the colour picker, pixel edges and Annotate the page. Choosing one ends the other.
- Live edit runs on Inspect. The colour picker, pixel edges and Annotate end it.
- While paused, choosing a mode resumes. Turning Nitpique off turns everything off, and it starts fresh next time.
The bar stays where you put it. It never moves by itself. You can reorder it, and choose what sits in More, in Customize.
Questions
Where are Text edges, X-Ray, Layout grid and Breakpoints?
In the bar's More menu, each with its own key: T, X, G and B.
Can I move or rearrange the bar?
Yes. Pick one of eight spots or drag it anywhere; it never moves by itself. Reorder it and choose what sits in More in Customize.