[Plugin] ChromeTools - Javascript debugging, code eval etc

[Dave Coates]

Hi all,

ChromeTools provides a connection that uses the chrome remote debugging protocol to do live code evaluation, set watches and interact with the Chrome debugger. This can work a lot better than the browser script option as it actually tries to patch the existing code rather than just evaluating it again in global context (which means changes to code within anonymous functions can be changed and reflected without refreshing - particularly useful for CoffeeScript given it always wraps everything in a closure and every function is anonymous).

In terms of the debugger you can 

- Set / remove breakpoints

- Normal debugger controls (pause, resume, step into / out / over)

- View stack trace

- View variables in current call frame

- Evaluate code on current call frame (uses whatever language your file is in - currently either Javascript or CoffeeScript)

- Supports source mapped files (currently just CoffeeScript)

In some cases evaluating code in LightTable doesn't really work well (or at all) due to preprocessors used (eg. SASS, Browserify etc). In these cases you can watch a directory with the generated files and any Javascript or CSS files that change within that directory will be sent in their entirety to Chrome. For CSS files it will try to remove the existing stylesheet and replace it, for Javascript it will try to replace the existing source (using Debugger.setScriptSource). I have mainly been using this for projects using Browserify and it works... mostly - for one particularly large project it often crashes the Chrome tab.

A few issues I'm aware of currently

- It sometimes seems to slow LightTable right down - it seems that Chrome sometimes starts sending lots of events through. I haven't worked this out yet and it doesn't always happen.

- Setting breakpoints often seems to be slightly inaccurate, particularly from source mapped files

Brief screencast of functionality: http://screencast.com/t/dnxcV2kgCeJX

You can get it from the plugin manager or the source is at https://github.com/davecoates/lt-chrometools.

Any feedback, bug reports etc welcome.

Cheers!

Dave

[Chris Granger]

nicely done! We actually use this same mechanism for the internal browser :)

Cheers,
Chris.

--
You received this message because you are subscribed to the Google Groups "Light Table Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to light-table-discu...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Dave Coates]

Thanks! Yeah I based a lot of this off the internal browser - the inspector is pretty much a copy from devtools.cljs with some minor changes.

Did you have any issues with lots of events coming through? In particular it seems to occasionally spam scriptParsed events that have no URL and don't seem to exist... I'm wondering if it's from other extensions I have installed. I know if you have inline scripts bound to onclick or similar it counts as that but that doesn't seem to be the case.

Cheers,
Chris.

To unsubscribe from this group and stop receiving emails from it, send an email to light-table-discussion+unsub...@googlegroups.com.

[cldwalker]

Awesome work! I'd like to get this working for cljs and have opened an issue - https://github.com/davecoates/lt-chrometools/issues/5

I also tried this on a newly created js file within a clojurescript project but kept on getting "Couldn't find script to set breakpoint in" errors. Is there a certain js library format expected in order for debugging to work? Do you have an example js repository that is known to work with your plugin?

Thanks,

Gabriel

[Dave Coates]

Ahh.. I pushed a fix and new version a couple of hours ago to fix the breakpoint issue. Can you check you are using 0.0.2? If you are and you still get that message it's probably a bug. So long as the script has been parsed by Chrome it should be able to find it. If you are using CoffeeScript but don't have sourcemaps enable you'll get this error.

Regarding clojurescript - I tried it early on and it was working but haven't come back to it so not sure about it's current state. I did get watches working originally but can't recall what state it's in now - I'll look at that soon.

[Josh Cole]

This looks excellent, can't wait to give it a spin at work!

Cheers,

Josh