visual studio 2019 or 2022, Edge Browser for javascript debugging stops at wrong line

Question

Using VS 2019 or 2022 community edition, I can debug javascript using IE just fine, however when using Chrome or Edge (chromium) the wrong line of code is shown at the breakpoint. The line of code highlighted is about 50 lines below the actual line.

With this html file, the breakpoint occurs 5 lines below "debugger;"

With this html file, the breakpoint occurs correctly on "debugger;"

Any ideas? Both html files work correctly in IE, but not in Edge. Using Visual Studio Community 2019 Version 16.11.6

This is a verified issue. See: https://developercommunity.visualstudio.com/t/Edge-Browser-for-javascript-debugging-st/1628778 for more info, and if this is affecting you, please add a comment there to let Microsoft know I'm not the only one. Seems they think it's a low priority

Answer 1

The render override below helped, but didn't always work, and could cause side effects, so I removed it. Instead I removed unneeded blank lines between tags from my MasterPage, then added extra lines at the top of the aspx page after the first line (<%@ Page Title.....) and before the first <asp:content line. I added "debugger;" to as the first line of JavaScript code that gets executed. Then load the page and see where the breakpoint in Visual Studio shows. Adding lines to the top of the aspx page will move the breakpoint up, and adding lines to the Masterpage (outside of tags) will move it down.

Once you determine the number of lines needed, add them to the top of any aspx page you are debugging and visual studio should stop at the "debugger" line..

--- old answer --- I have been able to override Render to mostly correct the problem. It's not perfect, but for most javascript sources (some may be off a line or two) it works. I created a MyPage class that inherits from System.Web.UI.Page, an added the code below. All your aspx.cs pages will need to inherit from MyPage.

It basically eliminates new lines and mostly avoids the problem. "IsDevelopmentSite" is a variable in my app that identifies that I'm working on a Dev computer, so this only runs in development.

        protected override void Render(HtmlTextWriter writer)
        {
            StringBuilder sb = new StringBuilder();
            HtmlTextWriter tw = new HtmlTextWriter(new System.IO.StringWriter(sb));
            base.Render(tw);
            string sContent = sb.ToString();

            if (IsDevelopmentSite && Request.Browser.Browser != "InternetExplorer")
            {
                var headEnd = sContent.IndexOf("</head>");
                if (headEnd > -1)
                {
                    string head = sContent.Substring(0, headEnd);
                    int script;
                    int style;
                    int start;
                    int end;
                    string h = "";
                    do
                    {
                        // remove all cr lf, outside <script> and <style> tags, and some cr lf within script and style.
                        script = head.IndexOf("<script");
                        style = head.IndexOf("<style");
                        if (style == -1 && script == -1)
                            break;

                        if (style == -1 || (script != -1 && script < style))
                        {
                            start = script;
                            end = head.IndexOf("</script>", start) + 9;

                            if (end < 9)
                                break; // no closing tag
                            h += head.Substring(0, start).Replace("\r\n", " ") + head.Substring(start, end - start).Replace(">\r\n", ">");
                        }
                        else
                        {
                            start = style;
                            end = head.IndexOf("</style>", start) + 8;
                            if (end < 8)
                                break; // no closing tag
                            h += head.Substring(0, start).Replace("\r\n", " ") + head.Substring(start, end - start).Replace("\r\n\r\n", "\r\n").Replace("\">\r\n", "\">");
                        }
                        head = head.Substring(end);
                    } while (true);
                    sContent = h + head + sContent.Substring(headEnd);
                }
            }
            writer.Write(sContent);
        }

Answer 2

From https://developercommunity.visualstudio.com I found an answer (but not a solution yet):

by Raghav Katyal [MSFT]3/12/2021

Thank you for your feedback. Visual Studio currently does not support debugging breakpoints set within aspx and cshtml files. Our current recommendation is to break out the script into separate .js files to be able to debug script within these files.

We use feedback from customers to prioritize features and will take this feedback item back as input into our prioritization process so we continue to make Visual Studio better.

Steve Zimmelman on Mar 16, 2021:

Thank you for your response. You are indeed right, IE debugger does support this scenario but the Edge/Chrome debuggers do not.

That being said, we are currently looking into enabling aspx and cshtml embedded JS debugging for all browsers. Until then please use IE debugger for embedded JS.

Edge/Chrome debugging should however work with separate js files. The logs you attached had the breakpoints set within aspx files. If you can repro the issue with separate js files and repost the recording and logs, we would be happy to look into it.

Answer 3

For Chrome, please the following:

1) if your VS has any other extensions, please disable any other installed extensions under Extensions--> Manage Extensions

2) try to reset all settings under Tools-->Import and Export settings-->Reset All settings--> General

3) close VS, delete component caches under C:\Users\xxx\AppData\Local\Microsoft\VisualStudio\16.0_xxxx\ComponentModelCache

4) delete .vs hidden folder under the solution folder, bin and obj folder

5) after that, restart your project, check Enable Javascript debuggigg for Asp.Net(Chrome,Edge and IE) option under Tools-->Options-->Debugging-->General

6) try to clean Chrome caches and then test again.

If it still does not help, please try to update it to the latest version or reset settings on Chrome.

Besides, you could also create a new asp net project and test if the new project has the issue.