2

I'm trying to get javascript debugging working in Visual Studio 2017 Community Edition for javascript that is included inline in a .cshtml file. But I can't seem to find any way to get it working.

My simple test is a asp.net core web project targeting the full framework.

/Controllers/HomeController.cs

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

/views/Home/Index.cshtml

    <html>
    <head>
        <script type="text/javascript">
            function doWork() {
                var num = 1;

                alert('Hello. Number is ' + num)
            }
        </script>
    </head>
    <body>
        <h1>JS Debugging test</h1>
        <button type="button" onclick="doWork()">Do Work</button>
    </body>
    </html>

I set a break point on the javascript alert line like so:

enter image description here

I'm using VS2017 with it's default settings on Windows 10, so VS is configured to launch Microsoft Edge when running a web application. Then I hit F5 to run the solution with debugging. It runs fine but the breakpoint changes to show it won't be hit and displays the message below:

enter image description here

I've confirmed that the web project properties has define debug constant checked and define trace constant checked, as well as optimize code unchecked. I'm seriously puzzeled as to why I can't debug javascript included in a script tag on a razor page.

enter image description here

I have googled like crazy on this one to no avail and am starting to think that VS 2017 doesn't support js debugging of script on a razor page. I recently found someone else stating as much about VS2012 on here: The breakpoint will not currently be hit. No symbols have been loaded But I'm hoping VS2017 supports this debugging scenario.

So, how can I get VS 2017 to support debugging of javascript placed in a script tag in a .cshtml file, or is that just not possible?

RonC
  • 31,330
  • 19
  • 94
  • 139
  • 2
    You may want to be careful, this could almost be perceived as a rant in disguise. That being said, JavaScript is a client side process, which means debugging support will vary depending on which client (read: browser) is being attached to. – Claies May 31 '17 at 16:07
  • I'm familiar with release mode vs debug mode and I'm using debug mode as seen in the screenshots. Are you *sure* you use VS2017 to debug inline javascript in a .cshtml file rather than javascript on a .js file? – RonC May 31 '17 at 16:08
  • Thanks Claies I'l update the question to have a less ranty title. And not in the question I'm using the default config if VS so it's launching IE for the clientside debugging. – RonC May 31 '17 at 16:09
  • also, you may have to attach to the browser manually, since .cshtml files are technically not client side files; the client side file is generated dynamically from the .cshtml. When the application is running, the client side version will be in the solution explorer under "Script Documents". can you set your breakpoint in that document? – Claies May 31 '17 at 16:12
  • 1
    Confirm I get the same behaviour as you. That is pretty lame. – Jamiec May 31 '17 at 16:17
  • @Jamiec thanks for confirming the issue on your setup. I appreciate it. – RonC May 31 '17 at 16:25
  • @Claies I will try that work around but in the old web forms days VS supported debugging of javascript placed in a script tag on a .aspx page. So it seems a bit like a feature loss if it doesn't support it on a .cshtml page. – RonC May 31 '17 at 16:25
  • the problem is an .aspx page is still HTML and JavaScript, while a .cshtml file is mixed HTML and C#. there isn't a reliable way for the IDE to know which parts of the page are JavaScript and which parts are C#; the debugger is looking to debug the C# rendering portion, not the client side portion. if your scripts were in an actual script file, like a .js file, then the debugger knows it's debugging the client process since there is no server code, and can automatically attach. plus it's just generally a better practice to separate the code from the markup anyway.... – Claies May 31 '17 at 16:29
  • @Claies That may be mostly true, and may be the root of the issue but in .aspx web pages `c#` code could also be included: https://stackoverflow.com/questions/1158424/how-to-use-c-sharp-code-inside-tags-on-asp-net-page – RonC May 31 '17 at 16:32
  • `runat:server` works differently than the page being parsed and output to a different file. if you want to force the debugger, you can use `debugger;` in your javascript instead of trying to set a breakpoint. the `debugger;` keyword is ignored by the server side renderer, but is triggered on the client side. – Claies May 31 '17 at 16:35
  • unfortunately, this is indeed the design that microsoft chose to take with MVC and .cshtml; the type of debugger being used is chosen based on the tag of the file; .cshtml files tell the IDE to use the C# debugger, not the javascript debugger. – Claies May 31 '17 at 16:40
  • @Claies If you could write that up as the answer and cite a source I will accept it if it turns out to be the best answer. (which it may in fact be) – RonC May 31 '17 at 16:43

0 Answers0