Debug Angular 7 application in Firefox via Visual Studio Community 2017

I've been looking for an instruction for setting up the vs code debugger in firefox so i can debug the breakpoints of my typescript code.

Unfortunately the first page of google only returns me Instructions yet for Visual Studio Code, but i am looking for instuctions regarding Visual Studio Community 2017?

I've also stumbled upon a Plugin over at:

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

But i got confused by the Plugin Description, since it points me to a VSCode file which doesn't seem to exist in my Visual Studio Community 2017:

To configure these modes you must create a file .vscode/launch.json in the root directory of your project.

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

I am sure that I'm wrong here but how would i place it?

{

  "iisSettings": {

    ...

  },

  "profiles": {

    ...

    "Debug with Firefox" : { // ????? How do i set up this Profile?

      "name": "Launch index.html",

      "type": "firefox",

      "request": "launch",

      "reAttach": true,

      "file": "${workspaceFolder}/index.html"

   }

  }

}

Any knowledge on this would be highly appreciated!

Kind Regards

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

Any update for this issue? Have you resolved this issue? If not, would you please let me know the latest information about this issue?

– Leo Liu-MSFT
Nov 27 '18 at 2:55

Well the issue still is that i can't debug the typescript code in VS 2017 with firefox and i installed chrome on my machine but i haven't tested it so far since i'm in the middle of something else. But as you say it will probably work in chrome. Is the chrome debugger a plugin for VS 2017? Or do i have to install a plugin on chrome for vs debugging? or how does it work? And i've looked at the User Voice page. if the issue still exists in lets say 2 or 3 months i will provide a suggestion for firefox integration. can't be far since vs already supports chrome. Should be easy no?

– Fy Z1K
Nov 27 '18 at 22:21

AFAIK, if you are use chrome, you do not need to install any debugger plugin for VS 2017, you can check the blog blogs.msdn.microsoft.com/webdev/2016/11/21/… for some more details.

– Leo Liu-MSFT
Nov 28 '18 at 1:18

Thank you for the doc-link. I checked it and it works if i debug my app on google chrome. Seems it's an Firefox issue or VS simply not supporting FF. Imo Microsoft should cover it aswell since there are still usecases where running an app on firefox becomes handy... I'll leave that as a note to myself and later for the uservoice. I'd like to see that feature for vs17 :)

– Fy Z1K
Nov 30 '18 at 22:22

add a comment |

I've been looking for an instruction for setting up the vs code debugger in firefox so i can debug the breakpoints of my typescript code.

Unfortunately the first page of google only returns me Instructions yet for Visual Studio Code, but i am looking for instuctions regarding Visual Studio Community 2017?

I've also stumbled upon a Plugin over at:

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

But i got confused by the Plugin Description, since it points me to a VSCode file which doesn't seem to exist in my Visual Studio Community 2017:

To configure these modes you must create a file .vscode/launch.json in the root directory of your project.

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

I am sure that I'm wrong here but how would i place it?

{

  "iisSettings": {

    ...

  },

  "profiles": {

    ...

    "Debug with Firefox" : { // ????? How do i set up this Profile?

      "name": "Launch index.html",

      "type": "firefox",

      "request": "launch",

      "reAttach": true,

      "file": "${workspaceFolder}/index.html"

   }

  }

}

Any knowledge on this would be highly appreciated!

Kind Regards

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

Any update for this issue? Have you resolved this issue? If not, would you please let me know the latest information about this issue?

– Leo Liu-MSFT
Nov 27 '18 at 2:55

Well the issue still is that i can't debug the typescript code in VS 2017 with firefox and i installed chrome on my machine but i haven't tested it so far since i'm in the middle of something else. But as you say it will probably work in chrome. Is the chrome debugger a plugin for VS 2017? Or do i have to install a plugin on chrome for vs debugging? or how does it work? And i've looked at the User Voice page. if the issue still exists in lets say 2 or 3 months i will provide a suggestion for firefox integration. can't be far since vs already supports chrome. Should be easy no?

– Fy Z1K
Nov 27 '18 at 22:21

AFAIK, if you are use chrome, you do not need to install any debugger plugin for VS 2017, you can check the blog blogs.msdn.microsoft.com/webdev/2016/11/21/… for some more details.

– Leo Liu-MSFT
Nov 28 '18 at 1:18

Thank you for the doc-link. I checked it and it works if i debug my app on google chrome. Seems it's an Firefox issue or VS simply not supporting FF. Imo Microsoft should cover it aswell since there are still usecases where running an app on firefox becomes handy... I'll leave that as a note to myself and later for the uservoice. I'd like to see that feature for vs17 :)

– Fy Z1K
Nov 30 '18 at 22:22

