#Edit html inspector how to#
#Edit html inspector install#
#Edit html inspector update#
#Edit html inspector code#
#Edit html inspector plus#

Next, you will have a quick look at the HTML window and how it maps elements for you.Д¬lick Inspect to put Page Inspector in Inspection Mode.Д¬lick the top part of the page that says 'Your logo here'. You might have thought that the footer defined in Index.cshtml, but it turned out to be in the _Layout.cshtml, and Page Inspector found it for you.

#Edit html inspector update#

Now, press Ctrl+Alt+Enter or click the Update Bar to see the results in the Page Inspector browser window. In the _Layout.cshtml page, the corresponding line is highlighted.ДЄdd some text to the end of the line in the _Layout.cshtml file. Now move your mouse pointer over the line with the copyright notice. As you can see, the footer area is defined in the layout file, and not the view itself. When you move the mouse pointer into the footer area, Page Inspector opens the _Layout.cshtml file and highlights the section of the layout page that you have selected. To see this, click Inspect and then scroll to the bottom of the page in the Page Inspector window.

Then you can modify the markup and see the resulting changes. Page Inspector lets you find markup whose location might not be obvious. Use Page Inspector to Make Changes to Markup The Styles tab shows the CSS rules for the element. As you move the mouse pointer, the HTML elements are highlighted. In Page Inspector, the HTML tab shows the HTML that was generated from the Razor syntax. If the HTML element comes from another source file, Visual Studio automatically opens the file.

#Edit html inspector plus#

As you do, the mouse pointer changes to a large plus sign, and the element underneath is highlighted:ДЄs you move the mouse pointer, Visual Studio highlights the corresponding Razor syntax in the source file. Now move your mouse over different parts of the page within Page Inspector.

#Edit html inspector code#

In Inspection Mode, when you hold the mouse pointer over any part of the rendered page, the corresponding source markup or code is highlighted. To put Page Inspector into Inspection Mode, click the Inspect button. In this tutorial, you will use the HTML and Styles tabs to navigate quickly and make changes to the application. The bottom pane is similar to the F12 Developer Tools in Internet Explorer. The bottom pane shows the page in HTML markup, along with some tabs that let you inspect different aspects of the page. The top pane of the Page Inspector window shows the current page in a browser window. If you prefer, you can dock it elsewhere, or undock the window. Right click the Index.cshtml file and choose View in Page Inspector.Д«y default, Page Inspector is docked as a window on the left side of the Visual Studio environment. In Solution Explorer, expand the Views folder and then the Home folder. In Visual Studio 2012, you can right-click any view in your project, select View in Page Inspector, and Page Inspector will figure out the route and display the page. Now that you have an application to work with, you can use Page Inspector to examine and modify it. In the New ASP.NET MVC 4 Project dialog box, select Internet Application. On the left, expand Visual C#, select Web, and then select ASP.NET MVC4 Web Application. In Visual Studio, choose File > New Project. To check which version you have, run Visual Studio and select About Microsoft Visual Studio from the Help menu.ДЇirst, create a web application that you will use Page Inspector with. Page Inspector is bundled with Microsoft Web Developer Tools.

#Edit html inspector install#

To get the latest version of Page Inspector, use Web Platform Installer to install the Windows Azure SDK for.

Visual Studio 2012 or Visual Studio Express 2012 for Web.

Mapping Dynamic Page Elements to JavaScript.

Preview CSS Changes in the Styles window.

Use Page Inspector to Make Changes to Markup.

The tutorial uses an MVC Project, but you can also use Page Inspector for Web Forms and other ASP.NET applications.

#Edit html inspector how to#

This tutorial shows how to enable Inspection Mode, and then quickly locate and edit markup and CSS within your web project. You can browse any MVC view, quickly find the sources of rendered markup, and use browser tools right within the Visual Studio environment. Select any element in the integrated browser, and Page Inspector instantly highlights the element's source and CSS. Page Inspector in Visual Studio 2012 is a web development tool with an integrated browser.