How to use chrome devtools to debug javascript running in a custom VM?

[tpadi...@gmail.com]

I've asked the question on stackoverflow (feel free to answer there).

In a few words: I want to use chrome developer tools to debug code running in a VM implemented in javascript which is itself being executed in a normal webpage. The VM has simple methods for reporting line number changes , pausing/resuming the script and inspecting locals, so I would probably need to control the devtools debugger from javascript Can something like this be easily done?

Thanks in advance

[Yury Semikhatsky]

Chrome DevTools communicate to the inspected page over the remote debugging protocol[1] which is defined in protocol.js [2]. In order to reuse DevTools front-end to debug your own JS VM you can support part of this protocol (namely Debugger domain) in the VM and expose it over a websocket. The front-end then should be able to connect to it as if it were a regular Chrome tab. You can look at node-inspector [3] which implemented similar thing for Node.js

[1] https://developers.google.com/chrome-developer-tools/docs/debugger-protocol

[2] https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/protocol.json&q=file:protocol.js&sq=package:chromium&type=cs

[3] http://blog.strongloop.com/announcing-a-new-and-improved-node-js-debugger/

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Thiago Padilha]

Yury

So this is how a chrome debugging session works:

- I press f12 in a webpage
- Chrome opens a new frame(with a separate v8 instance), loads the devtools html/css/javascript into it

- The devtools instance connects with the host google chrome, which will in turn emit events from the webpage to the debugger, and send debugger commands to the webpage and its v8 instance

Now lets say I implement the debugger protocol on the custom vm, which will be running inside a normal chrome tab. How can I open a websocket server from inside that tab so that a remote devtools can access it? Do I need to write a custom chrome extension that exposes some websocker server API to javascript running inside a chrome tab?(If thats even possible)

Thanks for your response

[Yury Semikhatsky]

On Fri, Aug 16, 2013 at 5:06 PM, Thiago Padilha <tpadi...@gmail.com> wrote:

Yury

So this is how a chrome debugging session works:

- I press f12 in a webpage
- Chrome opens a new frame(with a separate v8 instance), loads the devtools html/css/javascript into it

- The devtools instance connects with the host google chrome, which will in turn emit events from the webpage to the debugger, and send debugger commands to the webpage and its v8 instance

Now lets say I implement the debugger protocol on the custom vm, which will be running inside a normal chrome tab. How can I open a websocket server from inside that tab so that a remote devtools can access it? Do I need to write a custom chrome extension that exposes some websocker server API to javascript running inside a chrome tab?(If thats even possible)

Yes, you would need to find a way to create a websocket server in the browser. Not sure how feasible it is using the extension API, probably implementing a part in NaCl could help.

[Thiago Padilha]

I'm gonna dig more info about extending chrome. Thanks for your help.

[Timothée Boucher]

Now lets say I implement the debugger protocol on the custom vm, which will be running inside a normal chrome tab. How can I open a websocket server from inside that tab so that a remote devtools can access it? Do I need to write a custom chrome extension that exposes some websocker server API to javascript running inside a chrome tab?(If thats even possible)

Yes, you would need to find a way to create a websocket server in the browser. Not sure how feasible it is using the extension API, probably implementing a part in NaCl could help.

One way that was mentioned to me on StackOverflow recently would be to use Native Messaging: http://developer.chrome.com/extensions/messaging.html#native-messaging

You'd still need a Chrome extension and it would run the websocket server as a separate native script and communicate back-and-forth between that script and your extension. It adds a level of complexity since your extension now needs to talk to a script that then talks to the remote devtools through websockets. However, it would likely be easier to implement since you could just run any existing websocket implementation. (e.g. in node)

Tim