auchenberg/chrome-devtools-app

Chrome DevTools packaged as an app via Electron

Update on Chrome DevTools App.

Chrome DevTools App is now superseeded by https://inspect.dev/ – a new developer tool for macOS and Windows to inspect and debug your web apps and websites in Safari and WebViews on iOS devices 🤯🎉🔥

Maintenance status: Chrome DevTools App. is not proactively maintained or extended.

Original readme

Chrome DevTools App

Discontinued

This project is Discontinued. See #48

Chrome DevTools packaged as an app using electron-prebuilt.

This project is an exploration of how much work it would take to separate Chrome DevTools from Chrome itself and to explore what separation from the browser would bring to the table in terms of new functionality, etc.

I've written an article about this project, where I go in detail, and provide a few perspectives on what this project could evolve into. https://kenneth.io/blog/2014/12/28/taking-chrome-devtools-outside-the-browser/.

Installation

1. Go to the releases page, and download the latest DMG installer (Mac only, for now)
2. Drag Chrome DevTools App to your applications folder
3. Start an instance of Chrome with remote debugging enabled
4. Start Chrome DevTools App
5. Wait a second or click the refresh button.
6. Targets should show up. Click "Go" next to your target.
7. Bam. There go you.

Development

How to get started from source?

1. Run npm install
2. Run npm start

How to start this app from source?

1. Run npm install
2. Run npm install bower-cli -g
3. Run npm start

How to start a debug version of this app?

Run npm start

Releases

How to make a new build?

Run npm run release

---

This project is highly experimental.

chrome-devtools-app's Issues

Grunt runDebug error

Hi, I tried to run the grunt runDebug and I got the following error that I don't understand:

grunt runDebug                                                                                        master d8089aa
Running "shell:runAppDebug" (shell) task
[10525:0110/045416:ERROR:breakpad_mac.mm(238)] Breakpad initializaiton failed
[10526:0110/045416:ERROR:breakpad_mac.mm(238)] Breakpad initializaiton failed
[10524:0110/045416:INFO:CONSOLE(35)] "Uncaught Error: Module did not self-register.", source: /Users/robsimpson/Projects/chrome-devtools-app/node_modules/mdns/lib/dns_sd.js (35)
[10524:0110/045416:INFO:CONSOLE(4117)] "Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.8/$injector/nomod?p0=app
    at file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:63:12
    at file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1764:17
    at ensure (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1688:38)
    at module (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1762:14)
    at file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:4094:22
    at forEach (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:323:20)
    at loadModules (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:4078:5)
    at createInjector (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:4004:11)
    at doBootstrap (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1446:20)
    at bootstrap (file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1467:12)
http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.8%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A63%3A12%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A1764%3A17%0A%20%20%20%20at%20ensure%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A1688%3A38)%0A%20%20%20%20at%20module%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A1762%3A14)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A4094%3A22%0A%20%20%20%20at%20forEach%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A323%3A20)%0A%20%20%20%20at%20loadModules%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A4078%3A5)%0A%20%20%20%20at%20createInjector%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A4004%3A11)%0A%20%20%20%20at%20doBootstrap%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A1446%3A20)%0A%20%20%20%20at%20bootstrap%20(file%3A%2F%2F%2FUsers%2Frobsimpson%2FProjects%2Fchrome-devtools-app%2Fapp%2Flib%2Fbower_components%2Fangular%2Fangular.js%3A1467%3A12)", source: file:///Users/robsimpson/Projects/chrome-devtools-app/app/lib/bower_components/angular/angular.js (4117)

Missing right-click context menu in Elements tab

Thanks for this useful app! I have a minor issue:
on the Elements tab, right clicking on an element does not bring up right-click context menu.
Strangely enough, right-click context menu works perfect on all other tabs. Is this something related to Node-Webkit?

node-webkit is not in the npm registry

Hi, when I run the npm install node-webkit from the instruction in the README, I get this error:

npm http GET https://registry.npmjs.org/node-webkit
npm http 404 https://registry.npmjs.org/node-webkit
npm ERR! 404 404 Not Found: node-webkit
npm ERR! 404
npm ERR! 404 'node-webkit' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'chrome-devtools'
npm ERR! 404
npm ERR! 404 Maybe try 'npm search webkit'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.

npm ERR! System Darwin 14.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "node-webkit"
npm ERR! cwd /Users/robsimpson/Projects/chrome-devtools-app
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/robsimpson/Projects/chrome-devtools-app/npm-debug.log
npm ERR! not ok code 0

