Feature request : add in code 'debugger;' to breakpoints panel for .ts and .js files

[Alphapage]

Hello,

Typescript and javascript support debugger; to stop the debugging process when hitting.

It would be great to show those breakpoints in the breakpoints panel for info and even add a checkbox to show/hide such a feature.

Thank you in advance for your feedback.

[weinand]

@Alphapage why are you using debugger; statements instead of real breakpoints?

[Alphapage]

I'm using systemjs to import and transpile my es6 files. The only way I found to debug is to use debugger; because vscode or chrome devtools breakpoints are never hit.
In vscode, I can't put breakpoints in test!transpiled file and when using debugger;, the inline sourcemap is not recognized, only chrome devtools seems to work correctly except for breakpoints.

[weinand]

@Alphapage then we should try to solve the breakpoint issues in VS Code and not add features for workarounds.
In 99% of all cases of breakpoint issues, source maps are just not created correctly.

What exactly do you mean by "In vscode, I can't put breakpoints in test!transpiled file"?
What version of VS Code are you using?
What node version?

[Alphapage]

When you system.import('test.js'), systemjs generates a test.js!transpiled file which contains the transpiled code and the inline sourcemap (from babel in my case). If I put breakpoints in test.js, then nothing happens. I can't put breakpoints in test.js!transpiled (but I can do in chrome devtools even if they are never hit).

node:4.2.4
vscode: 0.10.11

[weinand]

@Alphapage so the name of the file is 'test.js!transpiled'? The reason that you cannot set breakpoints in that file, is that VS Code doesn't recognise it as a JavaScript file. In the latest (insiders) VS Code version (released today), you can add 'js!transpiled' in your workspace settings as another extension for JavaScript files. With this you should be able to set breakpoints in 'test.js!transpiled'.

Can you try to force systemjs to not produce inlined source maps? That would make debugging much easier. If not, could you make one of those 'test.js!transpiled' available so that I can investigate?

[Alphapage]

The test.js!transpiled is:

(function(System, SystemJS) {'use strict';

System.register(['./world.js'], function (_export, _context) {
  var returnworld;
  return {
    setters: [function (_worldJs) {
      returnworld = _worldJs.default;
    }],
    execute: function () {

      console.log('running from source:hello ');
      debugger;
      // try{
      console.log('running from source:hello ' + returnworld());
      // }catch(e){console.log(e)}
    }
  };
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQU87Ozs7QUFFUCxjQUFRLEdBQVIsQ0FBWSw0QkFBWjtBQUNBOztBQUVBLGNBQVEsR0FBUixDQUFZLCtCQUE2QixhQUE3QixDQUFaIiwiZmlsZSI6InRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgcmV0dXJud29ybGQgZnJvbSAnLi93b3JsZC5qcydcclxuXHJcbmNvbnNvbGUubG9nKCdydW5uaW5nIGZyb20gc291cmNlOmhlbGxvICcpXHJcbmRlYnVnZ2VyIFxyXG4vLyB0cnl7XHJcbmNvbnNvbGUubG9nKCdydW5uaW5nIGZyb20gc291cmNlOmhlbGxvICcrcmV0dXJud29ybGQoKSlcclxuLy8gfWNhdGNoKGUpe2NvbnNvbGUubG9nKGUpfSJdfQ==
})(System, System);

[Alphapage]

I think the problem arises in vscode because of .js!transpiled extension which is not recognized for now.
I think vscode will behave like chrome devtools after this update, so this is a great news.
The breakpoints are never hit in both vscode and chrome devtools because of nodejs debugger limitations in my opinion which only breaks on debugger;.
That's why I'm asking for a way to list the in code debugger; and even have the ability to insert/delete debugger; when I click on a line in the document (asking me something like: Do you want to insert a breakpoint or a debugger; inside the code ?)

[weinand]

@Alphapage "breakpoints are never hit in both vscode ... because of nodejs debugger limitations" is a speculation. I would like to understand whether this is really true.

You are saying that breakpoints don't work for the snippet both in Chrome dev tools and VS Code. For Chrome dev tools the snippet has to run in the browser. For VS Code the snippet has to run in node.js. How are you able to run the snippet in these different setups?

Adding support for manipulating "debugger;" statements is a workaround. I don't see this as a feature of the base product, but more like an extension.

[Alphapage]

I'm using node-inspector for chrome devtools. Do you want a sample project ?