How can I debug my MVC3 site with Chrome?

问题

I'm building an ASP.NET MVC3 website. I have some javascript in my .cshtml file:

<div>hello!</div>

<script type="text/javascript">
   $(document).ready(function () { alert("ready!"); })
</script>

Google Chrome's built-in debugger doesn't see this javascript snippet, so I can't debug it.

How can I set a breakpoint in this javascript snippet in Google Chrome's built-in debugger?

回答1:

Weird, works great for me:

1. Go to the Scripts tab
2. You will see a dropdown list of all referenced javascript files, select the one that corresponds to the inline scripts (:9038 in my screenshot below)
3. Set your breakpoint

You might also consider FireBug as an alternative.

回答2:

In MVC3, running the razor view engine, I've had braces really mess up the parsing of the view.

For instance, if you have:

@using(Html.BeginForm()){
<div>hello!</div>

<script type="text/javascript">
   $(document).ready(function () { alert("ready!"); });
</script>
}

You may have issues with the script's braces. Try changing it to:

  @{ Html.BeginForm(); }
    <div>hello!</div>

    <script type="text/javascript">
       $(document).ready(function () { 
            alert("ready!"); 
       });
    </script>
   @{ Html.EndForm(); }

This may or may not be the answer to your question, but it took me forever to figure out what was wrong with a few of my forms. I wasn't embedding scripts in them, though.. it was blocks for conditional logic that would break everything for me.

EDIT After a little more research, I found an issue someone had which led me to the solution: aspnet.codeplex.com/workitem/7551.

My commit message (from a codebase I don't physically have access to any longer) suggests it may have been bad markup. The dev who wrote the offending pages liked to use capitalized tags, even though we were using XHTML 1.1 doctype. He also had a lot of attributes being conditionally compiled and/or populated. For example:

<div class="something @myHelper(someFlag)"></div>
<div @{ isSomeFlag ? <text>class="asdf"</text> : "" }></div>

My solution should be considered a temporary fix.

来源：https://stackoverflow.com/questions/6617657/how-can-i-debug-my-mvc3-site-with-chrome