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.
Nota
Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 10 di questo articolo.
Avviso
Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 10 di questo articolo.
Di Nicolò Carandini e Tom Dykstra
Il collegamento al browser è una funzionalità di Visual Studio. Crea un canale di comunicazione tra l'ambiente Development e uno o più Web browser. Usare il collegamento al browser per:
- Aggiornare l'app Web in più browser contemporaneamente.
- Eseguire il test su più browser con impostazioni specifiche, ad esempio le dimensioni dello schermo.
- Seleziona gli elementi dell'interfaccia utente nei browser in tempo reale e visualizza il markup e il codice sorgente a cui sono correlati in Visual Studio.
- Eseguire l'automazione dei test del browser in tempo reale.
Compilazione in fase di esecuzione vs. ricaricamento rapido
Usare Browser Link con la compilazione in fase di esecuzione o hot reload per visualizzare l'effetto delle modifiche in fase di esecuzione nei Razor file (.cshtml). Consigliamo hot reload.
Come usare il link del browser
Quando è aperto un progetto ASP.NET Core, Visual Studio visualizza il controllo della barra degli strumenti del collegamento del browser accanto al controllo della barra degli strumenti Debug Type:
Dal controllo barra degli strumenti del collegamento del browser è possibile:
- Aggiornare l'app Web in più browser contemporaneamente.
- Apri il Browser Link Dashboard.
- Abilita o disabilita Browser Link.
- Abilitare o disabilitare CSS Ricaricamento rapido.
Aggiornare l'app Web in più browser contemporaneamente
Per scegliere un singolo Web browser da avviare all'avvio del progetto, usare il menu a discesa nel controllo della barra degli strumenti Destinazione di debug:
Per aprire più browser contemporaneamente, scegliere Apri con... dallo stesso elenco a discesa. Tenere premuto il tasto Ctrl per selezionare i browser desiderati e quindi fare clic su Sfoglia:
Lo screenshot seguente mostra Visual Studio con la visualizzazione Indice aperta e due browser aperti:
Passare il puntatore del mouse sul controllo della barra degli strumenti dei collegamenti del browser per visualizzare i browser connessi al progetto:
Modificare la visualizzazione Indice e tutti i browser connessi vengono aggiornati quando si fa clic sul pulsante di aggiornamento del collegamento al browser:
Il collegamento al browser funziona anche con i browser che avvii dall'esterno di Visual Studio e con cui accedi all'URL dell'app.
Dashboard del link del browser
Aprire la finestra Browser Link Dashboard dal menu a discesa del collegamento del browser per gestire la connessione con i browser aperti:
I browser connessi vengono visualizzati con il percorso della pagina visualizzata da ogni browser:
È anche possibile fare clic su un singolo nome del browser per aggiornare solo il browser.
Abilitare o disabilitare il collegamento al browser
Quando si riabilita il collegamento del browser dopo averlo disabilitato, è necessario aggiornare i browser per riconnetterli.
Abilitare o disabilitare il ricaricamento rapido CSS
Quando il ricaricamento rapido CSS è abilitato, i browser connessi vengono aggiornati automaticamente quando si apportano modifiche ai file CSS.
Funzionamento
il collegamento al browser usa SignalR per creare un canale di comunicazione tra Visual Studio e il browser. Quando Browser Link è abilitato, Visual Studio funge da SignalR server a cui possono connettersi più client (browser). Browser Link registra anche un componente middleware nella pipeline di richiesta di ASP.NET Core. Questo componente inserisce riferimenti speciali <script> in ogni richiesta di pagina proveniente dal server. Per visualizzare i riferimenti allo script, selezionare Visualizza origine nel browser e scorrere fino alla fine del contenuto del <body> tag:
<!-- Visual Studio browser link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End browser link -->
</body>
I file di origine non vengono modificati. Il componente middleware inserisce i riferimenti allo script in modo dinamico.
Poiché il codice lato browser è interamente in JavaScript, funziona su tutti i browser supportati da SignalR senza richiedere un plug-in del browser.
Di Nicolò Carandini e Tom Dykstra
Browser Link è una funzionalità di Visual Studio. Crea un canale di comunicazione tra l'ambiente Development e uno o più Web browser. Usare Browser Link per:
- Aggiornare l'app Web in più browser contemporaneamente.
- Eseguire il test su più browser con impostazioni specifiche, ad esempio le dimensioni dello schermo.
- Selezionare gli elementi dell'interfaccia utente nei browser in tempo reale, vedere il markup e il codice sorgente a cui è correlato in Visual Studio.
- Eseguire l'automazione dei test del browser in tempo reale. Browser Link è anche estendibile.
Configurazione di Browser Link
Aggiungere il pacchetto Microsoft.VisualStudio.Web.BrowserLink al progetto. Per progetti ASP.NET Core Razor Pages o MVC, abilitare anche la compilazione in fase di esecuzione di file Razor (.cshtml) come descritto nella Razor compilazione di file in ASP.NET Core.
Razor Le modifiche della sintassi vengono applicate solo quando la compilazione di runtime è stata abilitata.
Quando si converte un progetto ASP.NET Core 2.0 in ASP.NET Core 2.1 e si esegue la transizione al metapacchetto Microsoft.AspNetCore.App, installare il pacchetto Microsoft.VisualStudio.Web.BrowserLink per la funzionalità Browser Link. I modelli di progetto ASP.NET Core 2.1 usano il Microsoft.AspNetCore.App metapacchetto per impostazione predefinita.
I modelli di progetto web ASP.NET Core 2.0 Web Application, Empty e Web API usano il metapacchetto Microsoft.AspNetCore.All, che contiene un riferimento al pacchetto per Microsoft.VisualStudio.Web.BrowserLink. Pertanto, l'uso del Microsoft.AspNetCore.All metapacchetto non richiede ulteriori azioni per rendere Browser Link disponibile per l'uso.
Il modello di progetto Applicazione Web ASP.NET Core 1.x include un riferimento al pacchetto Microsoft.VisualStudio.Web.BrowserLink. Altri tipi di progetto richiedono l'aggiunta di un riferimento al pacchetto Microsoft.VisualStudio.Web.BrowserLink.
Configurazione
Chiamare UseBrowserLink nel metodo Startup.Configure:
app.UseBrowserLink();
La UseBrowserLink chiamata viene in genere inserita all'interno di un if blocco che abilita solo Browser Link nell'ambiente Development. Ad esempio:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
Per ulteriori informazioni, vedere ambienti di runtime di ASP.NET Core.
Come usare Browser Link
Quando è aperto un progetto ASP.NET Core, Visual Studio visualizza il controllo della barra degli strumenti Browser Link accanto al controllo della barra degli strumenti Destinazione di debug:
Dal controllo Browser Link della barra degli strumenti, è possibile:
- Aggiornare l'app Web in più browser contemporaneamente.
- Aprire il Browser Link Dashboard.
- Abilitare o disabilitare Browser Link. Nota: il collegamento al browser è disabilitato per impostazione predefinita in Visual Studio.
- Abilitare o disabilitare CSS Auto-Sync.
Aggiornare l'app Web in più browser contemporaneamente
Per scegliere un singolo Web browser da avviare all'avvio del progetto, usare il menu a discesa nel controllo della barra degli strumenti Debug Target:
Per aprire più browser contemporaneamente, scegliere Browse with... dallo stesso elenco a discesa. Tenere premuto CTRL per selezionare i browser desiderati e quindi fare clic su Sfoglia:
Lo screenshot seguente mostra Visual Studio con la visualizzazione Indice aperta e due browser aperti:
Passare il puntatore del mouse sul controllo barra degli strumenti Collegamento browser per visualizzare i browser connessi al progetto:
Modifica la visualizzazione Indice e tutti i browser connessi vengono aggiornati quando si fa clic sul pulsante di aggiornamento Browser Link:
Il collegamento al browser funziona anche con i browser che si avviano dall'esterno di Visual Studio e si accede all'URL dell'app.
Dashboard Browser Link
Aprire la finestra Browser Link Dashboard dal menu a discesa Browser Link per gestire la connessione con i browser aperti:
Se non è connesso alcun browser, è possibile avviare una sessione non di debug selezionando il collegamento View in Browser:
In caso contrario, i browser connessi vengono visualizzati con il percorso della pagina visualizzata da ogni browser:
È anche possibile fare clic su un singolo nome del browser per aggiornare solo il browser.
Abilitare o disabilitare Browser Link
Quando si riabilita Browser Link dopo averlo disabilitato, è necessario aggiornare i browser per riconnetterli.
Abilitare o disabilitare la sincronizzazione automatica CSS
Quando la sincronizzazione automatica CSS è abilitata, i browser connessi vengono aggiornati automaticamente quando si apporta una modifica ai file CSS.
Funzionamento
Il collegamento al browser usa SignalR per creare un canale di comunicazione tra Visual Studio e il browser. Quando il collegamento al browser è abilitato, Visual Studio funge da SignalR server a cui possono connettersi più client (browser). Browser Link registra anche un componente middleware nella pipeline di richiesta ASP.NET Core. Questo componente inietta riferimenti speciali <script> in ogni richiesta di pagina dal server. Per visualizzare i riferimenti allo script, selezionare Visualizza origine nel browser e scorrere fino alla fine del contenuto del <body> tag:
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
I file di origine non vengono modificati. Il componente middleware inserisce i riferimenti allo script in modo dinamico.
Poiché il codice sul lato browser è tutto JavaScript, funziona in tutti i browser che SignalR supporta senza richiedere un plug-in del browser.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
