7 ms·

Chrome DevTools outside of the browser

227 points by gidea 12y ago

esamek 12y 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.
mijoharas 12y 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?
Honzo 12y 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
chippy 12y ago
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#remote https://developer.chrome.com/devtools/docs/debugger-protocol...
- jaimeyap 12y 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.
- wildpeaks 12y 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 https://github.com/cyrus-and/chrome-remote-interface or the Chrome webdriver )
xasos 12y 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 https://github.com/auchenberg/chrome-devtools-app
amelius 12y ago
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).
- boucher 12y 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.
  - amelius 12y 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.
    - mcs 12y ago
      In thread-per-connection server applications, the concurrency is exactly the number of threads spun up for the pool of connections. In node, it achieves that concurrency without a thread pool for the connections themselves, and thus you get less resource usage (memory mostly) for the same number of connections as the daemon scales up. Node's real draw, aside from pretty easy concurrency, is the package ecosystem.
      - tracker1 12y ago
        Not to mention the overhead of switching threads... Moving context in and out of secondary memory (RAM, disk) is pretty big. And when you get to thousands of threads per core, the context switching becomes very costly. Some modern systems use thread pools, and manage state switching internally to avoid this overhead at the CPU layer... just the same it is costly. I worked on a simulator a few years ago that was being written in many threads (each virtual character in play would have its' own worker thread)... this lead to a much lower number of users/system than should have been needed... switching to an event-loop and message bus reduced the overhead significantly.
kevnguy 12y ago
> 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!
- androidreview 12y ago
  I'll want to see how they can expand this to debug other browsers especially mobile IE, oh god!
  - thejosh 12y ago
    Have you tried weinre?
ercu 12y ago
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-intro-963ce2ecf1e84a4a6e936fdeacfbdca1.png https://kenneth.io/assets/images/posts/devtools-app/app-intr... [2] http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button http://www.google.com/design/spec/components/buttons.html#bu...
- auchenberg 12y ago
  You are absolutely right. Do you have a suggestion for how to make it better? I'm not a designer :)
mattdesl 12y 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 http://mattdesl.svbtle.com/motion-graphics You might also want to check out Thrust and atom-shell as alternatives to node-webkit.
mysteriouswasp 12y ago
Cool hack, but couldn't you just enable remote debugging in chrome then use the devtools built into node webkit?
- auchenberg 12y 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.
stephen 12y ago
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.
- msiebuhr 12y ago
  Kenneth is the guy behind http://remotedebug.org/ http://remotedebug.org/, so cross-browser is definitely in-scope.
thomasfoster96 12y ago
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).
- auchenberg 12y ago
  We could enable node-webkit to generate a windows build too. Are you interesting in helping out?
deleted 12y ago
[deleted]

227 points by gidea 12y 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.

mijoharas 12y 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?

Honzo 12y 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

chippy 12y ago

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#remote https://developer.chrome.com/devtools/docs/debugger-protocol...

jaimeyap 12y 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.
wildpeaks 12y 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 https://github.com/cyrus-and/chrome-remote-interface or the Chrome webdriver )

xasos 12y 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 https://github.com/auchenberg/chrome-devtools-app

amelius 12y ago

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).

boucher 12y 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.
- amelius 12y 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.
  - mcs 12y ago
    In thread-per-connection server applications, the concurrency is exactly the number of threads spun up for the pool of connections. In node, it achieves that concurrency without a thread pool for the connections themselves, and thus you get less resource usage (memory mostly) for the same number of connections as the daemon scales up. Node's real draw, aside from pretty easy concurrency, is the package ecosystem.
    - tracker1 12y ago
      Not to mention the overhead of switching threads... Moving context in and out of secondary memory (RAM, disk) is pretty big. And when you get to thousands of threads per core, the context switching becomes very costly. Some modern systems use thread pools, and manage state switching internally to avoid this overhead at the CPU layer... just the same it is costly. I worked on a simulator a few years ago that was being written in many threads (each virtual character in play would have its' own worker thread)... this lead to a much lower number of users/system than should have been needed... switching to an event-loop and message bus reduced the overhead significantly.

kevnguy 12y ago

> 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!

androidreview 12y ago
I'll want to see how they can expand this to debug other browsers especially mobile IE, oh god!
- thejosh 12y ago
  Have you tried weinre?

ercu 12y ago

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-intro-963ce2ecf1e84a4a6e936fdeacfbdca1.png https://kenneth.io/assets/images/posts/devtools-app/app-intr... [2] http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button http://www.google.com/design/spec/components/buttons.html#bu...

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

mattdesl 12y 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 http://mattdesl.svbtle.com/motion-graphics You might also want to check out Thrust and atom-shell as alternatives to node-webkit.

mysteriouswasp 12y ago

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

auchenberg 12y 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.

stephen 12y ago

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.

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

thomasfoster96 12y ago

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).

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

deleted 12y ago

[deleted]