Page 1 of 3

Does it support JS debugging

PostPosted: October 6th, 2017, 9:23 pm
by lxs
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>!

Re: Does it support JS debugging

PostPosted: October 31st, 2017, 1:47 am
by jazz
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

the Chrome debugger will break on that line.

Re: Does it support JS debugging

PostPosted: October 31st, 2017, 4:23 pm
by Miloslav Beno

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.

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


Re: Does it support JS debugging

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

Re: Does it support JS debugging

PostPosted: November 10th, 2017, 2:26 pm
by Miloslav Beno
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.

Re: Does it support JS debugging

PostPosted: January 18th, 2019, 2:56 pm
by Miloslav Beno
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.


Re: Does it support JS debugging

PostPosted: January 18th, 2019, 10:26 pm
by mhpcc
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: (only vs) (compared to Chrome debugger)

Re: Does it support JS debugging

PostPosted: January 21st, 2019, 11:16 am
by Miloslav Beno

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.


Re: Does it support JS debugging

PostPosted: January 21st, 2019, 5:20 pm
by Miloslav Beno

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 )
2. Make sure the file which is actually run ends up with this comment:

Code: Select all

Please let me know if that helped.


Re: Does it support JS debugging

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

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(
Component.options.__file = "resources/assets/js/components/DatatableAsync.vue"

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

export default Component.exports

// ./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 ./)