Page 2 of 2

Re: Does it support JS debugging

PostPosted: January 21st, 2019, 8:34 pm
by mhpcc
Okay, I managed to "fix" the source map, vue source files are now put into the same ./resources/... folder and the files generated from webpack are stashed in webpack-generated://...

Image

It still works in Chrome, breakpoints are hit at the correct line.

When I set the breakpoint in Visual Studio however, it won't be set on the line I set it on, but on the next or one after that. If I'm trying to debug the first statement of a function or an assignment, that's not possible from Visual Studio. The breakpoint isn't only shown in the line after, but also only hit then. When I put the breakpoint in Chrome however, the debugging stops in visual studio at the right place.

Image

Not quite sure what to do from here.


(I fixed the source map for vue files using this in webpack.config.js:
Code: Select all
// fix source map for vue files
if(!Encore.isProduction()) {
    module.exports.devtool = 'eval-source-map';
   
    module.exports.output.devtoolFallbackModuleFilenameTemplate = 'webpack-fallback:///[resource-path]?[hash]';
    module.exports.output.devtoolModuleFilenameTemplate = info => {
        const isVue = info.resourcePath.match(/\.vue$/);
        const startsWithDot = info.resourcePath.startsWith("./");
        if (isVue) {
            if (startsWithDot) {
                return `webpack-generated:///${info.resourcePath}?${info.hash}`
            }
            else
                return `webpack:///./${info.resourcePath}`;
        }

        return `webpack:///${info.resourcePath}`;
    }
}

Re: Does it support JS debugging

PostPosted: January 22nd, 2019, 12:54 pm
by Miloslav Beno
Hi,

Thank you for diving deep into this. I've experienced the same issue with breakpoints when using sourcemap, but when I tried to place breakpoints at Chrome it was basicaly behaving same. Which is what I would expect - Vs frontend part of the debugger is just using chrome's back-end debugger.

Anyway this would be something that would interest Microsoft devs, because they are actually developing the VS JS debugger for Chrome. If you could create an issue at https://developercommunity.visualstudio.com/. I will try to bring it to attention of VS devs. Just a heads up - it will take time.

Thanks!

Re: Does it support JS debugging

PostPosted: January 22nd, 2019, 7:32 pm
by mhpcc
I've created an issue. On another note, is there a possibility that the script documents list does not always pop up when I refresh a site or do something in my browser? It's a rather long list with eval-souce-map and expands every time.

Thank you incredibly much for your work on PHP Tools and your quick feedback, by the way!

Re: Does it support JS debugging

PostPosted: January 23rd, 2019, 12:15 pm
by Miloslav Beno
Thank you for being such a active community member!

To tell you the true, I was wondering about the same thing - the eval results in Solution Explorer are a little annoying. One more thing I can ask VS devs as I do not know the way to turn it off.

Btw. please send me the link of the issue.

Thanks!

Re: Does it support JS debugging

PostPosted: January 24th, 2019, 4:35 pm
by mhpcc
https://developercommunity.visualstudio ... oints.html

I included a video and VS memory dumps, but those obviously aren't visible to the public.

As for the Script Documents thing, it should be easy enough to supress via byte patching. Not exactly something I'd like to do though...

The issue was also brought up here: https://developercommunity.visualstudio ... -fold.html

Edit: Using "Scope to this" on the project filters away the Script Documents. However, also every other project in the solution. :/

Re: Does it support JS debugging

PostPosted: February 10th, 2019, 11:47 am
by mhpcc
The status of this issue can be tracked here: https://github.com/Microsoft/vscode-chr ... issues/394

Re: Does it support JS debugging

PostPosted: February 13th, 2019, 8:11 pm
by WeedHopper
I have been able to debug both PHP and JavaScript in the same project using Edge browser and PHP Tools built-in Apache server: I can set a breakpoint in both my JavaScript and PHP files and hit them both while debugging in the project.

Here is how I have been able to get that to work: 1) create a new PHP Web Project. 2) create your javascript, html, and php files in that project. 3) For initial test purposes, start with a .html, .js, and .php file put some simple appropiate code in each file. 4) Set a break point in the .js file and set the .html page to the "Start Page" (right click on it and "Set as Start Page"). Run the project in debug and you should hit the break point in the .js file. 5) Now set a break point in the .PHP file and "Set As Start Page" the .PHP file you should hit the .PHP break point. 6. Now go back and and "Set As Start Page" the .html page. Now you should be able to hit both a break point in .js and .php file.

This has work for me - maybe I've just been fortunate; I usually have to switch between setting the "Set As Start Page" between .html and .php page and back to .html page everytime I reopen the project. Once I get this working it usually continues to work once I get it working. Again I'm using Edge for my browser.

Again what I find is the key to this is switching from "Set As Start Page" on the .html first, to "Set As Start Page"on the .PHP page, then back to "Set As Start Page on the .html page this has allowed me to debug both the JS and PHP in the same project.

Re: Does it support JS debugging

PostPosted: February 14th, 2019, 6:07 pm
by mhpcc
There's no need to set your html file as startup file as long as your project is correctly configured. You can also debug using Chrome (you should not use Edge, it's not updated anymore and will soon be replaced by a chromium browser Microsoft is working on).