Skip to content

[SUGGESTION] External JS-driven debugger backend for Brython (pause/continue/step from JavaScript) #2654

@shlomil

Description

@shlomil

I’ve been doing some experiments recently that led me to prototype an external debugger frontend that controls Brython execution from JavaScript (With the help of Cursor and some free time for vibe-coding).

The idea is to have a generator-function based debugging backend in Brython which can be driven entirely from JS:
A diff of a prototype implementation is attached.

external_debugger.patch

It expose a small JS API like:

  • __BRYTHON__.pause()
  • __BRYTHON__.continue()
  • __BRYTHON__.step()
  • __BRYTHON__.setBreakpoint(module_id, line_no)
  • __BRYTHON__.debug_status()
  • Preserve state (locals, control flow, stack) across pauses via the generator.
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="brython.js"> </script>
    <script type="text/javascript" src="brython_stdlib.js"> </script>
</head>

<body>
<pre>
    <script type="text/javascript">
         __BRYTHON__.pause();
         __BRYTHON__.runPythonSource(`
from browser import document, console
console.log("continue1");
console.log("continue2");
console.log("continue3");
console.log("continue4");
console.log("continue5");
console.log("continue6");
console.log("continue7");
console.log("continue8");
console.log("continue9");
console.log("continue10");
`);
        console.log("pause before execution", __BRYTHON__.debug_status());   
        __BRYTHON__.setBreakpoint(__BRYTHON__.debug_status().module_id, 5);
        __BRYTHON__.continue();
        console.log("paused after breakpoint reached", __BRYTHON__.debug_status());   
        __BRYTHON__.step()
        console.log("pause after step", __BRYTHON__.debug_status());   
        __BRYTHON__.continue();
        console.log("done", __BRYTHON__.debug_status());   
    </script>

</body>
</html>

Actual browser console output of the above:

test.html:27 pause before execution {status: 'paused', module_id: 'python_script_741023741735828', line_no: 2}
brython.js:11057 continue1
brython.js:11057 continue2
test.html:30 paused after breakpoint reached {status: 'paused', module_id: 'python_script_741023741735828', line_no: 5}
brython.js:11057 continue3
test.html:32 pause after step {status: 'paused', module_id: 'python_script_741023741735828', line_no: 6}
brython.js:11057 continue4
brython.js:11057 continue5
brython.js:11057 continue6
brython.js:11057 continue7
brython.js:11057 continue8
brython.js:11057 continue9
brython.js:11057 continue10
test.html:34 done {status: 'idle', module_id: 'python_script_741023741735828', line_no: 12}

Correct me if I'm wrong but I don't think that such functionality is achievable using Pdb.
I guess an extensive change as such might break a lot of stuff in Brython but I have a feeling it might become very useful for online Brython IDEs.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions