ASP.NET Web Forms’da Visual Studio 2012 için Sayfa Denetçisini KullanmaUsing Page Inspector for Visual Studio 2012 in ASP.NET Web Forms

, Tim Ammann tarafındanby Tim Ammann

Visual Studio 2012 için sayfa denetçisi, tümleşik bir tarayıcıyla bir Web geliştirme aracıdır.Page Inspector for Visual Studio 2012 is a web development tool with an integrated browser. Tümleşik tarayıcıda herhangi bir öğeyi seçin ve sayfa denetçisi öğenin kaynağını ve CSS 'sini anında vurgular.Select any element in the integrated browser, and Page Inspector instantly highlights the element's source and CSS. Uygulamanızdaki herhangi bir sayfaya gözatabilir, işlenmiş biçimlendirmenin kaynaklarını hızlıca bulabilir ve Visual Studio ortamında doğrudan tarayıcı araçları kullanabilirsiniz.You can browse any page in your application, quickly find the sources of rendered markup, and use browser tools right within the Visual Studio environment.

Bu öğreticide Inceleme modunun nasıl etkinleştirileceği ve ardından Web projenizdeki CSS kuralları ile metinlerin hızlı bir şekilde nasıl konumlandırmaları ve düzenlenmesi gösterilmektedir.This tutorial shows how to enable Inspection Mode and then quickly locate and edit CSS rules and text within your web project. Öğretici bir Web Forms uygulama projesi kullanır, ancak Web sitesi projeleri ve MVC uygulamaları Için sayfa denetçisi 'ni de kullanabilirsiniz.The tutorial uses a Web Forms Application Project, but you can also use Page Inspector for Web Site projects and MVC applications.

Öğreticide aşağıdaki bölümler bulunur:The tutorial has the following sections:

ÖnkoşullarPrerequisites

Web uygulaması oluşturmaCreate a Web Application

Uygulamayı görüntülemek için sayfa denetçisini kullanmaUse Page Inspector to View the Application

Inceleme modunu etkinleştirEnable Inspection Mode

Işaretlemede değişiklik yapmak için sayfa denetçisini kullanınUse Page Inspector to Make Changes to Markup

İnceleme modu ve HTML penceresiInspection Mode and the HTML Window

Stiller penceresinde CSS değişikliklerinin önizlemesiPreview CSS Changes in the Styles Window

CSS otomatik eşitlemeCSS Auto Sync

CSS renk seçiciyi kullanmaUsing the CSS Color Picker

ÖnkoşullarPrerequisites

Note

Sayfa denetçisinin en son sürümünü almak için, .NET 2,0 için Azure SDK 'yı yüklemek üzere Web Platformu Yükleyicisi 'ni kullanın.To get the latest version of Page Inspector, use Web Platform Installer to install the Azure SDK for .NET 2.0.

Sayfa denetçisi Microsoft Web Geliştirici Araçları ile paketlenmiştir.Page Inspector is bundled with Microsoft Web Developer Tools. En son sürüm 1,3 ' dir.The latest version is 1.3. Sahip olduğunuz sürümü denetlemek için, Visual Studio 'Yu çalıştırın ve Yardım menüsünden Microsoft Visual Studio hakkında ' yı seçin.To check which version you have, run Visual Studio and select About Microsoft Visual Studio from the Help menu.

Web uygulaması oluşturmaCreate a Web Application

İlk olarak, ile sayfa denetçisi kullanacağınız bir Web uygulaması oluşturacaksınız.First, you will create a web application that you will use Page Inspector with. Visual Studio 'da dosya > Yeni proje' yi seçin.In Visual Studio, choose File > New Project. Sol tarafta, görsel C# ' i genişletin, Web' i seçin ve ardından ASP.NET Web Forms uygulama' yı seçin.On the left, expand Visual C#, select Web, and then select ASP.NET Web Forms Application.

Yeni Web Forms uygulaması

Tamam’a tıklayın.Click OK.

Uygulama kaynak görünümü ' nde açılır.The application opens in Source view.

Kaynak görünümünde yeni Web Forms uygulaması

Artık birlikte çalışmak üzere bir uygulamanız olduğuna göre, sayfayı incelemek ve değiştirmek için sayfa denetçisi ' ni kullanabilirsiniz.Now that you have an application to work with, you can use Page Inspector to examine and modify it.

Uygulamayı görüntülemek için sayfa denetçisini kullanmaUse Page Inspector to View the Application

