how to debug javascript embedded in view

Question

I want to debug java-script or j-query embedded in the same view of razor page in google chrome

@section Scripts
{
<script type="text/javascript">
    $(document).ready(function ()
    {
        var myClass = new MyClass();
        myClass.DoSomeStuff();
    });
</script>
}

how to debug and put break point in google chrome. because i cannot find script in source tab?

Answer 1

Did you try to add the word debugger into your code ? maybe it can help you.

<script type="text/javascript">
$(document).ready(function ()
{
    debugger
    var myClass = new MyClass();
    myClass.DoSomeStuff();
});

Answer 2

In chrome dev tools there is a debug tool.

1. Go to Dev Tools (F12)
2. Go to the sources tab
3. Choose the file you want to debug

4. Choose breaking points, like this:

5. Press on F5 to start the debug mode.

6. Press on F10 to see each interaction.