I run an after-school coding club for kids who are learning to build their own projects using HTML, CSS, and Javasccript. We are using a browser-based IDE called theia.
A large number of those kids are using school-issued Chromebooks, which unfortunately have developer tools disabled. This is enforced at the district level and is not something they are willing to change (apparently it allows students to cheat on certain testing sites). Being on Chromebooks means students also cannot launch Chrome with --remote-debugging-port.
I'm looking for potential alternatives that will allow students to do any of the following:
- Inspect element to see:
- underlying DOM element
- applied CSS rules
- box model properties
- View javascript console error messages and stack trace
- Interact with the console as a REPL (with access to window scope)
- Debug scripts with step-in, step-out, step-over, etc.
I have full control over the IDE and can build extensions on top of it, so I'm hoping to find something I can integrate.
I found a cool proof-of-concept javascript step debugger, but it's not actively developed, and is only intended for use with small example scripts. It works by compiling the js code into something that can be controlled with a state machine. Does anyone know of anything else that's similar?
I'm also wondering if there's a possible way to plug into a headless instance of chrome running on the IDE server (which is running in a docker container), but I'm not sure what that would involve.