start . me .
Directory path . web , gh , sbul .

HTML Document File : inspect.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>inspect program using step-by-step</title>
</head>

<body>

    <div>inspect program using step-by-step (prototyping).</div>

    <button onclick="location.reload()">reload this</button>
    <pre id="stdout"></pre>

    <script>

        function console_write(...parameters) {
            console.log(...parameters)
            var text = parameters.join("|")
            stdout.textContent += text
        }

        function progression_step(step) {
            console_write("step", step + "\n")
        }

        var current_step = 0
        var steps = [1, 2, 3, 4, 5]

        function next_step() {
            setTimeout(step_of_while, 0)
        }

        function step_of_while() {
            if (current_step >= steps.length) return

            var step = steps[current_step]

            progression_step(step)

            current_step++

            if (current_step >= steps.length) return

            var stop_at_every_step = document.all.UI_stop_at_every_step.checked
            var current_is_breakpoint = document.all.UI_breakpoints_list.value.split(",").indexOf(current_step.toString()) != -1
            if (stop_at_every_step == false && current_is_breakpoint == false)
                next_step()
        }

    </script>

    <label> <input type="checkbox" id="UI_stop_at_every_step">stop at every step</label>
    <button onclick="next_step()">next step</button>
    <input type="text" value="2,4" id="UI_breakpoints_list">

</body>

</html>