I am building a JS REPL web application (similar to http://jsfiddle.net/ ), but I am really annoyed to switch between the Chrome Developer Console and my own debugging code. I have a text area on the left (using the wonderful Ace Editor ), and clicking the preview button loads another window into the iframe on the right using the code I edited. This made me think: that if I could add breakpoints to my code editor in a browser window, and when it hits a breakpoint, I could see the state of the variables, go through the code and delete the breakpoints while still editing the code in the editor . Very similar to real debugging, but in the browser instead of an editor such as Eclipse.
I think the Chrome extension is the right way. I can make calls to the debugger using the debugger API , then add breakpoints, exit, exit, etc. using this protocol . This works fine, and I can even get the current state of the variables when I hit the breakpoint with Runtime.getProperties .
The problem is that ... that after pausing the code for debugging, everything on the whole page freezes (of course, because I'm debugging). Can anyone think of a way around this? An ideal solution would allow me to freeze and debug the result on the right in the iframe and still control the code on the left.
source share