Am I missing a step here as I did the first 2 steps with npm install and bower install.

Thank you for your help

Rob

SupportedCSSProperties.js not generated properly

It looks like SupportedCSSProperties.js needs to be generated from the Chromium code-base, as the DevTools codebase has a Python script, https://chromium.googlesource.com/chromium/blink.git/+/master/Source/devtools/scripts/generate_supported_css.py, that pulls data from https://chromium.googlesource.com/chromium/blink.git/+/master/Source/core/css/CSSProperties.in, to generate the file.

We need to generate SupportedCSSProperties.js, but CSSProperties.in is outside of this codebase.

integration with other inspectors?

this looks like an awesome project. How viable would this be to integrate with other inspectors built on top of chrome dev tools? I am wondering about Ember JS inspector

emberjs/ember-inspector#404

thanks

Add support for PonyDebugger targets

Discover PonyDebugger targets to allow debugging of these.

Doesn't discover app on port 5959

I changed a node app to use inspect on 5959 and it seems to not find it. I see some issues referring to a port scanning utility, but perhaps I'm missing it somewhere.

Detect "RemoteDebug" targets over MDNS

RemoteDebug targets like chrome, firefox or node procesesses could expose themselves over MDNS, which easily could be discovered by this app.

http://agnat.github.io/node_mdns/user_guide.html#service_types

TypeError: undefined is not a function

