Visualise a Razor View next to your Code

When I first started looking at developing some websites using c# I hit the books and PluralSight videos pretty hard. Even though there is a lot of information out there, I haven’t seen many people point this little nugget of information out.

Coming from WinForms and WPF I really missed being able to visualise the webpages whilst building them. Since Razor pages are a mashup of code (either VB or C#) and HTML, there isn’t (as such) an in-built designer. ┬áDon’t get me wrong, Razor is awesome! So, can you visualise your page next to your code? Yes you can, using the wonderful VS2012/VS2013 feature, ‘Page Inspector.’

Right click on your page in the solution tree, in my case, index.cshtml and select ‘View in Page Inspector’ on the context menu.

Context Menu Option

You can now see your screen and your code in Visual Studio! Yay! You can even make changes to the code, and then refresh the page to visually see your changes. How cool is that?

Page Inspector Example