> animated-pixel-gradients@1.0.0 build /app
> build-if-changed
Starting inspector on localhost:9200 failed: address not available
npm ERR! code ELIFECYCLE
npm
ERR! errno 12
npm
ERR! animated-pixel-gradients@1.0.0 build: `build-if-changed`
npm ERR!
Exit status 12
npm
ERR!
npm
ERR! Failed at the animated-pixel-gradients@1.0.0 build script.
npm ERR!
This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!
/tmp/npm-cache/8.10.0/_logs/2018-03-28T16_19_11_273Z-debug.log
🐞 The debugger could not be started. See https://glitch.com/faq#debugger
There are a couple of requirements: It only works with Google Chrome, you need to be using Node 8.x or above, and using process.env.PORT rather than a hard-coded port number in your code. It also works best with pure JavaScript — source maps are not supported at the moment. And it won’t work if more than one Node process is running in parallel.
I’m
Using Google Chrome
Using Node 8.10.0
I’m using process.env.PORT for launching the Express app
Source maps only apply to my client-side code
No parallel Node processes
The error message sounds like a port error, but I don’t see what I’m doing wrong.
It looks like the build step in the start makes the debugger fail in your case. We’ll look at how to make the debugger work in this cases. In the meantime, when using the debugger you can try to simplify the command to just npm run serve or even better node ./server.js, and the debugger will work
Okay, I’ve been testing some things and I’ve discovered some odd behavior.
The Site Information button at the left of the omnibar and the blocked popup indicator at the right of the omnibar no longer respond to clicks when viewing the Glitch editor. They display the material design ink reactions, but no menus appear. This behavior isn’t consistent, but it’s happening most of the time and persists across refreshes and switching projects.
This means I can’t tell Chrome to open the popup when it appears after enabling the debugger.
When I bypass that and click the Debugger button again to open the debug link page in a new tab, going to that URL shows me a WebSocket disconnected error.
So the debugger is launching, but getting to it is problematic and it isn’t working for me yet.
Also, I find the wording on the debugging buttons confusing. The Debugger button should change to say “Retrieve debugging link” or “Open debugging page in new tab” after the Debugger has been enabled to accurately describe its changing behavior.
The Stop button should say “Stop debugger” to distinguish between stopping the entire debugger and say, stopping on a breakpoint. The emoji should only be used to annotate button meaning and give character, not be relied on to solely convey meaning on their own. Having a title text hover for more wordy descriptions of the buttons’ behavior would also help.
Thanks for your feedback Unfortunately, figuring out the best UX to open the debugger is not an easy task, because Chrome does not allow us to open the debugger correctly.
I tried to get to the debugger in your project and it works fine for me, I don’t know why you get a websocket disconnected error. Can you make sure you are you running the latest stable version of Chrome?
I am going to address at least some of these issues in the next few hours. The problem with the popup will need more time to figure out; we were able to just always enable popups from glitch.com to solve that, perhaps you can try the same?
I’m still getting the same error when I try to open the debugging link:
with this being logged:
/etc/debugger/node_modules/.registry.npmjs.org/http-proxy/1.16.2/node_modules/http-proxy/lib/http-proxy/index.js:119
throw err;
^
Error: socket hang up
at createHangUpError (_http_client.js:331:15)
at Socket.socketOnEnd (_http_client.js:423:23)
at emitNone (events.js:111:20)
at Socket.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1064:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
Is the intended action from the user to click Copy Debugger URL and paste it directly into that same tab’s address bar?
@etamponi I’m having a similar problem: Debugging connection was closed. Reason: WebSocket disconnected
This is what I did:
Start a new node/express project
Open the console to confirm pgrep -U app -c node outputs 1 (it does)
Open the debugger popup
Check pgrep -U app -c node again - now it outputs 2
Go to the chrome-devtools url in the debugger popup
Recieve Debugging connection was closed message
Ubuntu 16.04
Chrome Version 67.0.3396.99 (Official Build) (64-bit)
Logs:
⚡️🍫 Your app is listening on port 3000
node v8.11.3, with pnpm
Installing...
Resolving: total 49, reused 44, downloaded 0
Resolving: total 49, reused 49, downloaded 0, done
Total install time: 3975ms
🚝🕶 Your app is listening on port 1988
🐞 Debugger ready (https://glitch.com/faq#debugger). If the debugger does not open, check your pop-up blocker.
Any ideas? Running pgrep -U <user> -c node on my own machine gives me 0, in case that matters.
The output of 2 suggests you have more than one process running in parallel. We can only debug a single process. See here for the requirements: https://glitch.com/help/debugreq/
Thanks for your reply. Why would that be the case if I just created a brand new “hello world” project and tried to debug it? If it is possible, then I’m not 100% sure what you mean by running 2 processes in parallel. What could be causing that?
Ah, sorry I misread the stage at which the 2 response was received. However, I can’t reproduce the issue using a new hello-express app. Which ‘hello world’ project option did you select?
If you can’t reproduce it then perhaps I need to restart my machine. I would have done it already as a part of my standard “I have no idea what I’m doing” debug process, but I can’t do it right now because I’ve got a lot of thing open that I need to sort out.
FWIW, ultimately my issue was that uBlock Origin was interfering with the networking required to start the debugging session. Once I figured out which requests to whitelist, it started working again.
Thanks @noelleleigh! That fixed it for me (I’m also using uBlock Origin). @Gareth, I wonder if you could add a little “adblock detector” script and then show a warning on the page where the user copies the debugger url?
Cheers. In the interests of helping users solve their problem themselves in the mean time, and for “searchability” it might be worth putting a note in the debugger help section too.
I’m also unable to start the debugger - my project’s outstanding-clam (a remix of the #Remix4Change template). The error I get is
Starting inspector on localhost:9200 failed: address not available
I did pgrep -U app -c node and it reports 2 processes. Which based on the discussion here seems like it’s a problem but I’m not sure what to do about it.
The recommendation is https://glitch.com/help/debugerror1/, but given the use of create-react-app I think you’d probably have to do more work than it’s worth. What’s the issue you’re having with the project?
