Shared publicly  - 
 
Sublime Web Inspector: Debug JavaScript Inside Your Editor

An interesting experiment bringing JS debugging directly within Sublime. Click on objects from the console or stack trace to evaluate, use breakpoints, inspect properties and more.

Repo: https://github.com/sokolovstas/SublimeWebInspector

Sublime Web Inspector Screencast
260
141
casey becking's profile photoAmit Agarwal's profile photoJack Chan's profile photoGaubee Bangeel's profile photo
28 comments
 
cc +Paul Irish the functionality offered is a limited web inspector (of course no network/timeline etc) but for JS debugging it's an interesting take on the problem.
 
As usual you can make it work in MAC but when you try to move to Windows....
 
What song is that? It's so comforting.
 
It's very nice to see its possible, but it needs a lot more work
 
+Addy Osmani how does this actually work, does canary listen on a port for 'live changes' and sublime is pushing new changes to that socket:port when you hit save?
 
This is pretty cool.

I haven't had cause to use it myself in a while (and don't actually have a copy right now since I'm no longer consulting) but I've seen Visual Studio doing similar things. I worked with a guy who was a Visual Studio master and he never had to touch the console. Everything happened in VS. Coupling what I saw there with the genius intellisense has made other editors seem like toys.

Of course, something like Sublime Text has other benefits so I'm happy to use it (and it's cheaper,) and VS has its own issues (for one, it's a beast) but watching that was eye opening.  
 
Bradley, is there good documentation aout chrome's remote debugging stuff and how to interact with it? I would like to write a plugin for my IDE to be able to live-preview my changes in chrome.
 
Docs on our remote debugger protocol https://developers.google.com/chrome-developer-tools/docs/debugger-protocol. Fwiw, if you're just looking to do simpler live-preview changes in Chrome you can use LiveReload for that and simply add your project directory to the watch list. It'll reload Chrome when you make any changes on save. WebStorm have gone further than that communicating over WebSockets to produce WebStorm 5.0 - Live Edit with Google Chrome, but there are plenty of options for improving your live preview workflow.
 
+Martin Povolný You're right. No one cares about windows. They'd have a better consumer market share, right? Back to our ivory towers, everyone.
 
I dont get it, all the editors I have can do that...
 
I want to like this, but I don't think it can eclipse Chrome.
 
Very cool. But do we really need this? What problem does it solve over Chrome Dev Tools? Probably I didn't understand its use completely but can you tell one use case where this is better than CDT ?
 
+Amit Agarwal for one, you can debug and write code in the same editor ... that has all your favourite plugins and keybinds
cheerio
 
It does not seem to work on my computer.
I have installed the webInspector Chrome Canary is configured as a debugging tool, but when I start debugging, Chrome Canary just shows the local Chrome Canary directory.
How should I do to config my setting to mark it work as you like?
Add a comment...