Does it support JS debugging

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

Does it support JS debugging

Postby lxs » October 6th, 2017, 9:23 pm

I am in the final days for the trial and need to decide soon. I wonder if it supports JS debugging at all. I tried with different options but could not get the JS debugging working. It won't stop at the JS at all. I wonder if you have a tutorial or example to show how this is done, if not, could you let me know when you plan to add it? Thanks>!
lxs
 
Posts: 1
Joined: October 6th, 2017, 9:02 pm

Re: Does it support JS debugging

Postby jazz » October 31st, 2017, 1:47 am

JavaScript is not executed by the server-side so there would be absolutely no way to get JS debugging working in PHP Tools.

You CAN however use the built-in debugger in your browser, which should be Chrome. If you are not using Chrome, start using Chrome.

Press F12, go to "Sources", find your JS file and start debugging.

Here's a neat trick too, if you put the built-in command on a line in your JS file:
Code: Select all
debugger;


the Chrome debugger will break on that line.
Try Hazaar MVC - http://www.hazaarmvc.com
The MVC Framework that makes PHP not suck!

Image
User avatar
jazz
 
Posts: 41
Joined: August 25th, 2016, 1:59 am
Location: Canberra, Australia

Re: Does it support JS debugging

Postby Miloslav Beno » October 31st, 2017, 4:23 pm

Hello,

One good method is the one Jazz mentiones.

But actually you can start both PHP and JS debugging session just by click F5. Up until now this worked only if you've used Internet Explorer, but since vs2017 it should be possible to use Chrome also, but so far we haven't tested that scenario. https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome/

We will provide more information once this scenario has been tested.

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 jazz » October 31st, 2017, 11:04 pm

I was not aware that they were trying to get that working. Cool.

That being said, I don't think it works with Chrome, which is why I have not noticed this working as I always develop in Chrome. I just tried switching my project to start up IE and yup, it stopped at my breakpoint.

Chrome is definitely not working though. Nor does Firefox or Edge. Unless I'm missing something, maybe a Chrome setting?
Try Hazaar MVC - http://www.hazaarmvc.com
The MVC Framework that makes PHP not suck!

Image
User avatar
jazz
 
Posts: 41
Joined: August 25th, 2016, 1:59 am
Location: Canberra, Australia

Re: Does it support JS debugging

Postby Miloslav Beno » November 10th, 2017, 2:26 pm

Hi jazz,

It's quite a new thing and we haven't explored it yet so I'm not able to give any advice here just yet. But I will. It would be quite beneficial for php devs as everyone uses chrome, me included.
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 Miloslav Beno » January 18th, 2019, 2:56 pm

Hi guys,

I'm happy to announce the latest preview of PHP Tools support for Chrome JS debugging. It only works if you have js in separate files, it doesn't work for js inlined in php files, but that's not recommended practice anyway. Please let me know once you had a chance to try it out.

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 18th, 2019, 10:26 pm

Hello Miroslav,

thank you for implementing this into PHP Tools. The VS debugger is just so much better than Chromes haha.

After testing I can say it works, even in combination with the Chrome debugger (for some settings, such as disabling cache). However, the files are are not mapped or read from the source map (like chrome/firefox do) at all. You are therefore left with one 20000 line file if you use npm webpack. Minified files cannot be debugged at all for obvious reasons then. It would be great if files could be automatically mapped to project files for sure, because right now it's just a bit more convenient than manually enabling remote debugging in Chrome and attaching to the tab process - even though it's great how in-sync the browser and VS are now.

Screenshots:
https://i.imgur.com/X7m7FmD.png (only vs)
https://i.imgur.com/hkBlVTq.png (compared to Chrome debugger)
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Re: Does it support JS debugging

Postby Miloslav Beno » January 21st, 2019, 11:16 am

Hello,

Thanks for trying it out and your feedback.