hi
cloned the app
npm install
npm start
window appears, empty, only blue bar at top (empty)
and console says
TypeError: undefined is not a function
at setupMenubars (file:///home/martin/Downloads/chrome-devtools-app/app/app.js:136:19)

at new \u003Canonymous\u003E (file:///home/martin/Downloads/chrome-devtools-app/app/app.js:55:5)\n at Object.invoke (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:4182:17)\n at extend.instance (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:8441:21)\n at file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:7693:13\n at forEach (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:331:20)\n at nodeLinkFn (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:7692:11)\n at compositeLinkFn (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:7075:13)\n at publicLinkFn (file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:6954:30)\n at file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js:1451:27"", source: file:///home/martin/Downloads/chrome-devtools-app/app/lib/bower_components/angular/angular.js (11594)

running on ubuntu 14.04
thanks!

Use cmd+Q to quit

As the app currently doesn't have a menubar, cmd+Q will do nothing. I would expect it to quit the app.

Detect chrome remote debug targets over ADB like chrome://inspect

By browsing the Stetho source code, it seems like chrome://inspect is using Unix sockets to discover remote debug endpoints on the network.

At least Stetho opening a socket on stetho_PROCESSNAME_devtools_remote, which seem to be the convention used by chrome://inspect, so it should be possible to emulate this behavior by simply probing on sockets with the suffix _devtools_remote.

Link: https://github.com/facebook/stetho/blob/master/stetho/src/main/java/com/facebook/stetho/server/LocalSocketHttpServer.java

Ability to use without a target

It would be great if this app could be launched without requiring a target, so one could use certain features like the heap snapshot file analysis/comparison, which doesn't really require a target in the first place.

Add support for node-inspector targets

Discover node-inspector targets to allow debugging of these.

Collaboration with Sandip's DevToolsApp

@sandipchitale has written a really nice chrome app that has a very similar approach, but it's targeted at allowing you to define which devtools frontend you use. This also means people can write patches for DevTools frontend and you can easily try them out without them being upstreamed into Blink.

https://chrome.google.com/webstore/detail/dev-tools-app/eichfopopofffkbhjgbabdegakcdmpkm?hl=en-US
https://github.com/sandipchitale/DevToolsApp

I don't know if these two projects can merge, as they have slightly different usecases, but the "choose your own frontend" feature is very compelling to me.

Workspaces feature doesn't work.

The Workspaces feature doesnt work, as it relies on access to the local filesystem.

It looks like the filesystem implementation in DevTools doesn't use the remote debugging protocol, but some magical logic that get's injected at runtime,

Actions:

• Figure out how the filesystem functionality is implemented
• Emulate behavior in node-webkit.

Copying requests as cURL does not work

Apparently the clipboard is not enabled in hosted mode.

Any idea why this is?

"node-webkit" displayed as application title on OSX.

"node-webkit" displayed as application title on OSX..

Video Demo

It would be good to have a demo of using this and the setup process for those who find it easier to visually understand rather than textually understand....me :-)

Usage in combination with bugger

FYI, I just verified that it works with bugger:

1. Start node app with bugger --port 9222 my-node-script.js
2. Open Chrome DevTools App
3. ...
4. Profit!

why there is no websocket url

404 in readme

https://github.com/auchenberg/chrome-devtools-app/raw/master/build/Chrome%20DevTools/osx/Chrome-DevTools.app.zip is in the readme and it 404s

Uncaught node.js Error

I downloaded the .app file for OS X and when I double clicked on the app file, I get this -- http://screencast.com/t/Q56HXqcEhf3

Use for remote debugging non Android devices?

I'd like to use this project to remote debug a browser window I have running on another network computer. If this project can debug processes on localhost:port, then we should be able to do local-ip:port as well no?

Where in the source code can I swap out localhost for an ip?

can't get targets to show up

I'm a little confused about how to get targets to show up. started chrome with --remote-debugging-port=9222, and navigated to a webpage. No targets found. Am i doing something wrong?

Content not centered after animation.

After clicking a debugging target the page animates and ends up not centered.

This occurs consistently, and can only be fixed by resizing the page.

After move to Electron, clipboard doesn't work anymore.

See https://github.com/auchenberg/chrome-devtools-app/blob/master/app/devtools_overrides/CustomInspectorFrontendHost.js

Grunt build error

I tried to run grunt build and I got the following error:

grunt build                                                                                           master d8089aa
Running "nodewebkit:src" (nodewebkit) task
Latest Version: v0.11.5
Using v0.11.5
Create cache folder in /Users/robsimpson/Projects/chrome-devtools-app/cache/0.11.5
Downloading: http://dl.node-webkit.org/v0.11.5/node-webkit-v0.11.5-osx-ia32.zip
  downloading [====================] 100% 0.0s

Create release folder in /Users/robsimpson/Projects/chrome-devtools-app/build/Chrome DevTools/osx
Fatal error: Missing macPlist property 'NSHumanReadableCopyright'
Error: Missing macPlist property 'NSHumanReadableCopyright'
    at /Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/lib/utils.js:176:23
    at Array.forEach (native)
    at Object.module.exports.editPlist (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/lib/utils.js:174:11)
    at NwBuilder.handleMacApp (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/lib/index.js:490:28)
    at tryCatch1 (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/util.js:63:19)
    at Promise$_callHandler [as _callHandler] (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/promise.js:695:13)
    at Promise$_settlePromiseFromHandler [as _settlePromiseFromHandler] (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/promise.js:711:18)
    at Promise$_settlePromiseAt [as _settlePromiseAt] (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/promise.js:868:14)
    at Promise$_settlePromises [as _settlePromises] (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/promise.js:1006:14)
    at Async$_consumeFunctionBuffer [as _consumeFunctionBuffer] (/Users/robsimpson/Projects/chrome-devtools-app/node_modules/grunt-node-webkit-builder/node_modules/node-webkit-builder/node_modules/bluebird/js/main/async.js:74:12)

Where are the dev tools source?

Just wondering where did you find the developer tool source code ?

Unique app icon

The currently used icon is https://www.iconfinder.com/icons/317753/browser_chrome_internet_web_web_browser_icon#size=512

We should have a proper icon for DevTools.

Discontinued project?

Hi pal, no more updates from 2015 ... you leave this project ??

thks !!!

Missing some devtools files

Are these intently left out?

When opening the Devtools, screen, the loading of DevTools itself is slow

When opening the Devtools, screen, the loading of DevTools itself is slow. The loading of DevTools takes places in an <iframe>.

DevTools should be pre-loaded within the iframe, or somehow preloaded/initialized, so the loading is close to instant.

Can't open context menu on elements tab in chrome devtools

Issue installing via npm

I have node installed, here are version object details:

{ http_parser: '1.0',
node: '0.10.13',
v8: '3.14.5.9',
ares: '1.9.0-DEV',
uv: '0.10.12',
zlib: '1.2.3',
modules: '11',
openssl: '1.0.1e',
npm: '1.3.2' }

And when I run the npm install nodewebkit, it runs smoothly until near the end. Screenshot below from iTerm:

Thanks for working on this, it's a great concept.

Best,

Tony

Discover and support ChromeCast devices

Discover ChromeCast devices using MDNS, and make them appear in the list, if port 9222 is pingable.

Chrome feature request: https://code.google.com/p/chromium/issues/detail?id=444884

get url failed

Could you give me some suggestions? Thanks.