Regex Visual Debugger

🎬

Full Feature Demo

Complete Workflow

📸

Screenshots

1 / 7

Click 「Parse」 to parse the regex without performing match inference — total steps = 0.

Click 「Debug」 to parse the regex and match against the input string, inferring all matches and displaying the total step count.

1. Right‑click on the graph and select 「Visualization Solo」 to open a separate window showing the visualization graph.
2. Select 「Pattern Solo」 to open a separate window showing the regex text.
3. You can choose to view only the matching process of the first match.

Drag the slider to see the matching process in real time on both the Regex Text and the Visualization Graph. Stop dragging to view all captured group information.

Hover over a right parenthesis, then select 「Add Structure Anchor」 from the context menu to create a slider that only includes matching steps executed on that specific right parenthesis.

Hover over a right parenthesis, check 「With Condition」, then select 「Add Structure Anchor」 from the context menu —
this filters matching steps executed on that right parenthesis based on the condition and creates a slider.

Double‑click on a visualization node to edit its content inline.

🖥️

Feature

Multi‑Screen Debugging

Right‑click on the visualization to open the context menu, then click 「Visualization Solo」 and 「Pattern Solo」 to open new windows that display the visualization graph and the regex text separately, making it easier to debug complex regular expressions.

✏️

Feature

In‑Place Editing

Double‑click on any node in the visualization graph to edit its content directly — the corresponding part of the regular expression is updated instantly.

🔴

Feature

Breakpoints · Conditional

Right‑click on the visualization to open the context menu, then click 「Anchor」 to add anchor sliders that match specific conditions.

Unit Anchor — selects all steps of the corresponding unit
Structure Anchor — selects all steps of the corresponding structure (for group constructs like (?=), left and right parentheses belong to the same unit; choosing different structures can distinguish them)
Anchor — filters steps that match the condition across all steps

💡 Place 全功能演示_en.gif , 多屏调试演示_en.gif , 编辑演示_en.gif , 条件断点演示_en.gif and 1_en.png ~ 7_en.png in the same folder as this HTML file.