Let me check what we could do about the source mapping and I will get back to you.

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 Miloslav Beno » January 21st, 2019, 5:20 pm

Hello,

I've played little bit with VS JS Debugger for Chrome. And I found out that it does support source map files (It even worked for minified js files), but there are few requirement that have to be fullfiled.

1. Make sure all the paths are correct. ( First answer https://stackoverflow.com/questions/43499453/wrong-javascript-sourcemap-mapping-on-visual-studio-2017 )
2. Make sure the file which is actually run ends up with this comment:

Code: Select all
//# sourceMappingURL=YOUR_FILE.min.js.map


Please let me know if that helped.

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 21st, 2019, 5:47 pm

I'll be looking into that in a few minutes. Chrome and Firefox surprisingly pick up ont he source map straight away, just in VS it's nowhere to be found, as you can see in the screenshot (2).

Okay, so the generated source map includes:

Code: Select all
,"webpack:///./resources/assets/js/components/DatatableAsync.vue"


When I set a breakpoint in the file, it will break at a random line inside a different file however.

Edit... okay, I'm stupid and didn't realize that it works fine in js files. It doesn't however work in .vue files, which is where most of my code is.

Apparently the vue file content is put together into a "sourcesContent":["", ..] member. Debugging it in Chrome itself works because it "gets it from the source map" - assuming its from the sourceContent string. The actual mapped file in the ./resources/assets/js/components/*.vue contains something weird.

Code: Select all
var disposed = false
var normalizeComponent = require("!../../../../node_modules/vue-loader/lib/component-normalizer")
/* script */
export * from "!!babel-loader?{\"cacheDirectory\":true,\"presets\":[[\"env\",{\"modules\":false,\"targets\":{\"browsers\":\"> 1%\",\"uglify\":true},\"useBuiltIns\":true}]],\"plugins\":[]}!../../../../node_modules/vue-loader/lib/selector?type=script&index=0!./DatatableAsync.vue"
import __vue_script__ from "!!babel-loader?{\"cacheDirectory\":true,\"presets\":[[\"env\",{\"modules\":false,\"targets\":{\"browsers\":\"> 1%\",\"uglify\":true},\"useBuiltIns\":true}]],\"plugins\":[]}!../../../../node_modules/vue-loader/lib/selector?type=script&index=0!./DatatableAsync.vue"
/* template */
import __vue_template__ from "!!../../../../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-1b70b46f\",\"hasScoped\":false,\"buble\":{\"transforms\":{}}}!../../../../node_modules/vue-loader/lib/selector?type=template&index=0!./DatatableAsync.vue"
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
  __vue_script__,
  __vue_template__,
  __vue_template_functional__,
  __vue_styles__,
  __vue_scopeId__,
  __vue_module_identifier__
)
Component.options.__file = "resources/assets/js/components/DatatableAsync.vue"

/* hot reload */
if (module.hot) {(function () {
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), false)
  if (!hotAPI.compatible) return
  module.hot.accept()
  if (!module.hot.data) {
    hotAPI.createRecord("data-v-1b70b46f", Component.options)
  } else {
    hotAPI.reload("data-v-1b70b46f", Component.options)
  }
  module.hot.dispose(function (data) {
    disposed = true
  })
})()}

export default Component.exports



//////////////////
// WEBPACK FOOTER
// ./resources/assets/js/components/DatatableAsync.vue
// module id = ./resources/assets/js/components/DatatableAsync.vue
// module chunks = 0


It lists "resource/assets/js/components/*.vue" files seperately from the rest (notice the missing ./)
Image
mhpcc
 
Posts: 22
Joined: October 19th, 2018, 10:46 pm

Next

Return to PHP Tools

Who is online

Users browsing this forum: No registered users and 1 guest

cron

User Control Panel

Login

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest (based on users active over the past 5 minutes)
Most users ever online was 89 on October 15th, 2018, 4:06 pm

Users browsing this forum: No registered users and 1 guest
Phalanger