none
Client-side JavaScript Debugging Not Working RRS feed

  • Question

  • I am just starting to explore how to develop a web app using VS 2017 Community on my Windows 10 laptop.  I have downloaded a demo MVC app to look at and learn.  I have opened it in VS as an ASP.Net Core 2.1 app.  After doing that, I have set some breakpoints in the client-side JavaScript, but the breakpoints aren't working.  I have Chrome set as my default browser (Version 81.0.4044.138 (Official Build) (64-bit)), and the app does open in an otherwise empty Chrome (i.e. there are no other tabs open).  I have checked that Tools / Options / Debugging / General / Enable JavaScript debugging for ASP.Net is checked. And, of course, I have ASP.Net and web development installed in VS.

    I am not sure what I may have just changed, but now when I set a break point in the js, the app stops on the 1st html statement that follows the </script>.

    So what am I missing?  Thanks.  Steve






    Saturday, May 16, 2020 2:58 PM

Answers

  • Hi Cincy Steve,

    For non-MVC project with js and ts scripts, we suggest you can follow this document to re-configure you project and then debug it in browser.

    Best Regards,

    Dylan


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com

    • Marked as answer by Cincy Steve Wednesday, May 20, 2020 4:00 PM
    Wednesday, May 20, 2020 7:44 AM

All replies

  • Hi Cincy Steve,

    You could follow this workaround:Debug client-side script to debug js app in visual studio, and if the breakpoints still fail to be hit, please check these points:

    • You closed all browser instances, including Chrome extensions (using the Task Manager), so that you can run the browser in debug mode.
    • Make sure you start the browser in debug mode.
    • Make sure that your source map file includes the correct relative path to your source file and that it doesn't include unsupported prefixes such as webpack:///, which prevents the Visual Studio debugger from locating a source file.For example, a reference like webpack:///.app.tsx might be corrected to ./app.tsx. You can do this manually in the source map file (which is helpful for testing) or through a custom build configuration.

    Any feedback will be expected.

    Best Regards,

    Dylan

     

    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com

    Monday, May 18, 2020 8:48 AM
  • Dylan - 

    Thanks so much for your guidance.  I was able to get client-side JavaScript debugging to work following the link that was in the one you provided (i.e. following https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019 for Asp.NET Core apps).  I had tried that previously, but may not have had a recent enough version of VS (V 15.9.23).  Anyway, I installed VS Community 2019 before trying again, which may have been the key.

    What I have realized is that in my original post, I may not have been specific enough about what I wanted.  In particular, the link above worked when I used an MVC TypeScript Web app with VS Community 2019, but when I tried it with a non-MVC TypeScript Web app, the tsconfig.json code threw a couple of Build errors.  So, I am now writing for help on enabling client-side JavaScript debugging with a non-MVC app.  I have tried to find a solution to this more specific scenario online, but without success. 

    I am hoping this qualifies as a clarification of my original question, though I am of course will to post a whole new question if required.

    Thanks again.  Steve


    Monday, May 18, 2020 7:41 PM
  • Hi Cincy Steve,

    For non-MVC project with js and ts scripts, we suggest you can follow this document to re-configure you project and then debug it in browser.

    Best Regards,

    Dylan


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com

    • Marked as answer by Cincy Steve Wednesday, May 20, 2020 4:00 PM
    Wednesday, May 20, 2020 7:44 AM
  • Dylan - 

    Thanks for the quick response.  The "this document" link was very helpful.  It showed me how to solve my problem.

    Steve

    Wednesday, May 20, 2020 4:00 PM