Daha sonra, uygulamayı sayfa denetçisi ile birlikte görüntülenir.Next, you will view the application with Page Inspector. Çözüm Gezgini' de projeye sağ tıklayın ve ardından sayfa denetçisinde görüntüle' yi seçin.In Solution Explorer, right click the project, and then choose View in Page Inspector.

Sayfa denetçisinde görüntüle

Varsayılan olarak, sayfa denetçisi ilk kez başlatıldığında, Visual Studio ortamının sol tarafında dar bir pencere olarak yerleştirilir.By default, when Page Inspector launches for the first time, it is docked as a narrow window on the left side of the Visual Studio environment. Sol tarafta bırakın ve bunu sizin için rahat olan bir genişliğe ayarlayın veya en üstteki, alttaki veya sağdaki araç alanlarından birine yerleştirin:Leave it docked on the left side and set it to a width that is comfortable for you, or dock it in one of the tool areas on the top, bottom, or right:

Sayfa denetçisi yerleştirme konumları

Sayfa denetçisi penceresini çıkardıysanız, Visual Studio 'Nun dışına veya varsa ikinci bir monitöre yerleştirebilirsiniz.If you undock the Page Inspector window, you can place it outside Visual Studio, or even on a second monitor if you have one. Bununla birlikte, sayfa denetçisi penceresi yok edildiğinde, sayfa denetçisi ve Visual Studio arasında ALT + TAB 'a giderek, araçlar > seçenekler > ortam > Sekmeler ve pencereler' e gidin ve sekme kutusu' nun altında, kayan araç pencereleri ' nin her zaman ana pencerenin en üstünde yer alanonay kutusunun işaretini kaldırın:However, in order to ALT+TAB between Page Inspector and Visual Studio when the Page Inspector window is undocked, go to Tools > Options > Environment > Tabs and Windows, and under Tab Well, clear the check box called Floating tool windows always stay on top of the main window:

Kayan araç Windows onay kutusunu Visual Studio ve yerleştirilmemiş sayfa denetçisi penceresi arasında ALT + TAB olarak temizleyin

Sayfa denetçisi penceresinin üst bölmesi, geçerli sayfayı bir tarayıcı penceresinde gösterir.The top pane of the Page Inspector window shows the current page in a browser window. Alt bölmede, sol taraftaki HTML biçimlendirme sayfası ve sayfanın farklı yönlerini incelemenize olanak tanıyan bazı sekmeler gösterilir.The bottom pane shows the page in HTML markup on the left, and some tabs on the right that let you inspect different aspects of the page. Alt bölme, Internet Explorer 'daki F12 geliştirici araçları benzerdir.The bottom pane is similar to the F12 Developer Tools in Internet Explorer. (Ancak, Geliştirici araçlarının aksine, Visual Studio 'da doğrudan sayfa denetçisi kullanabilirsiniz.)(However, unlike the developer tools, you can use Page Inspector right within Visual Studio.)

Sayfa Denetçisi

Bu öğreticide, hızlı bir şekilde gezinmenize ve uygulamada değişiklik yapmanıza yardımcı olması için sayfa denetçisi tarayıcı bölmesini ve HTML ve Stiller sekmelerini kullanacaksınız.In this tutorial, you will use the Page Inspector browser pane, and the HTML and Styles tabs to help you rapidly navigate and make changes to the application.

Inceleme modunu etkinleştirEnable Inspection Mode

Daha sonra, sayfa denetçisi Inceleme modunun nasıl çalıştığını görürsünüz.Next, you will see how Page Inspector's Inspection Mode works. Sayfa denetçisi penceresinde, Denetle düğmesine tıklayın.In the Page Inspector window, click the Inspect button.

Öğeyi İncele

İnceleme modunu çalışırken görmek için farenizi sayfa denetçisi tarayıcı penceresi içinde sayfanın farklı bölümlerine taşıyın.To see inspection mode in action, move your mouse over different parts of the page within the Page Inspector browser window. Yaptığınız gibi fare işaretçisi büyük artı işaretine dönüşür ve alttaki öğe vurgulanır:As you do, the mouse pointer changes to a large plus sign, and the element underneath is highlighted:

Div üzerinde vurgulama. içerik-sarmalayıcı

