StringDevInview

StringDevInview is a global dev-tool. It watches every tracked element on the page and draws three diagnostic layers for the elements and trigger points that are currently relevant on screen:

1. A dashed outline around each element, so you see exactly which boxes the runtime tracks.
2. A pair of trigger markers for the enter and exit positions, labeled with the best available target label.
3. A badge in the top-left corner of the element with two controls: toggle the element's in-view state, and show/hide this element's Inview overlay for that target.

It is the fastest way to see why something animates at a certain scroll position — or why it does not.

When to use it

• Tuning the enter/exit viewport and element attributes.
• Debugging off-by-one scroll activations near the top or bottom of the page.
• Confirming that a card you expect to be "in view" actually receives its in-view styling.
• Comparing trigger geometry across a long list of cards as you scroll through them.

How to enable

• StringDevInview is part of the early-access dev-tools set. Before registering it, configure a valid accessDevtoolToken as shown in Developer Tools Overview.
• Register: stringTune.use(StringDevInview)
• Hotkey: Shift+I
• Dock: click the intersection icon

Minimal setup:

stringTune.use(StringDevInview);

The tool is active by default once registered, so you will see outlines on every element immediately. Press Shift+I to toggle it off if it is in the way.

What you will see

• Outline. A dashed rectangle hugging the element's layout box. Turns solid when the element is currently in view.
• Enter marker. A pill on the element's leading edge labeled with the target label and a direction arrow into the viewport anchor (top or bottom).
• Exit marker. A pill on the trailing edge labeled the same way for the exit anchor.
• Connectors. Thin lines linking each marker to the element's matching edge.
• Top-left badge. An eye icon to toggle the element's in-view state; an offsets icon to hide this element's Inview overlay for that target.

Markers flip when they would overflow the document bounds, and their horizontal anchor is clamped for readability inside the viewport.

Interactions

Toggle in-view manually

Click the eye badge to add or remove the in-view state on the element, bypassing the runtime's automatic logic. Useful for previewing the "in view" visual style without scrolling.

• If the element is currently in view, clicking the badge blocks the automatic state and removes it.
• If the element is out of view, clicking the badge forces the state on until you click again.

The manual block stays on the element itself, so scrolling or re-entering the viewport does not undo it.

Drag a marker

Markers are draggable horizontally along the element's edge. Dragging:

• Repositions only the visual marker label, not the underlying trigger point.
• Is clamped to keep the marker inside the viewport.
• Is remembered across reloads.

This is purely a readability aid — move markers out of the way of your content so they do not overlap important UI.

Hide one element's markers

Click the offsets badge to hide this element's Inview overlay for that target. In practice, that hides the outline and the enter/exit marker UI for this target. Your choice is remembered across reloads.

Hide all offsets from the dock

StringDevInview also exposes a dock sub-control that hides all currently enabled Inview overlays in one action. Useful when the page is too noisy and you want a fast reset without disabling the whole tool.

What it attaches to

StringDevInview is global: it attaches to every tracked element on the page without any extra dev-tool attribute. If an element has no explicit enter/exit configuration, its markers fall back to the runtime defaults. Off-screen elements are still tracked by the runtime, but their overlay UI is only drawn when the module has enough visible geometry or trigger information to render something useful.

Practical debugging workflow

Use StringDevInview as the first check when a scroll-driven effect feels wrong.

1. Turn on the overlay and confirm the element outline matches the box you expect.
2. Check whether the enter and exit markers are attached to the correct element edges.
3. If the markers are correct but the animation still feels wrong, add StringDevProgress to scrub the same element manually.
4. If several cards overlap visually, hide Inview overlays on the noisy ones and keep the tool active on the targets you still care about.

This keeps the tool focused on geometry first, then hands off to the more specific dev-tool for value tuning.

Registration

import StringTune, { StringDevInview } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

if (import.meta.env.DEV) {
  stringTune.use(StringDevInview);
}

stringTune.start(60);

Related

• Offsets — the geometry model Inview visualizes.
• StringProgress — the runtime module whose enter/exit you are usually tuning.
• StringDevProgress — pairs well with Inview when you want to scrub a specific progress-driven element.
• Developer Tools Overview.