add a comment |

I've been looking for an instruction for setting up the vs code debugger in firefox so i can debug the breakpoints of my typescript code.

Unfortunately the first page of google only returns me Instructions yet for Visual Studio Code, but i am looking for instuctions regarding Visual Studio Community 2017?

I've also stumbled upon a Plugin over at:

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

But i got confused by the Plugin Description, since it points me to a VSCode file which doesn't seem to exist in my Visual Studio Community 2017:

To configure these modes you must create a file .vscode/launch.json in the root directory of your project.

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

I am sure that I'm wrong here but how would i place it?

{

  "iisSettings": {

    ...

  },

  "profiles": {

    ...

    "Debug with Firefox" : { // ????? How do i set up this Profile?

      "name": "Launch index.html",

      "type": "firefox",

      "request": "launch",

      "reAttach": true,

      "file": "${workspaceFolder}/index.html"

   }

  }

}

Any knowledge on this would be highly appreciated!

Kind Regards

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

I've been looking for an instruction for setting up the vs code debugger in firefox so i can debug the breakpoints of my typescript code.

Unfortunately the first page of google only returns me Instructions yet for Visual Studio Code, but i am looking for instuctions regarding Visual Studio Community 2017?

I've also stumbled upon a Plugin over at:

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

But i got confused by the Plugin Description, since it points me to a VSCode file which doesn't seem to exist in my Visual Studio Community 2017:

To configure these modes you must create a file .vscode/launch.json in the root directory of your project.

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

I am sure that I'm wrong here but how would i place it?

{

  "iisSettings": {

    ...

  },

  "profiles": {

    ...

    "Debug with Firefox" : { // ????? How do i set up this Profile?

      "name": "Launch index.html",

      "type": "firefox",

      "request": "launch",

      "reAttach": true,

      "file": "${workspaceFolder}/index.html"

   }

  }

}

Any knowledge on this would be highly appreciated!

Kind Regards

angular debugging firefox visual-studio-2017 angular7

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

edited Dec 2 '18 at 10:19

Goncalo Peres

1,4691619

asked Nov 24 '18 at 16:37

Fy Z1K

asked Nov 24 '18 at 16:37

Fy Z1K

asked Nov 24 '18 at 16:37

Fy Z1K

Any update for this issue? Have you resolved this issue? If not, would you please let me know the latest information about this issue?

– Leo Liu-MSFT
Nov 27 '18 at 2:55

Well the issue still is that i can't debug the typescript code in VS 2017 with firefox and i installed chrome on my machine but i haven't tested it so far since i'm in the middle of something else. But as you say it will probably work in chrome. Is the chrome debugger a plugin for VS 2017? Or do i have to install a plugin on chrome for vs debugging? or how does it work? And i've looked at the User Voice page. if the issue still exists in lets say 2 or 3 months i will provide a suggestion for firefox integration. can't be far since vs already supports chrome. Should be easy no?

– Fy Z1K
Nov 27 '18 at 22:21

AFAIK, if you are use chrome, you do not need to install any debugger plugin for VS 2017, you can check the blog blogs.msdn.microsoft.com/webdev/2016/11/21/… for some more details.

– Leo Liu-MSFT
Nov 28 '18 at 1:18

Thank you for the doc-link. I checked it and it works if i debug my app on google chrome. Seems it's an Firefox issue or VS simply not supporting FF. Imo Microsoft should cover it aswell since there are still usecases where running an app on firefox becomes handy... I'll leave that as a note to myself and later for the uservoice. I'd like to see that feature for vs17 :)

– Fy Z1K
Nov 30 '18 at 22:22

add a comment |

Any update for this issue? Have you resolved this issue? If not, would you please let me know the latest information about this issue?

– Leo Liu-MSFT
Nov 27 '18 at 2:55

Well the issue still is that i can't debug the typescript code in VS 2017 with firefox and i installed chrome on my machine but i haven't tested it so far since i'm in the middle of something else. But as you say it will probably work in chrome. Is the chrome debugger a plugin for VS 2017? Or do i have to install a plugin on chrome for vs debugging? or how does it work? And i've looked at the User Voice page. if the issue still exists in lets say 2 or 3 months i will provide a suggestion for firefox integration. can't be far since vs already supports chrome. Should be easy no?

– Fy Z1K
Nov 27 '18 at 22:21

AFAIK, if you are use chrome, you do not need to install any debugger plugin for VS 2017, you can check the blog blogs.msdn.microsoft.com/webdev/2016/11/21/… for some more details.

– Leo Liu-MSFT
Nov 28 '18 at 1:18

