Pycharm 2016.3 Professional JS Debugger Django

I am trying to set up my javascript debugger with Pycharm, and having some issues... here is my configurations:

 



The strange thing is, It seems to work when i have my inspect window open in chrome. i.e: 

have a breakpoint on line 32 in chrome

I can continue the debug in pycharm (however any breakpoints set in pycharm are ignored if continue to next break is clicked, i.e. that breakpoint on 38 is ignored.) as you can see it stopped at line 32. Is there something wrong with my configuration? What could be the issue here?

14 comments

From screenshot it seems that source files can't be resolved using sourcemaps (no checkmark in breakpoints)... Unfortunately I can't advise on fixing the configuration unless I have a project to play with. Can you share it, or try composing a sample that uses similar setup?

0

We are currently using a setup with basic angular 1 + gulp + browserfy all compiled into a single js + vendor js file. Let me know if this helps at all, otherwise I can see if i can replicate the setup

0

it doesn't unfortunately:( this is exact gulp, browserify, roots, etc. configuration that matters

0

Hey Elena,

Here is a link to the gulp file https://drive.google.com/file/d/16eHhKQFp2AF83EHFKvN2Zh_fpFJXdqe3/view?usp=sharing Let me know if there are any other specific configurations that you need. Also could babel affect our js debugger?

0

yes, babel config can also matter. what does your .babelrc look like?

Note that {sourceRoot: '/app'} in

.pipe(sourcemaps.write('.', {sourceRoot: '/app'}))

doesn't look good for me... Please try opening build/js/app.js. map in editor, choose Visualizer tab, then check the paths dropdown in the right panel - what paths can you see there? do they match your actual source paths?

0

here is what is in the babelrc

{
"plugins": ["transform-object-rest-spread"],
"presets": [
[
"env",
{
"targets": {
"browsers": [
">0.25%",
"not op_mini all"
]
}
}
]
]
}

 I checked build/js/app.js map in editor, and checked the file paths. There are a lot of paths so i skimmed through some but when i cross referenced them it seemed fine. 

Is there a way to export the paths in the sourcemap, then i could do more comprehensive check with a script

0

>There are a lot of paths so i skimmed through some but when i cross referenced them it seemed fine. 

Please can you attach a screenshot? What happens if you choose a file from dropdown?

 

>Is there a way to export the paths in the sourcemap, then i could do more comprehensive check with a script

 

Not possible unfortunately (at least I'm not aware of a way to do this)

 

0

Here is a SS of when i click on the path in the dropdown

Here is the app.js map 

0

path looks a bit strange - normally, when file is correctly resolved, it's a full absolute file path

One more observation you may find useful:

.pipe(stripComments({safe: false}))

modifies the source files prior to passing them to babel, etc., that's why sourcemaps will be very inaccurate for all files that have comments in them

0

Correct me if I'm wrong, but i believe the path will look like that because of the {sourceRoot: '/app'} ? Let me try modifying the strip comments statement... because I know one of my co-workers was using the debugger successfully before we added babel to our project. What are some ways we can make the sourcemap more accurate when using babel? 

0

>Correct me if I'm wrong, but i believe the path will look like that because of the {sourceRoot: '/app'} ?

 

yes, exactly. You can try specifying a relative path to your actual source dir from the app.js.map file instead

 

>What are some ways we can make the sourcemap more accurate when using babel?

 

I don't think you can do anything with the way babel generates them:(

0

Well I can try those suggestions and see do you have any other suggestions? I really do appreciate the time you're taking. Or is there any other way I can help you find the issue? I know you mentioned a test project to play with, i can see if I can make a small project. Lastly, would i have the same issues in the latest version of pycharm? I.e. 2018.2? 

0

Sample project would be very helpful indeed.

>Lastly, would i have the same issues in the latest version of pycharm? I.e. 2018.2? 

So far I have no idea if the problem faced by you is a bug or configuration issue. So I can't tell for sure whether upgrading to the last version make things better or worse

0

Haha i guess that is fair. Let me create a sample project for our configuration, and I will get back to you! thank you so much for your help so far! 

1

Please sign in to leave a comment.