Debugger Not Working


#1

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:

> 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

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 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.


#2

Hi @nleigh, 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!

UPDATE: remove -c to see the PIDs of the node processes, and ps aux to see what is running.


#3

Only one Node process.

app@animated-pixel-gradients:~ 16:33 
$ pgrep -U app -c node
1

#4

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


#5

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 :slight_smile:


#7

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.


#8

Thanks for your feedback :slight_smile: 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?


#9

Chrome is the latest version 65.0.3325.181

I’m still getting the same error when I try to open the debugging link:
Capture

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?


#10

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.


#11

@etamponi I’m having a similar problem: Debugging connection was closed. Reason: WebSocket disconnected

image

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.


#12

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/


#13

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?

Thanks!


#14

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?


#15

No worries! I selected node-app:

image

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.


#16

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.


#17

Thanks @nleigh! 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?


#18

Thanks, we’ll look into that - in the mean time I’ve added it our list of problematic plugins: https://glitch.com/help/plugins/


#19

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.


#20

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.


#21

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?