Chrome DevTools outside of the browser (opens in new tab)

(kenneth.io)

227 pointsgidea11y ago28 comments

28 comments

22 comments · 12 top-level

chippy11y ago· 2 in thread

How does this differ from the default Chrome DevTools remote debugging over the wire? Doesn't that also run it's own http server in a way?

https://developer.chrome.com/devtools/docs/debugger-protocol...

jaimeyap11y ago

This is almost certainly using the same protocol.

The DevTools team did the work a while back to pull everything they needed out of process and establish the devtools protocol to enable remote debugging.

What the author has done is to take the Chrome DevTools (which is already basically a standalone web app), and package it up with Node-webkit as a standalone app.

I think this is cool, not from a technical perspective necessarily (since the engineering work was mostly already done by the DevTools team for remote debugging), but rather from a usability perspective. Slight tweak to the UX and it changes the mental framing people have of what the chrome DevTools actually is.

wildpeaks11y ago

It does expose a websocket other apps can use to control Chrome (such as this node module: https://github.com/cyrus-and/chrome-remote-interface or the Chrome webdriver )

kevnguy11y ago· 2 in thread

> Chrome DevTools is close to a functional editor.

Yes, we need this badly! Can't wait to see what we can do with the devtools and make something similar to Brackets!

androidreview11y ago

I'll want to see how they can expand this to debug other browsers especially mobile IE, oh god!

thejosh11y ago

Have you tried weinre?

amelius11y ago· 2 in thread

How scalable is Node these days, considering that javascript has no real multi-threading support, and most of the things you do for a user in Node are thus blocking other users?

I know it is possible to run things in different processes, but it seems to me that this is kind of a hassle (like a workaround).

boucher11y ago

Most of the things you do for a user are not blocking, that's the whole point of node. Instead of blocking, almost everything is done with asynchronous callbacks.

amelius11y ago

And while you are servicing a nonblocking request, you are effectively blocking other users, because the CPU can do one thing at a time.

That is the main pitfall of asynchronous programming as opposed to multithreaded programming.

3 more replies

ercu11y ago· 1 in thread

my 2cents for just for the ui [1]: using more than one floating action (rounded) button more than once is against material design guidelines [2].

[1] https://kenneth.io/assets/images/posts/devtools-app/app-intr...

[2] http://www.google.com/design/spec/components/buttons.html#bu...

auchenberg11y ago

You are absolutely right. Do you have a suggestion for how to make it better? I'm not a designer :)

stephen11y ago· 1 in thread

Any post/tool that mentions "cross-browser debugging protocols" has my immediate +1.

Doing so from outside the browser (which gets me that much closer to staying in my IDE) has my immediate +100.

I understand the fancy side of debugging tools is still being actively evolved (interacting with/highlighting DOM elements), but surely we're to the point where a basic JS debugger protocol (break point, skip, go in, go out, etc., ...with source maps...) is doable.

msiebuhr11y ago

Kenneth is the guy behind http://remotedebug.org/, so cross-browser is definitely in-scope.

mysteriouswasp11y ago· 1 in thread

Cool hack, but couldn't you just enable remote debugging in chrome then use the devtools built into node webkit?

auchenberg11y ago

You could, but my point here is to explore what it brings to the table when DevTools is a separate application, just like your editor.

thomasfoster9611y ago· 1 in thread

Does this run on Windows? Looking at the GitHub repo it seems to me it's very much Mac-only (which is surprising seeing as it's made in node-webkit).

auchenberg11y ago

We could enable node-webkit to generate a windows build too. Are you interesting in helping out?

Honzo11y ago

This is really neat.

FYI to run Chrome in remote debugging mode on a Mac

  > /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

esamek11y ago

From the authors philosophical standpoint, I think this is indeed very interesting. I hate having to open up multiple instances of the dev tools since they are tied to the tab instance.

xasos11y ago

This looks super interesting, and I'm definitely going to try it out when I'm back at home.

GitHub repo if anyone is interested (with install instructions): https://github.com/auchenberg/chrome-devtools-app

mattdesl11y ago

Great post!

I'm also really curious about the future of Dev Tools and hope to see it applied to other uses. I think there is a range of tools we could be building on top of or around Chromium/DevTools/etc to provide real-time workflows for animations, visual programming, shader authoring, WebAudio editing, and plenty more.

