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.
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