Does it support JS debugging

PHP Tools [?] extends Visual Studio with set of advanced features to work more efficiently with PHP code.

Re: Does it support JS debugging

Postby mhpcc » January 21st, 2019, 8:34 pm

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}`;
    }
}
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby Miloslav Beno » January 22nd, 2019, 12:54 pm

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!
Miloslav Beno │ DEVSENSE s.r.o. │ @miloslavbenomiloslav@devsense.com
User avatar
Miloslav Beno
 
Posts: 1252
Joined: January 7th, 2012, 8:36 pm

Re: Does it support JS debugging

Postby mhpcc » January 22nd, 2019, 7:32 pm

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!
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby Miloslav Beno » January 23rd, 2019, 12:15 pm

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!
Miloslav Beno │ DEVSENSE s.r.o. │ @miloslavbenomiloslav@devsense.com
User avatar
Miloslav Beno
 
Posts: 1252
Joined: January 7th, 2012, 8:36 pm

Re: Does it support JS debugging

Postby mhpcc » January 24th, 2019, 4:35 pm

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. :/
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby mhpcc » February 10th, 2019, 11:47 am

The status of this issue can be tracked here: https://github.com/Microsoft/vscode-chr ... issues/394
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby WeedHopper » February 13th, 2019, 8:11 pm

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.
WeedHopper
 
Posts: 7
Joined: May 14th, 2013, 5:23 pm

Re: Does it support JS debugging

Postby mhpcc » February 14th, 2019, 6:07 pm

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).
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby WeedHopper » February 28th, 2019, 10:52 pm

Thanks for the information - actually I have had to set the browser selector to "Internet Explorer" in the Visual Studio project to directly debug javascript from Visual Studio. I will give Chrome a try.
WeedHopper
 
Posts: 7
Joined: May 14th, 2013, 5:23 pm

Re: Does it support JS debugging

Postby WeedHopper » February 28th, 2019, 11:36 pm

In order to be able to debug my JavaScript directly from Visual Studio and hit break points I have to set the browser selector to "Internet Explorer" and the start page to scheduler.html as shown in this image:

Image


This does work I hit the javascript breakpoint but I can not hit this break point in Visual Studio with any other browser selected. I can debug direct from firefox and chrome but not direct from Visual Studio.

What am I doing wrong - how should debugging Javascript and PHP from Visual Studio work? I am using VS2015 is that why I can't debug javascript from Visual Studio using Chrome?
WeedHopper
 
Posts: 7
Joined: May 14th, 2013, 5:23 pm

PreviousNext

Return to PHP Tools

Who is online

Users browsing this forum: No registered users and 54 guests

cron

User Control Panel

Login

Who is online

In total there are 54 users online :: 0 registered, 0 hidden and 54 guests (based on users active over the past 5 minutes)
Most users ever online was 256 on March 28th, 2024, 9:42 am

Users browsing this forum: No registered users and 54 guests