Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
di Tim Ammann
Controllo pagina per Visual Studio 2012 è uno strumento di sviluppo Web con un browser integrato. Selezionare qualsiasi elemento nel browser integrato e Ispettore di pagina evidenzia immediatamente l'origine e CSS dell'elemento. È possibile esplorare qualsiasi pagina nell'applicazione, trovare rapidamente le origini del markup sottoposto a rendering e usare gli strumenti del browser direttamente nell'ambiente di Visual Studio.
Questa esercitazione illustra come abilitare la modalità di ispezione e quindi individuare e modificare rapidamente regole CSS e testo all'interno del progetto Web. L'esercitazione usa un progetto di applicazione Web Forms, ma è anche possibile usare Page Inspector per progetti di sito Web e applicazioni MVC.
L'esercitazione include le sezioni seguenti:
Usare Controllo pagina per visualizzare l'applicazione
Abilitare la modalità di ispezione
Usare Controllo pagina per apportare modifiche al markup
Modalità di ispezione e finestra HTML
Anteprima delle modifiche CSS nella finestra Stili
Prerequisiti
Annotazioni
Per ottenere la versione più recente di Page Inspector, usare Il programma di installazione della piattaforma Web per installare Azure SDK per .NET 2.0.
Page Inspector è incluso in Microsoft Web Developer Tools. La versione più recente è la 1.3. Per controllare la versione in uso, eseguire Visual Studio e selezionare Informazioni su Microsoft Visual Studio dal menu Aiuto
Creare un'applicazione Web
Prima di tutto, si creerà un'applicazione Web con cui si userà Page Inspector. In Visual Studio scegliere File>Nuovo progetto. A sinistra espandere Visual C#, selezionare Web e quindi selezionare Applicazione Web Form ASP.NET.
Fare clic su OK.
L'applicazione si apre nella visualizzazione Origine.
Ora che è disponibile un'applicazione da usare, è possibile usare Controllo pagina per esaminarla e modificarla.
Usare Controllo pagina per visualizzare l'applicazione
Successivamente, visualizzerai l'applicazione con Page Inspector. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto e quindi scegliere Visualizza in Controllo pagina.
Per impostazione predefinita, quando Page Inspector viene avviato per la prima volta, viene ancorato come finestra stretta sul lato sinistro dell'ambiente di Visual Studio. Lascia ancorato sul lato sinistro e impostalo su una larghezza comoda per te oppure ancoralo in una delle aree degli strumenti in alto, in basso o a destra:
Se si scollega la finestra Controllo pagina, è possibile posizionarla all'esterno di Visual Studio o anche su un secondo monitor, se disponibile. Tuttavia, per passare con ALT+TAB tra Page Inspector e Visual Studio quando la finestra Page Inspector è sganciata, andare su Strumenti>Opzioni>Ambiente>Schede e finestre, e, in Tab Well, deselezionare la casella di controllo denominata Le finestre degli strumenti mobili restano sempre in primo piano rispetto alla finestra principale:
Il riquadro superiore della finestra Controllo pagina mostra la pagina corrente in una finestra del browser. Il riquadro inferiore mostra la pagina nel markup HTML a sinistra e alcune schede a destra che consentono di esaminare diversi aspetti della pagina. Il riquadro inferiore è simile a F12 Developer Tools in Internet Explorer. A differenza degli strumenti di sviluppo, tuttavia, è possibile usare Controllo pagina direttamente in Visual Studio.
In questa esercitazione si userà il riquadro del browser Controllo pagina e le schede HTML e Stili per spostarsi rapidamente e apportare modifiche all'applicazione.
Abilitare la modalità di ispezione
Successivamente, vedrai come funziona la modalità di ispezione di Page Inspector. Nella finestra Controllo pagina fare clic sul pulsante Controlla .
Per visualizzare la modalità di ispezione in azione, spostare il mouse su parti diverse della pagina all'interno della finestra del browser Controllo pagina. Quando lo fai, il puntatore del mouse cambia in un grande segno più e l'elemento sottostante viene evidenziato.
Quando si sposta il puntatore del mouse, si noti che
Il contenuto nella visualizzazione Origine cambia per mostrare il markup corrispondente all'elemento selezionato nella pagina. Il markup pertinente è evidenziato. Se l'origine si trova in un altro file, tale file viene aperto nella visualizzazione Origine con il markup pertinente evidenziato.
Il markup visualizzato nella scheda HTML in Controllo pagina cambia anche in modo da corrispondere all'elemento selezionato nella pagina. Nella scheda HTML viene descritto il markup pertinente.
La scheda Stili mostra le regole CSS rilevanti per la selezione corrente.
Utilizzare Page Inspector per apportare modifiche al markup
Ora vedrai come usare Controllo pagina per trovare e apportare modifiche al markup o al testo la cui posizione potrebbe non essere immediatamente ovvia.
Inserisci Controllo pagina in modalità ispezione e quindi scorri fino alla fine della home page.
Non appena si entra nell'area del piè di pagina, Page Inspector apre il file di layout Site.Master nella visualizzazione Origine in una scheda temporanea sulla destra delle altre schede ed evidenzia la sezione del master page selezionata. Viene illustrato come Page Inspector può trovare e visualizzare il contenuto in una pagina che potrebbe effettivamente provenire da un file diverso da quello originariamente aperto.
Nella finestra del browser Controllo pagina spostare il puntatore del mouse sulla riga con l'informativa sul copyright .
Nella pagina Site.Master la riga corrispondente è evidenziata.
Aggiungere testo alla fine della riga nel file Site.Master .
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application Rocks!</p>
Premere ora Ctrl+Alt+Invio o fare clic sulla Barra di aggiornamento per visualizzare i risultati nella finestra del browser Page Inspector.
Potresti aver pensato che il piè di pagina fosse nella pagina Default.aspx, ma si è scoperto che si trova nella pagina di layout principale e Page Inspector lo ha trovato per te.
Modalità di ispezione e finestra HTML
Successivamente, si avrà un rapido sguardo alla finestra HTML e al modo in cui esegue il mapping degli elementi per te.
Inserisci Controllo pagina in modalità ispezione.
Fare clic sulla parte superiore della pagina che indica "il tuo logo qui". Si sta esaminando un particolare elemento in modo più dettagliato, quindi la visualizzazione nella finestra del browser non cambia più mentre si sposta il puntatore del mouse.
Spostare ora il puntatore del mouse nella finestra HTML . Quando si sposta il puntatore del mouse, Controllo pagina delinea l'elemento all'interno della finestra HTML ed evidenzia l'elemento corrispondente nella finestra del browser.
Come in precedenza, Page Inspector apre automaticamente il file Site.Master in una scheda temporanea. Fai clic sulla scheda Site.Master e il markup corrispondente è evidenziato nella <sezione intestazione> :
Anteprima delle modifiche CSS nella finestra Stili
Si vedrà quindi come usare la finestra Stili controllo pagina per visualizzare in anteprima le modifiche apportate a CSS.
Fare clic sul pulsante Controlla per inserire Page Inspector in modalità ispezione.
Nella finestra del browser Controllo pagina spostare il puntatore del mouse sulla sezione "Home Page" fino a quando non viene visualizzata l'etichetta div.content-wrapper.
Fare clic all'interno della sezione div.content-wrapper una sola volta e quindi spostare il puntatore del mouse nella finestra Stili . Nel selettore della classe .featured .content-wrapper, deselezionare e poi selezionare la casella di controllo per la proprietà background-color.
Si noti che le anteprime delle modifiche vengono visualizzate immediatamente nella finestra del browser Controllo pagina.
Selezionare di nuovo la casella di controllo, quindi fare doppio clic sul valore della proprietà e modificarla in red. La modifica viene visualizzata immediatamente:
La finestra Stili semplifica il test e l'anteprima delle modifiche CSS prima di eseguire il commit delle modifiche nel foglio di stile stesso.
Sincronizzazione automatica CSS
Annotazioni
Questa funzionalità richiede la versione 1.3 di Controllo pagina.
La funzionalità di sincronizzazione automatica CSS consente di modificare direttamente un file CSS e visualizzare immediatamente le modifiche nel browser Controllo pagina.
Fare clic su Ispeziona per inserire Controllo pagina in modalità ispezione.
Nel browser Ispezione pagina, spostare il puntatore del mouse sulla sezione "Home Page" fino a quando non viene visualizzata l'etichetta div.content-wrapper. Fare clic una sola volta per selezionare questo elemento.
La finestra Stili mostra tutte le regole CSS per questo elemento. Scorrere verso il basso per trovare il selettore di classi .featured .content-wrapper. Fare clic su ".featured .content-wrapper". Controllo pagina apre il file CSS che definisce questo stile (Site.css) ed evidenzia lo stile CSS corrispondente.
Modificare ora il valore per background-color in "rosso". La modifica viene visualizzata immediatamente nel browser Controllo pagina.
Uso della selezione colori CSS
Si apprenderà quindi come usare Controllo pagina per trovare e modificare rapidamente il codice CSS per il testo evidenziato nell'applicazione predefinita. In questo esempio, hai deciso che non ti piace l'evidenziazione blu e che vuoi cambiarla in un altro colore.
Fare clic sul pulsante Ispeziona .
Nella finestra del browser Page Inspector, spostare il puntatore del mouse sul testo evidenziato "video, tutorial ed esempi" in modo che venga visualizzata l'etichetta "mark" CSS.
Fare clic sul testo per selezionarlo. Il selettore di contrassegno CSS corrispondente viene visualizzato nella parte inferiore della finestra Stili .
Fare clic sul selettore del marchio. Verrà aperto il file di Site.css per l'applicazione Web. Fare clic sulla scheda Site.css e il css corrispondente per il selettore è evidenziato:
Selezionare e rimuovere la riga con la proprietà colore di sfondo.
A questo punto si userà il nuovo selettore colori CSS di Visual Studio 2012 per scegliere un nuovo colore per la proprietà contrassegna colore di sfondo.
Uso della selezione colori CSS di Visual Studio 2012
L'editor CSS in Visual Studio 2012 include un selettore colori che semplifica la scelta e l'inserimento dei colori. Ha una semplice barra dei colori e un selettore "pop-down" che offre un controllo più fine.
La selezione colori include una tavolozza standard di colori, supporta nomi di colori standard, codici hash, RGB, RGBA, HSL e HSLA e mantiene un elenco dei colori usati più di recente nel documento.
Nella riga in cui era presente la proprietà colore di sfondo digitare "bc" e premere una volta la freccia giù.
Quando si digita il primo carattere di ogni parola in una proprietà delimitata da trattini come "colore di sfondo", IntelliSense filtra l'elenco per visualizzare solo le proprietà corrispondenti:
Digitare ora due punti. Quando si esegue questa operazione, viene inserito il nome completo della proprietà colore di sfondo. Digita # o rgb(, e appare la barra selezione colori:
Per vedere il funzionamento della barra di selezione colori, fare clic sui colori con il puntatore del mouse oppure premere il tasto freccia giù e quindi usare i tasti freccia sinistra e destra per attraversare i colori. Quando si visita un colore, viene visualizzato in anteprima il valore corrispondente per la proprietà colore di sfondo:
A questo punto, è possibile premere INVIO per selezionare il valore e quindi un punto e virgola (;) per completare la voce CSS. Per il momento, andare alla sezione successiva in modo da vedere come funziona la selezione colori popup.
Uso del menu a discesa selezione colori
Quando la barra dei colori non ha il colore esatto che stai cercando, puoi usare la selezione colori popup.
Per aprirlo, fare clic sulla doppia freccia alla fine destra della barra dei colori oppure premere freccia giù una o due volte sulla tastiera.
Fare clic su un colore dalla barra verticale a destra. Viene visualizzata una sfumatura di tale colore nella finestra principale. Scegliere un colore direttamente dalla barra verticale premendo INVIO oppure fare clic su un punto qualsiasi nella finestra principale per scegliere con maggiore precisione.
Se sullo schermo del computer è presente un colore da usare (non deve trovarsi all'interno dell'interfaccia utente di Visual Studio), è possibile catturarne il valore usando lo strumento di controllo in basso a destra.
È anche possibile modificare l'opacità di un colore spostando il dispositivo di scorrimento nella parte inferiore della selezione colori. In questo modo i valori di colore vengono modificati in valori RGBA perché il formato RGBA può rappresentare l'opacità.
Dopo aver scelto un colore, premere INVIO e quindi digitare un punto e virgola per completare la voce di colore di sfondo nel file Site.css .
Barra di aggiornamento del Controllo pagina
Page Inspector rileva immediatamente la modifica al file di Site.css (o a qualsiasi file nell'applicazione) e visualizza un avviso in una barra di aggiornamento.
Per salvare tutti i file e aggiornare il browser Controllo pagina, premere CTRL+ALT+INVIO o fare clic sulla barra di aggiornamento. La modifica del colore di evidenziazione viene visualizzata nel browser:
Si noti che, in modo conveniente, il Page Inspector del browser è stato aggiornato direttamente dall'ambiente di Visual Studio. L'uso di Page Inspector invece di un browser esterno consente di rimanere nell'editor quando si sviluppano applicazioni Web.
Vedere anche
Introduzione a Page Inspector (video di Channel 9)