Fare işaretçisini taşırken,As you move the mouse pointer, note that

  • Kaynak görünümündeki içerikler, sayfadaki seçili öğeye karşılık gelen biçimlendirmeyi göstermek için değişir.The content in Source view changes to show the markup corresponding to the selected element on the page. İlgili biçimlendirme vurgulanır.The relevant markup is highlighted. Kaynak başka bir dosya ise, bu dosya kaynak görünümünde ilgili biçimlendirme vurgulanarak açılır.If the source is in another file, that file is opened in Source view with the relevant markup highlighted.

  • Sayfa denetçisindeki HTML sekmesinde görünen biçimlendirme Ayrıca sayfadaki seçili öğeye karşılık gelen şekilde değişir.The markup displayed in the HTML tab in Page Inspector also changes to correspond to the selected element on the page. HTML sekmesinde, ilgili biçimlendirme özetlenmiştir.In the HTML tab, the relevant markup is outlined.

  • Stiller sekmesi, geçerli SEÇIMLE ilgili CSS kurallarını gösterir.The Styles tab shows the CSS rules relevant to the current selection.

Işaretlemede değişiklik yapmak için sayfa denetçisini kullanınUse Page Inspector to Make Changes to Markup

Şimdi, konumu bulma ve biçimlendirme veya metin üzerinde değişiklik yapmak için sayfa denetçisini nasıl kullanabileceğinizi göreceksiniz.Now you will see how you can use Page Inspector to find and make changes to markup or text whose location might not be immediately obvious.

Sayfa denetçisi ' ni Inceleme moduna alın ve ardından giriş sayfasının en altına kaydırın.Put Page Inspector in Inspection Mode and then scroll to the bottom of the home page.

Alt bilgi alanını girdikten hemen sonra, sayfa denetçisi site. Master düzen dosyasını diğer sekmelerin sağındaki geçici bir sekmede açar ve seçtiğiniz ana sayfanın bölümünü vurgular.As soon as you enter the footer area, Page Inspector opens the Site.Master layout file in Source view in a temporary tab to the right of the other tabs and highlights the section of the master page that you have selected. Bu, sayfa denetçisinin, gerçekten açtığınız farklı bir dosyadan gelmiş olabilecek bir sayfada içerik bulma ve görüntüleme şeklini gösterir.This shows you how Page Inspector can find and display content on a page that might actually come from a different file than the one you originally opened.

Inceleme modundaki alt bilgi vurguları

Sayfa denetçisi tarayıcı penceresinde, fare işaretçinizi, telif hakkı bildiriminin bulunduğu çizginin üzerine getirin.In the Page Inspector browser window, move your mouse pointer over the line with the copyright notice.

Site. Master sayfasında, karşılık gelen çizgi vurgulanır.In the Site.Master page, the corresponding line is highlighted.

Alt bilgi için telif hakkı satırı vurgulanmış

Site. Master dosyasındaki satırın sonuna bir metin ekleyin.Add some text to the end of the line in the Site.Master file.

<p>&kopyalama; <%: DateTime. Now. Year%>-My ASP.NET Application rol!</p><p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application Rocks!</p>

Şimdi, sayfa denetçisi tarayıcı penceresinde sonuçları görmek için CTRL + ALT + ENTER tuşlarına basın veya güncelleştirme çubuğuna tıklayın.Now, press Ctrl+Alt+Enter or click the Update Bar to see the results in the Page Inspector browser window.

ASP.NET uygulamamın özellikleri!

Altbilginin default. aspx sayfasında olduğunu, ancak ana düzen sayfasında olduğunu düşündük ve sayfa denetçisi sizin için buldu.You might have thought that the footer was on the Default.aspx page, but it turned out to be in the master layout page, and Page Inspector found it for you.

İnceleme modu ve HTML penceresiInspection Mode and the HTML Window

Daha sonra, HTML penceresine ve sizin için öğeleri nasıl eşlediği hakkında hızlı bir görünüme sahip olursunuz.Next, you will have a quick look at the HTML window and how it maps elements for you.

Sayfa denetçisini Inceleme moduna alın.Put Page Inspector in Inspection Mode.

Öğeyi İncele

Sayfanın "buraya logonuzu" belirten üst kısmına tıklayın.Click the top part of the page that says "your logo here". Belirli bir öğeyi daha ayrıntılı bir şekilde inceleriz, bu nedenle fare işaretçisini taşırken tarayıcı penceresinde görüntüleme artık görünmez.You are examining a particular element in more detail, so the display in the browser window no longer changes as you move the mouse pointer.

Şimdi, fare işaretçisini HTML penceresine taşıyın.Now move the mouse pointer to the HTML window. Fare işaretçisini taşırken, sayfa denetçisi HTML penceresi içindeki öğeyi özetler ve tarayıcı penceresinde buna karşılık gelen öğeyi vurgular.As you move the mouse pointer, Page Inspector outlines the element within the HTML window and highlights the corresponding element in the browser window.