I wrote about it a bit here: http://mattdesl.svbtle.com/motion-graphics

You might also want to check out Thrust and atom-shell as alternatives to node-webkit.

mijoharas11y ago

This seems like a really interesting idea, since I'm not by a computer right now, has anyone played around with it yet? How does it seem?

j / k navigate · click thread line to collapse

28 comments

22 comments · 12 top-level

chippy11y ago· 2 in thread

How does this differ from the default Chrome DevTools remote debugging over the wire? Doesn't that also run it's own http server in a way?

https://developer.chrome.com/devtools/docs/debugger-protocol...

jaimeyap11y ago

This is almost certainly using the same protocol.

The DevTools team did the work a while back to pull everything they needed out of process and establish the devtools protocol to enable remote debugging.

What the author has done is to take the Chrome DevTools (which is already basically a standalone web app), and package it up with Node-webkit as a standalone app.

wildpeaks11y ago

It does expose a websocket other apps can use to control Chrome (such as this node module: https://github.com/cyrus-and/chrome-remote-interface or the Chrome webdriver )

kevnguy11y ago· 2 in thread

> Chrome DevTools is close to a functional editor.

Yes, we need this badly! Can't wait to see what we can do with the devtools and make something similar to Brackets!

androidreview11y ago

I'll want to see how they can expand this to debug other browsers especially mobile IE, oh god!

thejosh11y ago

Have you tried weinre?

amelius11y ago· 2 in thread

How scalable is Node these days, considering that javascript has no real multi-threading support, and most of the things you do for a user in Node are thus blocking other users?

I know it is possible to run things in different processes, but it seems to me that this is kind of a hassle (like a workaround).

boucher11y ago

Most of the things you do for a user are not blocking, that's the whole point of node. Instead of blocking, almost everything is done with asynchronous callbacks.

amelius11y ago

And while you are servicing a nonblocking request, you are effectively blocking other users, because the CPU can do one thing at a time.

That is the main pitfall of asynchronous programming as opposed to multithreaded programming.

3 more replies

ercu11y ago· 1 in thread

my 2cents for just for the ui [1]: using more than one floating action (rounded) button more than once is against material design guidelines [2].

[1] https://kenneth.io/assets/images/posts/devtools-app/app-intr...

[2] http://www.google.com/design/spec/components/buttons.html#bu...

auchenberg11y ago

You are absolutely right. Do you have a suggestion for how to make it better? I'm not a designer :)

stephen11y ago· 1 in thread

Any post/tool that mentions "cross-browser debugging protocols" has my immediate +1.

Doing so from outside the browser (which gets me that much closer to staying in my IDE) has my immediate +100.

msiebuhr11y ago

Kenneth is the guy behind http://remotedebug.org/, so cross-browser is definitely in-scope.

mysteriouswasp11y ago· 1 in thread

Cool hack, but couldn't you just enable remote debugging in chrome then use the devtools built into node webkit?

auchenberg11y ago

You could, but my point here is to explore what it brings to the table when DevTools is a separate application, just like your editor.

thomasfoster9611y ago· 1 in thread

Does this run on Windows? Looking at the GitHub repo it seems to me it's very much Mac-only (which is surprising seeing as it's made in node-webkit).

auchenberg11y ago

We could enable node-webkit to generate a windows build too. Are you interesting in helping out?

Honzo11y ago

This is really neat.

FYI to run Chrome in remote debugging mode on a Mac

  > /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

esamek11y ago

From the authors philosophical standpoint, I think this is indeed very interesting. I hate having to open up multiple instances of the dev tools since they are tied to the tab instance.

xasos11y ago

This looks super interesting, and I'm definitely going to try it out when I'm back at home.

GitHub repo if anyone is interested (with install instructions): https://github.com/auchenberg/chrome-devtools-app

mattdesl11y ago

Great post!

I wrote about it a bit here: http://mattdesl.svbtle.com/motion-graphics

You might also want to check out Thrust and atom-shell as alternatives to node-webkit.

mijoharas11y ago

This seems like a really interesting idea, since I'm not by a computer right now, has anyone played around with it yet? How does it seem?

j / k navigate · click thread line to collapse