toolbox-wrapper.html is blank

[vladikoff]

Getting a 404 for connect.js

When trying to use "http://localhost:8081/?wsPort=9000"

I went through all requirements to build this under https://github.com/joewalker/devtools.html#building and also tried npm start, any hints?

[bgrins]

Have you run npm install and gulp serve-connect? Also, if you open http://localhost:8081/ in a browser do you see a blank page or a server connection error page?

[vladikoff]

Hey Brian! Here's what I did:

• Checked out commit cdd029a1c41b82255e9e7ce4eee937f734edc64a Tue Dec 1 14:57:26 2015 -0500
• nvm use 4

Full log:

➜  devtools.html git:(master) nvm use 4
Now using node v4.2.1 (npm v2.14.7)
➜  devtools.html git:(master) npm i 
<< NPM BUSINESS >>

➜  devtools.html git:(master) gulp serve-connect
[16:26:53] Using gulpfile ~/tmp/devtools.html/gulpfile.js
[16:26:53] Starting 'start-proxy'...
Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Listening for WS on *:9001
Will proxy to TCP on *:6081 on first WS connection
[16:26:53] Finished 'start-proxy' after 4.51 ms
[16:26:53] Starting 'serve-connect'...
Open http://localhost:8081/?wsPort=9000 to test Firefox
Open http://localhost:8081/?wsPort=9001 to test Chrome
[16:26:53] Finished 'serve-connect' after 8.09 ms
GET /?wsPort=9001 200 8.098 ms - 148
GET /built/connect.js 404 5.914 ms - 29
GET /?wsPort=9000 200 1.864 ms - 148
GET /built/connect.js 404 0.977 ms - 29
GET /favicon.ico 404 1.268 ms - 24
GET /favicon.ico 404 0.852 ms - 24
GET /?wsPort=9000 200 1.039 ms - 148
GET /built/connect.js 404 0.923 ms - 29
GET /?wsPort=9001 200 0.954 ms - 148
GET /built/connect.js 404 1.784 ms - 29
GET /built/connect.js 404 1.071 ms - 29
GET /?wsPort=9000 200 0.924 ms - 148
GET /built/connect.js 404 0.658 ms - 29
GET /?wsPort=9000 200 0.906 ms - 148
GET /built/connect.js 404 1.027 ms - 29

Is this log wrong:

Open http://localhost:8081/?wsPort=9000 to test Firefox
Open http://localhost:8081/?wsPort=9001 to test Chrome

?

[vladikoff]

It is strange it builds correctly into the built directory but

➜  devtools.html git:(master) gulp serve-connect
[16:33:24] Using gulpfile ~/tmp/devtools.html/gulpfile.js
[16:33:24] Starting 'start-proxy'...
Listening for WS on *:9000
Will proxy to TCP on *:6080 on first WS connection
Listening for WS on *:9001
Will proxy to TCP on *:6081 on first WS connection
[16:33:24] Finished 'start-proxy' after 3.42 ms
[16:33:24] Starting 'serve-connect'...
Open http://localhost:8081/?wsPort=9000 to test Firefox
Open http://localhost:8081/?wsPort=9001 to test Chrome
[16:33:24] Finished 'serve-connect' after 7.8 ms
GET /?wsPort=9001 200 8.499 ms - 148
GET /built/connect.js 404 3.900 ms - 29
GET /built/connect.js 404 1.649 ms - 29
GET /?wsPort=9001 200 1.724 ms - 148
GET /built/connect.js 404 0.894 ms - 29
GET /?wsPort=9001 200 1.112 ms - 148
GET /built/connect.js 404 1.143 ms - 29
^C
➜  devtools.html git:(master) ls built
connect.js        fontinspector.js  styleinspector.js toolbox.js
debugger.js       inspector.js      test.js

but 404s in the task

[vladikoff]

After git pull and switching to use gulp start I'm now seeing this when I navigate to: http://localhost:8081/client/framework/toolbox-wrapper.html

unreachable code after return statement toolbox.js:39778:3
unreachable code after return statement toolbox.js:41613:3
unreachable code after return statement toolbox.js:44354:9
unreachable code after return statement toolbox.js:60443:5
unreachable code after return statement toolbox.js:69864:5
unreachable code after return statement toolbox.js:69931:5
unreachable code after return statement toolbox.js:71571:5
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create toolbox.js:2992:6
Cc sham for @mozilla.org/xre/app-info;1 toolbox.js:8664:6
Cc sham for @mozilla.org/inspector/dom-utils;1 toolbox.js:8664:6
unreachable code after return statement toolbox.js:39778:3
Cc sham for @mozilla.org/inspector/dom-utils;1 toolbox.js:8664:6
Cc sham for @mozilla.org/widget/clipboardhelper;1 toolbox.js:8664:6
Cc sham for @mozilla.org/content/style-sheet-service;1 toolbox.js:8664:6
Cc sham for @mozilla.org/network/io-service;1 toolbox.js:8664:6
Cc sham for @mozilla.org/inspector/dom-utils;1 toolbox.js:8664:6
Cc sham for @mozilla.org/xre/app-info;1 toolbox.js:8664:6
generateQI is a sham Array [ Array[2] ] toolbox.js:33811:6
Cc sham for @mozilla.org/serviceworkers/manager;1 toolbox.js:8664:6
generateQI is a sham Array [ Array[1] ] toolbox.js:33811:6
generateQI is a sham Array [ Array[1] ] toolbox.js:33811:6
generateQI is a sham Array [ Array[2] ] toolbox.js:33811:6
No cached boolean pref for devtools.debugger.ui.variables-sorting-enabled toolbox.js:13153:6
Cc sham for @mozilla.org/xmlextras/domparser;1 toolbox.js:8664:6
Cc sham for @mozilla.org/io-util;1 toolbox.js:8664:6
CC sham for @mozilla.org/scriptableinputstream;1 nsIScriptableInputStream init toolbox.js:8675:6
Cc sham for @mozilla.org/inspector/dom-utils;1 toolbox.js:8664:6
unreachable code after return statement

[jsantell]

Looks like there isn't a debuggee being served maybe? Try listen in a Firefox tab in the developer toolbar

[vladikoff]

That was it! Thanks so much Jordan and Brian! I will try to submit some PRs to make getting started easier for others