Thank you for the doc-link. I checked it and it works if i debug my app on google chrome. Seems it's an Firefox issue or VS simply not supporting FF. Imo Microsoft should cover it aswell since there are still usecases where running an app on firefox becomes handy... I'll leave that as a note to myself and later for the uservoice. I'd like to see that feature for vs17 :)

– Fy Z1K
Nov 30 '18 at 22:22

Any update for this issue? Have you resolved this issue? If not, would you please let me know the latest information about this issue?

– Leo Liu-MSFT
Nov 27 '18 at 2:55

Well the issue still is that i can't debug the typescript code in VS 2017 with firefox and i installed chrome on my machine but i haven't tested it so far since i'm in the middle of something else. But as you say it will probably work in chrome. Is the chrome debugger a plugin for VS 2017? Or do i have to install a plugin on chrome for vs debugging? or how does it work? And i've looked at the User Voice page. if the issue still exists in lets say 2 or 3 months i will provide a suggestion for firefox integration. can't be far since vs already supports chrome. Should be easy no?

– Fy Z1K
Nov 27 '18 at 22:21

AFAIK, if you are use chrome, you do not need to install any debugger plugin for VS 2017, you can check the blog blogs.msdn.microsoft.com/webdev/2016/11/21/… for some more details.

– Leo Liu-MSFT
Nov 28 '18 at 1:18

Thank you for the doc-link. I checked it and it works if i debug my app on google chrome. Seems it's an Firefox issue or VS simply not supporting FF. Imo Microsoft should cover it aswell since there are still usecases where running an app on firefox becomes handy... I'll leave that as a note to myself and later for the uservoice. I'd like to see that feature for vs17 :)

– Fy Z1K
Nov 30 '18 at 22:22

add a comment |

1 Answer
1

active

oldest

votes

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

No, this extension is for Visual Studio Code, not Visual Studio. So you could not use it for Visual Studio.

Debugger for Firefox:

A Visual Studio Code extension to debug your web application or
browser extension in Firefox.

Besides, The old Visual Studio debugger allowed to debug both backend .NET code and client-side JavaScript running in the browser, but only IE browser was supported in the old VS versions like the VS2015.

You can debug your Angular 7 application in Chrome from inside Visual Studio 2017, Visual Studio team Provide integrated JavaScript debugging in Google Chrome browsers, but for Firefox support, we have to open a new thread on the user voice:

Provide integrated JavaScript debugging in Firefox and Google Chrome browsers

When there are enough communities vote and add comments for this feedback, the product team member will take this feedback seriously.

At this moment, you can use Google Chrome to debug your Angular 7 application.

Hope this helps.

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460218%2fdebug-angular-7-application-in-firefox-via-visual-studio-community-2017%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

No, this extension is for Visual Studio Code, not Visual Studio. So you could not use it for Visual Studio.

Debugger for Firefox:

A Visual Studio Code extension to debug your web application or
browser extension in Firefox.

Provide integrated JavaScript debugging in Firefox and Google Chrome browsers

When there are enough communities vote and add comments for this feedback, the product team member will take this feedback seriously.

At this moment, you can use Google Chrome to debug your Angular 7 application.

Hope this helps.

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

add a comment |

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

No, this extension is for Visual Studio Code, not Visual Studio. So you could not use it for Visual Studio.

Debugger for Firefox:

A Visual Studio Code extension to debug your web application or
browser extension in Firefox.

Provide integrated JavaScript debugging in Firefox and Google Chrome browsers

When there are enough communities vote and add comments for this feedback, the product team member will take this feedback seriously.

At this moment, you can use Google Chrome to debug your Angular 7 application.

Hope this helps.

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

add a comment |

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

No, this extension is for Visual Studio Code, not Visual Studio. So you could not use it for Visual Studio.

Debugger for Firefox:

A Visual Studio Code extension to debug your web application or
browser extension in Firefox.

Provide integrated JavaScript debugging in Firefox and Google Chrome browsers

When there are enough communities vote and add comments for this feedback, the product team member will take this feedback seriously.

At this moment, you can use Google Chrome to debug your Angular 7 application.

Hope this helps.

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

Does that mean i need to use launchSettings.json from my project? And if so, how will the configuration look like?

No, this extension is for Visual Studio Code, not Visual Studio. So you could not use it for Visual Studio.

Debugger for Firefox:

A Visual Studio Code extension to debug your web application or
browser extension in Firefox.

Provide integrated JavaScript debugging in Firefox and Google Chrome browsers

When there are enough communities vote and add comments for this feedback, the product team member will take this feedback seriously.

At this moment, you can use Google Chrome to debug your Angular 7 application.

Hope this helps.

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

answered Nov 26 '18 at 2:52

Leo Liu-MSFT

19.6k22433

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk