Webstorm Debug Shows Object as Undefined But Same Object shows Graph in Console
Why when I put a breakpoint in Webstorm on the console.log below is it saying it's undefined yet if I run this code without debug, the console prints out the object graph for expected?
Console:
Here's a video of the problem to support the above http://bit.ly/1V4zYtb
Related, here's just another example of weirdness.
if I observe the store object. For example the line below where I'm setting the store with an array with one JSON object, I know that store has data, because this tests is passing, and if I console.log out that store object, I see that it's got an array after I set that:
it('should go to Company Detail Page when company is clicked', () => {
store.push([{id: 1, name: 'Company Name'}]);
var component = renderIntoDocument(<App store={store}/>),
expected = find(component, '.ft-company');
console.log("store.value(): ");
console.log(store.value());
expect(expected.length).to.equal(1);
});
});
but in Webstorm when I put a breakpoint on the console.log to take a look at the store, here's what happens:
Please sign in to leave a comment.
delete this (why no delete button?)
would you like to delete your initial post?
no want to delete the comment under my initial post. Keep the main post up.
this is the weirdest thing ever...I just don't get why half the objects would be resolving (like store) and others not (like expected).
ok this is really f'd up. Watch this video now. I got it working but it's the weirdest thing ever, and it may not work again at any point so it's not a resolution. I'm not satisfied with what Webstorm is doing nor why it's doing this: https://youtu.be/RzvBrNBoiyk
Have you seen something so weird before in WebStorm? I don't get it. Watch the entire vid. Notice how I just change lines of comments or empty lines and based on the apparent combo of comments and empty lines, debugging works or doesn't work as in I get a value for my expected and component variables or don't when I remove lines ...so bizarre.
bug submitted, this doesn't seem normal at all https://youtrack.jetbrains.com/issue/WEB-21658
Can you provide a sample project that shows up the issue?
resolved, I had forgotten to add the preset
In my mocha debug config in Webstorm, I now have
js:babel-core/register --presets es2015
previously I just had js:babel-core/register
ok this is not resolved, I lied. problem came up again! errrrrrrr
Here's another screencast showing the weird issue. I want to get to the bottom of this or else I can't use Webstorm debug to its fullest nor can I have confidence to recommend Webstorm for JS deveopment in this case.
https://youtu.be/mpZGICZn8EI
also https://youtu.be/RyjusnjJ-iA
at the end I sorta go through my project and show you the files, code, etc. so you can get a sense of what I'm coding and doing.
I'm going to expose my code very briefly if you wanna pull it to try it out. So clone it now, I'm gonna keep it up for a couple hours. https://github.com/dschinkel/we-do-tdd
Please watch these two as well: https://youtu.be/tLR9wNb2LYg & https://youtu.be/1KiBVgNRyps. Notice that based on adding or removing line returns, it skips or doesn't skip my expect statement. If I add too many lines, it skips my expect breakpoint and goes right to my done breakpoint. If I remove some lines, it'll at some point when I remove enough lines hit my expect breakpoint like it should be doing.
I've cloned your repository, thanks! Looking at it now
Thanks, reproduced, I've added the corresponding note to youtrack ticket
Thanks, you're awesome as usual Elena, appreciate the help.
I have the same problem (with or without mocha). When I put a breakpoint it shows me strange errors or 'undefined' for simple objects. When I change code a little bit sometimes it shows object correctly. Both mouse hover, bottom panel and evaluate tool give incorrect results.
When I try with Chrome Debugger it works correctly.
I'm on WebStorm 2020.3.2 and this started to happen recently in my Angular project on local component attributes. I can't confirm if it started happening after updating to latest version or if this started happening before. All I know it was working as intended in the past and I didn't change anything significant in the project. Debugging in DevTools results in correct expected behaviour. I guess I'll have to drop WebStorm's debugger for a while
can you reproduce the issue with a new angular app? Sample project + steps to repeat would be helpful
I have same problem in IntelliJ IDEA 2022.3.1, and I have reproduce the problem with sample project here https://github.com/Mcx002/Reproduce-Intellij-Debugging-Error
would you like to check what happened there please?
here I got undefined for variable config that I imported
but actually the config has object when I print out through console
I used to configure the debug like this, and it was work then, but now not anymore
This issue is not specific to IDEA, you will face the same issue when using other debuggers, VSCode, for example:
Undefined variables (
configin your case) while evaluating code during debugging is caused by the weird way imported objects are transpiled + missing name mappings in sourcemaps: if the variable is renamed while transpiling/obfuscating, and no appropriate name mapping is provided, the debugger won't be able to match variable in source code with the one in VM.For example,
import somefunction from './somefunc'is usually compiled toand no name mappings are generated (
"names":[]in generated sourcemap), so the debugger can't match the variable in.tsfile with the code in runtime and showsundefinedRelated issue: https://github.com/microsoft/TypeScript/issues/9627