Why does Chrome Devtools show variables defined within the current scope as undefined?

Question

For example the variable mergedArray below.

My issue is that variables are often impossible to inspect even when defined within the current function.

I found other questions that ask something similar, but the answer in those questions relates to the variable being defined in a higher scope.

This issue is technically in Electron - but it uses what is essentially Chrome DevTools.

Artis

It looks like you're trying to access mergedArray in your console which would be the global scope, no the same scope as the inline function. – Ungava

So I can't hover it to inspect, watch it, or access it in the console unless I console.log() the variable from within my code? Seems pretty nuts and entirely inconsistent in when this is an issue and when it's not. – Artis

It isn't inconsistent because it's only doing what you're telling it to do... debug your code properly, either by using a global variable or logging the variable in the console like suggested. – Ungava

Current scope is added to the console while debugging in paused state, but here the problem is likely incorrect handling of sourcemapped scripts where the variables have different real names in the actual js file. See if it's reported on crbug.com or report it yourself. – Gutbucket

Thanks @wOxxOm I'll take a look. – Artis

Re: "Debug your code properly... by using a global variable" -- I don't think you're using the debugger properly @ChloeDev – Artis

Answer 1

try expanding the Scope pane (below or above Call Stack pane) and see what variables are listed under Local. it could be shown as a different name e.g.

this could be a result of minification

Kazmirci

Thanks for the reply; unfortunately there's no minification at play in this situation. – Artis

Answer 2

I don't have an answer for why this happens, but it can be remedied by temporarily adding a line in your code:

const variableUsuallyUnavailable = 1;

while(bool) {
  variableUsuallyUnavailable; // This will make it available in the debugger;
  // ... Your actual code
}

Not very convenient, but it's all I have to offer even after all these years.

Artis

yes, using a console.log is often a way to have it in the debugger scope. boring... – Gregory