HTML penceresi

Daha önce olduğu gibi, sayfa denetçisi site. Master dosyasını sizin için geçici bir sekmede açar. site. Master sekmesine tıklayın ve ilgili biçimlendirme <üst bilgi> bölümünde vurgulanır:As before, Page Inspector opens the Site.Master file for you in a temporary tab. Click the Site.Master tab, and the corresponding markup is highlighted in the <header> section:

Vurgulanan işaretleme

Stiller penceresinde CSS değişikliklerinin önizlemesiPreview CSS Changes in the Styles Window

Daha sonra, CSS değişikliklerini önizlemek için sayfa denetçisi stilleri penceresini nasıl kullanabileceğinizi göreceksiniz.Next, you will see how you can use the Page Inspector Styles window to preview changes to CSS.

Inceleme moduna sayfa denetçisi koymak için Denetle düğmesine tıklayın.Click the Inspect button to put Page Inspector in Inspection Mode.

Sayfa denetçisi tarayıcı penceresinde, div. Content-Wrapper etiketi görünene kadar fare Işaretçisini "giriş sayfası" bölümünün üzerine taşıyın.In the Page Inspector browser window, move the mouse pointer over the "Home Page" section until the div.content-wrapper label appears.

Öğelerin üzerine gelindiğinde

Div. Content-Wrapper bölümünün içine bir kez tıklayın ve sonra fare işaretçisini Stiller penceresine taşıyın.Click within the div.content-wrapper section once, and then move the mouse pointer to the Styles window. . Öne çıkan. Content-sarmalayıcı sınıfı seçicisinin altında, arka plan rengi özelliği için onay kutusunu temizleyin ve seçin.Under the .featured .content-wrapper class selector, clear and select the checkbox for the background-color property.

Arka plan rengini temizle

Sayfa denetçisi tarayıcı penceresinde değişikliğin anında nasıl önizlediğine dikkat edin.Notice how the change previews instantly in the Page Inspector browser window.

Onay kutusunu yeniden seçin, sonra özellik değerini çift tıklatın ve reddeğiştirin.Select the checkbox again, then double-click the property value and change it to red. Değişiklik hemen görüntülenir:The change shows immediately:

Kırmızı arka plan rengi

Stiller penceresi, değişiklikleri stil sayfasına IŞLEMEDEN önce CSS değişikliklerinin test edilmesi ve önizlenmesi kolaylaştırır.The Styles window makes it easy to test and preview CSS changes before you commit the changes to the style sheet itself.

CSS otomatik eşitlemeCSS Auto Sync

Note

Bu özellik, sayfa denetçisinin 1,3 sürümünü gerektirir.This feature requires version 1.3 of Page Inspector.

CSS otomatik eşitleme özelliği, bir CSS dosyasını doğrudan düzenlemenizi sağlar ve değişiklikleri sayfa denetçisi tarayıcısında hemen görebilirsiniz.The CSS Auto-Sync feature allows you to edit a CSS file directly, and see the changes immediately in the Page Inspector browser.

Inceleme moduna sayfa denetçisi koymak için Denetle ' ye tıklayın.Click Inspect to put Page Inspector in Inspection Mode.

Sayfa denetçisi tarayıcısında, div. Content-Wrapper etiketi görünene kadar fare Işaretçisini "giriş sayfası" bölümünün üzerine taşıyın.In the Page Inspector browser, move the mouse pointer over the "Home Page" section until the div.content-wrapper label appears. Bu öğeyi seçmek için bir kez tıklayın.Click once to select this element.

Stiller penceresi, bu öğe IÇIN tüm CSS kurallarını gösterir.The Styles window shows all of the CSS rules for this element. . Öne çıkan. Content-Wrapper sınıf seçiciyi bulmak için aşağı kaydırın.Scroll down to find the .featured .content-wrapper class selector. ". Öne çıkan. içerik-sarmalayıcı" seçeneğine tıklayın.Click on ".featured .content-wrapper". Sayfa denetçisi, bu stili (site. css) tanımlayan CSS dosyasını açar ve ilgili CSS stilini vurgular.Page Inspector opens the CSS file that defines this style (Site.css) and highlights the corresponding CSS style.

CSS dosyası

Şimdi background-color değerini "Red" olarak değiştirin.Now change the value for background-color to "red". Değişiklik, sayfa denetçisi tarayıcısında hemen görünür.The change appears immediately in the Page Inspector browser.

