Getting setup on Linux

[jameswomack]

Hey there! Super compelling project.

After following the instructions in the README, I was still not able to start the app. Error:

jwomack@lgml-jwomackH04 ~/Projects/github/devtools-html/debugger.html                          [11:17:05]
> $ npm start                                                                         ⬡ 6.3.1 [±master ✓]

> debugger.html@0.0.6 start /Users/jwomack/Projects/github/devtools-html/debugger.html
> start-dev-server

Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Protocol messages can be logged by enabling logging.firefoxProtocol in your local.json config
module.js:442
    throw err;
    ^

Error: Cannot find module '../../devtools-local-toolbox/public/js/test/test-flag'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/jwomack/Projects/github/devtools-html/debugger.html/node_modules/devtools-config/src/feature.js:6:14)
    at Module._compile (module.js:541:32)
    at Module._extensions..js (module.js:550:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jwomack/Projects/github/devtools-html/debugger.html/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)

[jameswomack]

OS X Sierra, Node 6.3.1, NPM 3.10.9, debugger.html 0.0.6

However, when I ran preinstall manually and then ran install a second time, it worked.

[jasonLaster]

Thanks! We've seen some similar reports with npm i. This is definitely something we want to figure out soon.

[jasonLaster]

For what it's worth, I just tried a fresh clone + install with node 6.3.1 and couldn't reproduce. I'll take a look later. Others (@shlomif) have seen this w/ linux, so it's real.

[nsardo]

If it helps, I've run into something similiar:
( Macbook Pro (Early 2011)
2.2 Ghz intel Core i7
16GB Ram
OS X Sierra 10.12.1
)

I started with a 6.x version of node, got the same error as below, upgraded to node 7. Same error.

`MacBook-Pro:debugger.html $ npm start

debugger.html@0.0.6 start /Desktop/debugger.html
start-dev-server

Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Protocol messages can be logged by enabling logging.firefoxProtocol in your local.json config
module.js:474
throw err;
^

Error: Cannot find module '../../devtools-local-toolbox/public/js/test/test-flag'
at Function.Module._resolveFilename (module.js:472:15)
at Function.Module._load (module.js:420:25)
at Module.require (module.js:500:17)
at require (internal/module.js:20:19)
at Object. (/Desktop/debugger.html/node_modules/devtools-config/src/feature.js:6:14)
at Module._compile (module.js:573:32)
at Module._extensions..js (module.js:582:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:490:32)
at tryModuleLoad (module.js:449:12)

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.0.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! debugger.html@0.0.6 start: start-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the debugger.html@0.0.6 start script 'start-dev-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the debugger.html package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! start-dev-server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs debugger.html
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls debugger.html
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Desktop/debugger.html/npm-debug.log`

[nsardo]

Interestingly, I followed @jameswomack ( thanks, @jameswomack !!) example, and ran:

$ ./bin/preinstall
$ npm install
$ npm start

All errors gone, and it starts properly!

`MacBook-Pro:debugger.html-master $ npm start

debugger.html@0.0.6 start /Desktop/debugger.html-master
start-dev-server

Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Protocol messages can be logged by enabling logging.firefoxProtocol in your local.json config
Hot Reloading can be enabled by adding "hotReloading": true to your local.json config
Development Server Listening at http://localhost:8000
View debugger examples at http://localhost:7999
[BABEL] Note: The code generator has deoptimised the styling of "/Users/nsardo/Desktop/debugger.html-master/packages/devtools-sham-modules/sham/css-property-db.js" as it exceeds the max of "100KB".`

[jasonLaster]

Neat @nsardo. Out of curiosity, does npm test work for you?

[nsardo]

@jasonLaster As I said, I followed the @jameswomack prescription to get a running instance. I just stopped it and ran npm run test the output below:

`MacBook-Pro:debugger.html-master nsardo$ npm run test

debugger.html@0.0.6 test /Users/nsardo/Desktop/debugger.html-master
node public/js/test/node-unit-tests.js

breakpoints
✓ should add a breakpoint

sources
✓ should add sources to state
✓ should select a source
✓ should automatically select a pending source
✓ should open a tab for the source
✓ should allow tabs to be closed
✓ should select previous tab on tab closed
✓ should select next tab on tab closed if no previous tab
✓ should load source text
✓ should cache subsequent source text loads
✓ should indicate a loading source text
✓ should indicate an errored source text
✓ should download a sourcemap and create sources

ui
✓ should toggle the visible state of file search

sources reducer
✓ should work

sources-tree
✓ should provide node API
✓ builds a path-based tree
✓ alphabetically sorts children
✓ sorts folders first
✓ puts (index) at the top of the sort
✓ can collapse a single source
✓ correctly merges in a collapsed source with a deeper level
✓ correctly merges in a collapsed source with a shallower level
✓ correctly merges in a collapsed source with the same level
✓ correctly parses webpack sources correctly
✓ correctly parses file sources correctly

26 passing (122ms)`

[jasonLaster]

@nsardo that looks pretty good to me :)

[jasonLaster]

@nsardo, mind doing a fresh git clone and then running yarn install. I wonder if that would work as well

[nsardo]

@jasonLaster Me too!
The only problem is npm install does not work as desired. ./bin/preinstall must be run first. Might want to add that to the OS X notes. =)

Sure, I'll give it a shot.

[nsardo]

@jasonLaster Sorry for the delay, I had some permission issues to massage before brew postinstall node would work-- no doubt because I use the official node.js package to install node, rather than brew.

yarn install did the trick. You might want to add this also to the OS X install notes.

`MacBook-Pro:debugger.html-master nsardo$ npm start

debugger.html@0.0.6 start /Users/nsardo/Desktop/debugger.html-master
start-dev-server

Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Protocol messages can be logged by enabling logging.firefoxProtocol in your local.json config
Hot Reloading can be enabled by adding "hotReloading": true to your local.json config
Development Server Listening at http://localhost:8000
View debugger examples at http://localhost:7999
^C
MacBook-Pro:debugger.html-master nsardo$ npm test

debugger.html@0.0.6 test /Users/nsardo/Desktop/debugger.html-master
node public/js/test/node-unit-tests.js

breakpoints
✓ should add a breakpoint

sources
✓ should add sources to state
✓ should select a source
✓ should automatically select a pending source
✓ should open a tab for the source
✓ should allow tabs to be closed
✓ should select previous tab on tab closed
✓ should select next tab on tab closed if no previous tab
✓ should load source text
✓ should cache subsequent source text loads
✓ should indicate a loading source text
✓ should indicate an errored source text
✓ should download a sourcemap and create sources

ui
✓ should toggle the visible state of file search

sources reducer
✓ should work

sources-tree
✓ should provide node API
✓ builds a path-based tree
✓ alphabetically sorts children
✓ sorts folders first
✓ puts (index) at the top of the sort
✓ can collapse a single source
✓ correctly merges in a collapsed source with a deeper level
✓ correctly merges in a collapsed source with a shallower level
✓ correctly merges in a collapsed source with the same level
✓ correctly parses webpack sources correctly
✓ correctly parses file sources correctly

26 passing (153ms)`

[jasonLaster]

Thanks. It sounds like we've got two good approaches. yarn or just running the preinstall script, which could be renamed...

[nsardo]

@jasonLaster Yes Sir, both work! =)

[jasonLaster]

We're going to switch to yarn install soon

[ochameau]

I don't know what depends on recent nodejs version but it is frustrating to depend on something not shipped in current ubuntu release:

$ yarn install
yarn install v0.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
error devtools-launchpad@0.0.45: The engine "node" is incompatible with this module. Expected version ">=6.9.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

This page doesn't help. I have nodejs 6.6.0 on Ubuntu 16.04.1.

[clarkbw]

This is a requirement coming from devtools-launchpad package.json and the development-server but I'm not sure why.

Can you file an issue with the launchpad? Feels like the versions should at least be in sync and if we don't need anything from 6.9 we could drop that down to 6.6 to simplify things.

In general staying with the latest node release seems like a good plan.

[ochameau]

Opened firefox-devtools/devtools-core#196