Wanted to test the new server-side debugger with one of my projects (https://animated-pixel-gradients.glitch.me) but I’m getting repeated errors in the log:
> firstname.lastname@example.org build /app
Starting inspector on localhost:9200 failed: address not available
npm ERR! code ELIFECYCLE
ERR! errno 12
ERR! email@example.com build: `build-if-changed`
Exit status 12
ERR! Failed at the firstname.lastname@example.org build script.
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:
🐞 The debugger could not be started. See https://glitch.com/faq#debugger
I checked https://glitch.com/faq#debugger and found these requirements, which I believe my project fulfills.
There are a couple of requirements: It only works with Google Chrome, you need to be using Node 8.x or above, and using
- 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.
Hi @noelleleigh, can I ask you to do this for me? Disable the debugger, wait for your app to run, then go to the console and run this command:
pgrep -U app -c node
what is its output? If it is bigger than 1, it means that you have more than one node process running. We are going to deploy a workaround soon!
-c to see the PIDs of the node processes, and
ps aux to see what is running.
Only one Node process.
$ pgrep -U app -c node
can I access your project? I am there waiting to join, or you can send me a PM with the join link in the forum
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?
Chrome is the latest version 65.0.3325.181
I’m still getting the same error when I try to open the debugging link:
with this being logged:
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?
I don’t get this error, it’s very strange… can you send me the URL you are pasting as a PM? Not here, it has your token.
@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
pgrep -U app -c node again - now it outputs 2
- Go to the
chrome-devtools url in the debugger popup
Debugging connection was closed message
Chrome Version 67.0.3396.99 (Official Build) (64-bit)
⚡️🍫 Your app is listening on port 3000
node v8.11.3, with pnpm
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?
No worries! I selected
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?
Thanks, we’ll look into that - in the mean time I’ve added it our list of problematic plugins: https://glitch.com/help/plugins/
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?