Page Inspector (Visual Studio)
Data di pubblicazione: aprile 2016
Controllo pagina è uno strumento di sviluppo Web con un browser integrato e gli strumenti del browser. Il browser esegue il rendering di una pagina Web (HTML, Web Form, ASP.NET MVC o Web Pages) direttamente nell'IDE di Visual Studio. La presenza del browser nell'IDE consente di visualizzare l'output sottoposto a rendering e la relativa origine affiancati. Quando si utilizza la funzionalità di controllo di Controllo pagina per selezionare un elemento nel browser integrato di Controllo pagina, vengono evidenziati l'origine dell'elemento e i relativi i fogli di stile CSS (Cascading Style Sheets)corrispondenti. Questa funzionalità consente di individuare e correggere errori nel codice HTML e CSS che potrebbero altrimenti non essere facilmente rilevabili. Controllo pagina include anche gli strumenti del browser che è possibile utilizzare direttamente nell'ambiente di Visual Studio.
Requisiti
Controllo pagina richiede quanto segue:
Visual Studio 2012.
.NET Framework 4.5.
Applicazione Web destinata a .NET Framework 4 o versioni successive.
Per la funzionalità completa, Internet Explorer 9 o versione successiva (Controllo pagina ospita la versione corrente di Internet Explorer in Visual Studio).
JavaScript abilitato in Internet Explorer. Per ulteriori informazioni, vedere Come abilitare JavaScript in un Web browser.
Per ulteriori informazioni, vedere Messaggi di errore di Page Inspector.
Attività di base
Per |
Eseguire questa operazione |
|---|---|
Visualizzare un progetto o un file di progetto in Controllo pagina |
Fare clic con il pulsante destro del mouse sul progetto o sul file in Esplora soluzioni, quindi scegliere Visualizza in Controllo pagina dal menu di scelta rapida. |
Eseguire un progetto e visualizzarlo in Controllo pagina |
Selezionare il progetto in Esplora soluzioni. Nell'elenco a discesa dei browser nel menu di Visual Studio scegliere Controllo pagina, quindi fare clic sulla freccia verde per eseguire il progetto. |
Eseguire nuovamente il mapping degli elementi alla posizione esatta nell'origine |
Nel riquadro degli strumenti di Controllo pagina fare clic su Controlla. Spostare il puntatore del mouse su un elemento nel browser di Controllo pagina. Il markup corrispondente viene evidenziato nel file di origine e nei riquadri HTML e Stili. |
Individuare l'origine di una regola CSS |
Fare clic su una regola CSS nei riquadri Stili o Stili traccia. La regola viene evidenziata nel file di foglio di stile di origine. |
Salvare le modifiche nell'origine e aggiornare il browser di Controllo pagina |
Premere CTRL+ALT+INVIO oppure fare clic sulla barra di aggiornamento. |
Impostare Controllo pagina come il browser predefinito per il debug |
Nell'elenco a discesa dei browser nel menu di Visual Studio scegliere Esplora con. Nella finestra di dialogo Esplora con scegliere Controllo pagina, scegliere Imposta come predefinito. |
Impostare Controllo pagina come uno dei browser per il debug |
È possibile scegliere Controllo pagina come uno dei browser che è possibile avviare contemporaneamente premendo F5 o CTRL+F5. Per ulteriori informazioni, vedere la sezione Supporto di più browser di ASP.NET 5 and Visual Studio 2015. |
Risorse di approfondimento
Controllo pagina per Visual Studio (blog di MSDN)
Controllo pagina - Introduzione (video)
Controllo pagina - Scomposizione dell'applicazione Web (video)
Utilizzo di Controllo pagina in ASP.NET MVC (esercitazione)
Utilizzo di Controllo pagina in Web Form ASP.NET (esercitazione)
Strumenti di efficienza di sviluppo Web in Visual Studio 2012 (video)
Elementi di interfaccia utente
Controlla
Il pulsante Controlla consente di eseguire nuovamente il mapping degli elementi alla posizione esatta nell'origine.
Per attivare la modalità controllo di Controllo pagina, fare clic sul pulsante Controlla nel riquadro degli strumenti di Controllo pagina. In modalità controllo, quando si sposta il puntatore del mouse su un punto qualsiasi della pagina di cui è stato eseguito il rendering, viene evidenziato il codice o il markup di origine corrispondente e viene inoltre evidenziato il file di origine corrispondente in Esplora soluzioni. Al contrario, quando si seleziona il markup nell'origine, l'output corrispondente viene automaticamente evidenziato nel browser di Controllo pagina. Per ulteriori informazioni, vedere Utilizzo di Controllo pagina in ASP.NET MVC o Utilizzo di Controllo pagina in Web Form ASP.NET.
Nota
Il pulsante Controlla funziona come tasto di alternanza. Se la modalità controllo attiva, il pulsante Controlla è delimitato da una linea blu leggermente tratteggiata.
Gli altri elementi presenti nel pannello inferiore dell'interfaccia utente di Controllo pagina contengono gli strumenti del browser simili agli strumenti F12 di Internet Explorer. Per ulteriori informazioni sugli strumenti F12 di Internet Explorer, vedere Uso degli strumenti di sviluppo F12 per il debug di HTML e CSS.
HTML
La visualizzazione del riquadro HTML mostra una visualizzazione ad albero (albero DOM) della pagina corrente come rappresentato dal browser di Controllo pagina in memoria. È possibile esplorare l'albero direttamente mediante mouse o tastiera, visualizzare gli attributi e apportare modifiche di prova ai valori. È possibile espandere o comprimere le proprietà di un elemento nell'albero DOM facendo clic sulla piccola freccia accanto a ogni elemento padre.
In modalità controllo, quando si sposta il puntatore del mouse sulla pagina del browser di Controllo pagina, il markup dell'elemento scelto viene evidenziato sia nel riquadro HTML che nel markup di origine.
Il riquadro HTML consente di apportare modifiche di prova agli attributi degli elementi DOM e di visualizzare immediatamente le modifiche apportate nel browser. Fare doppio clic su una proprietà o un attributo nel riquadro HTML per modificarlo. Per aggiungere un attributo, fare clic con il pulsante destro del mouse su un elemento e scegliere Aggiungi attributo oppure utilizzare il riquadro Attributi. Queste modifiche non vengono salvate in modo permanente e i file di origine non sono interessati. Tuttavia, poiché il markup scelto viene evidenziato anche nel file di origine, è facile visualizzare la posizione in cui si trova l'origine e quindi implementare e salvare la modifica.
Quando si modifica un file di origine, viene visualizzata la barra di aggiornamento in Controllo pagina e viene richiesto di premere CTRL+ALT+INVIO, o di fare clic sulla barra, per salvare le modifiche apportate e aggiornare la pagina nel browser di Controllo pagina.
Opzioni del menu di scelta rapida nel riquadro HTML
Fare clic con il pulsante destro del mouse su un elemento nel riquadro HTML per accedere alle seguenti opzioni del menu di scelta rapida.
Voce di menu |
Funzione |
|---|---|
Aggiungi attributo |
Aggiunge un nuovo attributo a un tag o un elemento. |
Copia |
Copia il tag e gli attributi negli Appunti. |
Copia InnerHTML |
Copia il contenuto InnerHTML (testo figlio, elementi e attributi) di un elemento negli Appunti. |
Copia OuterHTML |
Copia il contenuto OuterHTML (testo figlio, elementi e attributi) di un elemento negli Appunti. |
Per ulteriori informazioni, vedere Utilizzo di Controllo pagina in ASP.NET MVC o Utilizzo di Controllo pagina in Web Form ASP.NET.
Stili
Nel riquadro Stili vengono visualizzate le regole e gli stili di un elemento selezionato nella visualizzazione ad albero. Il contenuto del riquadro viene raggruppato in base alla gerarchia delle regole CSS e include gli attributi ereditati e sottoposti a override. La regola nella parte superiore dell'elenco è la prima a essere applicata all'elemento selezionato, mentre la regola nella parte inferiore è quella che definisce attualmente le proprietà di stile di un elemento selezionato.
Per verificare le modifiche da apportare a CSS, è possibile modificare le proprietà CSS nel riquadro Stili e visualizzare immediatamente le modifiche apportate nel browser. Fare doppio clic sui valori delle proprietà per modificarli. È possibile deselezionare e selezionare la casella di controllo accanto a una proprietà per visualizzare il modo in cui la presenza o l'assenza della proprietà influisce sul rendering della pagina. Queste modifiche non vengono salvate in modo permanente e i file di origine non sono interessati. Per ulteriori informazioni, vedere la sezione "Anteprima delle modifiche CSS nella finestra Stili" in Utilizzo di Controllo pagina in ASP.NET MVC o Utilizzo di Controllo pagina in Web Form ASP.NET.
Per apportare una modifica nell'origine, selezionare una regola CSS nel riquadro Stili o Stili traccia. Controllo pagina consente di aprire il file con estensione CSS in cui è definita la regola e di selezionare automaticamente la regola completa. Quando si modifica l'origine, viene visualizzata la barra di aggiornamento in Controllo pagina e viene richiesto di premere CTRL+ALT+INVIO, o di fare clic sulla barra, per salvare le modifiche apportate e aggiornare la pagina nel browser di Controllo pagina.
Opzioni del menu di scelta rapida nel riquadro Stili
Fare clic con il pulsante destro del mouse su un elemento nel riquadro Stili per accedere alle seguenti opzioni del menu di scelta rapida.
Voce di menu |
Funzione |
|---|---|
Aggiungi nuova regola |
Aggiunge una regola CSS. |
Aggiungi nuova proprietà |
Aggiunge una proprietà CSS. |
Rimuovi elemento |
Rimuove l'elemento selezionato. |
Copia |
Copia l'elemento selezionato. |
Copia regola CSS |
Copia la regola CSS selezionata. |
Copia proprietà CSS |
Copia la proprietà CSS selezionata. |
Stili traccia
Nel riquadro Stili traccia vengono visualizzate le stesse informazioni del riquadro Stili, ma raggruppate in base alle proprietà in ordine alfabetico, anziché in base alle regole. Il riquadro Stili traccia può risultare più utile per la risoluzione dei problemi del riquadro Stili poiché spesso si conosce il nome della proprietà CSS ma non del relativo elemento padre.
Layout
Nel riquadro Layout viene visualizzato il modello riquadro di un elemento selezionato.
Per visualizzare il modello riquadro di un elemento, fare clic sulla scheda Layout, quindi fare clic sul pulsante Controlla. Spostare il puntatore del mouse sull'elemento nel browser, o nel riquadro HTML, e fare clic su di esso per selezionarlo. Nel riquadro Layout vengono visualizzate le dimensioni esatte dell'elemento selezionato nonché l'offset, il margini, la spaziatura e le dimensioni del bordo.
È possibile utilizzare il riquadro Layout per effettuare le modifiche di prova. Per visualizzare l'anteprima di una modifica, fare doppio clic su un valore in pixel nel riquadro Layout e modificare il valore. Le modifiche vengono apportate immediatamente nel browser. Queste modifiche non vengono salvate in modo permanente e i file di origine non sono interessati.
Attributi
Nel riquadro Attributi vengono visualizzati gli attributi per l'elemento attualmente selezionato.
È possibile utilizzare il riquadro Attributi per effettuare le modifiche di prova. Fare doppio clic su un valore dell'attributo per modificarlo. È possibile utilizzare i pulsanti Aggiungi attributo e Rimuovi attributo per aggiungere o rimuovere temporaneamente gli attributi. Le modifiche apportate vengono visualizzate immediatamente nel riquadro HTML nel browser di Controllo pagina. Queste modifiche non vengono salvate in modo permanente e i file di origine non sono interessati.
File
Il riquadro File negli strumenti di Controllo pagina contiene i collegamenti a tutti i file di origine che costituiscono la pagina corrente. Questa funzionalità è utile in quanto mostra immediatamente tutti i file correlati. Risulta particolarmente utile quando si utilizzano visualizzazioni e modelli parziali o con applicazioni come Orchard o Umbraco.
Per aprire uno dei file nell'editor di Visual Studio, fare clic sul collegamento corrispondente.
Barra di aggiornamento
Quando si modifica il codice sorgente della pagina, nella parte superiore del browser di Controllo pagina viene visualizzata una barra di aggiornamento. La barra di aggiornamento richiede di premere CTRL+ALT+INVIO o di fare clic sulla barra per salvare le modifiche e aggiornare il browser.