Search code examples
asp.net-mvc-3debuggingrazorrendering-engine

How can I show which cshtml files are building my page?

The scenario

My team is building a fairly complex MVC3/C# site. There's been some refactoring lately, and many of the views, partial views, and templates have moved around. When I look at one of our pages, it's hard to tell which cshtml file is responsible for which piece of the page. I'd like a faster way to see which file I should be working on.

Why it's a problem

  • There are a lot of files in our presentation layer, and the folder structure is complicated.
  • Some cshtml files have the same name, but different file paths.
  • Our routing tables are similarly complex.
  • We've made significant use of layouts, shared views, partial views, and templates. A single page could have upwards of 10 cshtml files building it.
  • Most of the client-side text comes from resource strings, so I can't just Ctrl-F for the text on the page.
  • Stepping through the debugger doesn't save me much time.

None of these things is a show-stopper, but they make this time-consuming.

What I want

When I run it on localhost (only), I'd like the rendered HTML to come out something like this:

<!-- From: ~/shared/_layout.cshtml -->
<html>
<body>
    <!-- From: ~/admin/view.cshtml -->
    <h1>Here comes a list of widgets:</h1>

     <!-- From: ~/widgets/list.cshtml -->
     <ul>
         <!-- From: ~/widgets/view.cshtml -->
         <li>Widget 1</li>
         ...etc.

I'd be open to other ways of getting the info I need, including third-party tools.

Ideas so far

My idea was to tweak the base class we're using for our pageBaseType, but I'm a bit new to MVC (< 1 year), and that's still a bit over my head. I'm not sure which method to override, or how to get and render the view's filename.

Solution

  • There's some nuget packages available for this kind of debugging:

    http://nuget.org/packages/Glimpse.Mvc3

    http://nuget.org/packages/routedebugger

    https://preview.nuget.org/packages/RouteMagic