Sayfa denetçisi tarayıcısı

CSS renk seçiciyi kullanmaUsing the CSS Color Picker

Daha sonra, varsayılan uygulamada Vurgulanan metin için CSS 'yi hızlı bir şekilde bulmak ve değiştirmek üzere sayfa denetçisi 'ni nasıl kullanacağınızı öğreneceksiniz.Next, you'll learn how to use Page Inspector to quickly find and change the CSS for highlighted text in the default application. Bu örnekte, mavi vurgulamayı beğenmemenizi ve bunu başka bir renkle değiştirmek istediğinizi öğrendiniz.In this example, you've decided that you don't like the blue highlighting and want to change it to another color.

Denetle düğmesine tıklayın.Click the Inspect button.

Öğeyi İncele

Sayfa denetçisi tarayıcı penceresinde, CSS "Mark" etiketinin görünmesi için fare işaretçisini vurgulanan "videolar, öğreticiler ve örnekler" metninin üzerine taşıyın.In the Page Inspector browser window, move the mouse pointer over the highlighted "videos, tutorials, and samples" text so that the CSS "mark" label appears.

Mark öğesinin üzerine gelindiğinde

Seçmek için metne tıklayın.Click the text to select it. Karşılık gelen CSS işaret Seçicisi, Stiller penceresinin alt kısmında görünür.The corresponding CSS mark selector appears at the bottom of the Styles window.

Stiller penceresinde işaret Seçicisi

İşaret seçicisine tıklayın.Click the mark selector. Bu, Web uygulaması için site. css dosyasını açar.This opens the Site.css file for the web application. Site. css sekmesine tıklayın ve seçici için karşılık gelen CSS vurgulanır:Click the Site.css tab, and the corresponding CSS for the selector is highlighted:

stil sayfasında işaret Seçicisi

Arka plan rengi özelliği ile satırı seçin ve kaldırın.Select and remove the line with the background-color property.

Şimdi işaretle arkaplan-Color özelliği için yeni bir renk seçmek üzere yeni Visual STUDIO 2012 CSS renk seçiciyi kullanacaksınız.You will now use the new Visual Studio 2012 CSS color picker to choose a new color for the mark background-color property.

Visual Studio 2012 CSS renk seçiciyi kullanmaUsing the Visual Studio 2012 CSS Color Picker

Visual Studio 2012 ' deki CSS Düzenleyicisi, renkleri seçip eklemeyi kolaylaştıran bir renk seçicisine sahiptir.The CSS editor in Visual Studio 2012 has a color picker that makes it easy to choose and insert colors. Basit bir renk çubuğuna ve daha hassas denetim sağlayan bir "açılır" seçicisine sahiptir.It has a simple color bar and a "pop-down" picker that offers finer control.

Renk Seçici standart bir renk paleti içerir, standart renk adlarını, karma kodları, RGB, RGBA, HSL ve HSLA renklerini destekler ve belgede en son kullandığınız renklerin bir listesini tutar.The color picker includes a standard palette of colors, supports standard color names, hash codes, RGB, RGBA, HSL, and HSLA colors, and maintains a list of the colors you've used most recently in the document.

Arka plan rengi özelliğinin olduğu satırda "BC" yazın ve aşağı oka bir kez basın.On the line where the background-color property was, type "bc" and press the down arrow once.

Her sözcüğün ilk karakterini "Arkaplan-Color" gibi bir tire ayrılmış özellikte yazdığınızda, IntelliSense yalnızca eşleşen özellikleri göstermek için listeyi filtreler:When you type the first character of each word in a hyphen-separated property like "background-color", IntelliSense filters the list for you to show only the properties that match:

IntelliSense filtrelenmiş değerler

Şimdi bir iki nokta üst üste yazın.Now type a colon. Bunu yaptığınızda, tam arka plan rengi Özellik adı eklenir.When you do, the full background-color property name is inserted. # veya RGB yazın ( ve renk seçici çubuğu görünür:Type # or rgb(, and the color picker bar appears:

CSS Renk Seçici Çubuğu

Renk seçici çubuğunun nasıl çalıştığını görmek için fare işaretçisi ile renklerini tıklatın veya aşağı ok tuşuna basın ve ardından sağ ve sağ ok tuşlarını kullanarak renkleri çapraz geçiş yapın.To see how the color picker bar works, click its colors with the mouse pointer, or press the down arrow key and then use the left and right arrow keys to traverse the colors. Bir rengi ziyaret ettiğinizde, arka plan rengi özelliği için karşılık gelen değer önizlenebilir:When you visit a color, the corresponding value for the background-color property is previewed:

arka plan rengi Özellik değeri önizlenen

Bu noktada, değeri seçmek için ENTER tuşuna basabilir ve sonra noktalı virgül (;) CSS girdisini doldurun.At this point, you could press Enter to select the value and then a semicolon (;) to complete the CSS entry. Şimdilik renk seçici açılır ekranının nasıl çalıştığını görebilmeniz için sonraki bölüme gidin.For now, go on to the next section so that you can see how the color picker pop-down works.

Renk Seçici açılır penceresini kullanmaUsing the Color Picker Pop-Down

Renk çubuğu Aradığınız renge sahip olmadığında renk seçici açılır penceresini kullanabilirsiniz.When the color bar doesn't have the exact color that you're looking for, you can use the color picker pop-down.

Açmak için, renk çubuğunun sağ ucundaki çift köşeli çift ayraca tıklayın veya klavyede bir kez veya iki kez aşağı ok tuşuna basın.To open it, click the double chevron at the right end of the color bar, or press the Down Arrow once or twice on the keyboard.

CSS Renk Seçici açılır menüsü

Sağ taraftaki dikey çubuktan bir renge tıklayın.Click a color from the vertical bar on the right. Bu, ana penceredeki bu renk için bir gradyan gösterir.This shows a gradient for that color in the main window. ENTER tuşuna basarak doğrudan dikey çubuktan bir renk seçin veya ana penceredeki herhangi bir noktaya tıklayarak daha fazla duyarlık seçin.Choose a color directly from the vertical bar by pressing Enter, or click any point in the main window to choose with greater precision.

Bilgisayar ekranınızda kullanmak istediğiniz bir renk varsa (Visual Studio Kullanıcı arabirimi içinde olması gerekmez), sağ alt köşedeki Damlalık aracını kullanarak değerini yakalayabilirsiniz.If there is a color on your computer screen that you want to use (it doesn't have to be inside the Visual Studio user interface), you can capture its value by using the eyedropper tool on the lower right.

Ayrıca renk seçicinin alt kısmına kaydırıcıyı taşıyarak bir rengin saydamlığını değiştirebilirsiniz.You also can change the opacity of a color by moving the slider at the bottom of the color picker. Bunun yapılması, RGBA biçimi geçirgenliği temsil ettiğinden, renk değerlerini RGBA değerlerine dönüştürür.Doing so changes color values to RGBA values because the RGBA format can represent opacity.

Bir renk seçtikten sonra, ENTER tuşuna basın ve ardından site. css dosyasındaki arka plan rengi girişini tamamlamaya yönelik bir noktalı virgül yazın.After you have chosen a color, press Enter, and then type a semicolon to complete the background-color entry in the Site.css file.

Sayfa denetçisi güncelleştirme çubuğuThe Page Inspector Update Bar

Sayfa denetçisi, site. css dosyasındaki (veya uygulamadaki herhangi bir dosya) yapılan değişikliği hemen algılar ve bir güncelleştirme çubuğunda bir uyarı görüntüler.Page Inspector immediately detects the change to the Site.css file (or to any file in the application) and displays an alert in an update bar.

Güncelleştirme çubuğu

Tüm dosyalarınızı kaydetmek ve sayfa denetçisi tarayıcısını yenilemek için CTRL + ALT + ENTER tuşlarına basın veya güncelleştirme çubuğuna tıklayın.To save all your files and refresh the Page Inspector browser, press Ctrl+Alt+Enter or click the update bar. Vurgu renginizdeki değişiklik tarayıcıda görünür:The change in the highlight color appears in the browser:

Vurgu rengi değişti

Sayfa denetçisi tarayıcısını doğrudan Visual Studio ortamının içinden yenileyenizi görürsünüz.Notice that you conveniently refreshed the Page Inspector browser right from within the Visual Studio environment. Dış tarayıcı yerine sayfa denetçisi kullanmak, Web uygulamalarınızı geliştirirken düzenleyicide kalmanızı sağlar.Using Page Inspector instead of an external browser lets you stay in the editor when you develop your web applications.

Ayrıca Bkz.See Also

Sayfa denetçisi Ile tanışın (Channel 9 Videosu)Introducing Page Inspector (Channel 9 video)

Sayfa denetçisi hata iletileri (MSDN)Page Inspector Error Messages (MSDN)