Condividi tramite

Uso di Browser Link in Visual Studio 2013

Collegamento al browser è una nuova funzionalità di Visual Studio 2013 che crea un canale di comunicazione tra l'ambiente di sviluppo e uno o più Web browser. È possibile usare Il collegamento al browser per aggiornare l'applicazione Web in più browser contemporaneamente, utile per i test tra browser.

Aggiornamento del browser

Con l'aggiornamento del browser è possibile aggiornare più browser connessi a Visual Studio tramite il collegamento al browser.

Per usare l'aggiornamento del browser, creare prima di tutto un'applicazione ASP.NET usando uno dei modelli di progetto. Eseguire il debug dell'applicazione premendo F5 o facendo clic sull'icona a forma di freccia sulla barra degli strumenti:

Screenshot di Visual Studio, con l'icona freccia evidenziata nella barra degli strumenti per illustrare il processo di debug dell'applicazione.

È anche possibile usare l'elenco a discesa per selezionare un browser specifico per il debug.

Screenshot di Visual Studio, con l'icona freccia evidenziata nella barra degli strumenti e nel menu a discesa che visualizza l'elenco dei browser.

Per eseguire il debug con più browser, selezionare Sfoglia con. Nella finestra di dialogo Sfoglia con tenere premuto CTRL per selezionare più browser. Fare clic su Sfoglia per eseguire il debug con i browser selezionati. Il collegamento al browser funziona anche se si avvia un browser dall'esterno di Visual Studio e si passa all'URL dell'applicazione.

Screenshot della finestra di dialogo Esplora con, in cui appare l'istruzione di selezionare uno o più e i tre browser evidenziati e selezionati.

I controlli di Browser Link si trovano nel menu a discesa con l'icona a forma di freccia circolare. L'icona freccia è il pulsante Aggiorna .

Screenshot di Visual Studio, con il pulsante Aggiorna evidenziato in rosso. Il pulsante Aggiorna è una freccia circolare.

Per vedere quali browser sono connessi, posizionare il puntatore del mouse sul pulsante Aggiorna durante il debug. I browser connessi vengono visualizzati in una finestra ToolTip.

Screenshot di Visual Studio, con il pulsante Aggiorna evidenziato per indicare il passaggio del mouse sul pulsante. La descrizione comando mostra i browser connessi.

Per aggiornare i browser connessi, fare clic sul pulsante Aggiorna o premere CTRL+ALT+INVIO. Ad esempio, lo screenshot seguente mostra un progetto ASP.NET creato usando il modello di progetto MVC 5. È possibile visualizzare l'applicazione in esecuzione in due browser nella parte superiore. Nella parte inferiore il progetto è aperto in Visual Studio.

Screenshot di un progetto A S P dot Net, con l'applicazione in esecuzione affiancata in due browser e il progetto visualizzato di seguito in Visual Studio.

In Visual Studio è stata modificata l'intestazione <h1> per la home page:

Screenshot di Visual Studio, con un progetto A S P dot Net visualizzato e l'intestazione H 1 evidenziata.

Quando ho fatto clic sul pulsante Aggiorna , la modifica è apparsa in entrambe le finestre del browser:

Screenshot di un progetto A S P dot Net, con le modifiche visualizzate nelle finestre del browser visualizzate side-by-side e il progetto visualizzato di seguito in Visual Studio.

Note

  • Per abilitare Il collegamento al browser, impostare debug=true nell'elemento <di compilazione> nel file di Web.config del progetto.
  • L'applicazione deve essere in esecuzione in localhost.
  • L'applicazione deve avere come destinazione .NET 4.0 o versione successiva.

Il dashboard di Browser Link mostra informazioni sulle connessioni di Browser Link. Per visualizzare il dashboard, selezionare il menu a discesa Collegamento al browser (la piccola freccia accanto al pulsante Aggiorna ). Fare quindi clic su Dashboard collegamenti del browser.

Screenshot di Visual Studio, con il pulsante Aggiorna evidenziato e il Dashboard di Browser Link evidenziato nel menu a discesa.

La dashboard elenca i browser connessi e l'URL a cui ciascun browser ha navigato.

Screenshot del dashboard di Browser Link, con browser connessi e URL a cui ogni browser ha navigato visualizzati.

La sezione Prerequisiti mostra tutti i passaggi necessari per abilitare il collegamento al browser per il progetto. Ad esempio, lo screenshot seguente mostra un progetto in cui "debug" è impostato su false nel file Web.config.

Screenshot del dashboard del collegamento al browser, con la sezione Prerequisiti che indica che è necessario abilitare il debug per il progetto.

Per abilitare Il collegamento al browser per i file HTML statici, aggiungere quanto segue al file Web.config.

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

Per motivi di prestazioni, rimuovere questa impostazione quando si pubblica il progetto.

Il collegamento al browser è abilitato per impostazione predefinita. Esistono diversi modi per disabilitarlo:

  • Nel menu a discesa Browser Link (Collegamento browser) deselezionare Enable Browser Link (Abilita collegamento browser).

    Screenshot di Visual Studio, con l'opzione

  • Nel file Web.config aggiungere una chiave denominata "vs:EnableBrowserLink" con il valore "false" nella sezione appSettings.

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • Nel file Web.config impostare debug su false.

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

Come funziona?

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 server SignalR a cui possono connettersi più client (browser). Browser Link registra anche un modulo HTTP con ASP.NET. Questo modulo inserisce riferimenti di script< speciali >in ogni richiesta di pagina dal server. È possibile visualizzare i riferimenti allo script selezionando "Visualizza origine" nel browser.

Screenshot della finestra Visualizza Sorgente nel browser, che mostra riferimenti di script speciali inseriti dal modulo h t t p.

I file di origine non vengono modificati. Il modulo HTTP inserisce i riferimenti allo script in modo dinamico.

Poiché il codice sul lato browser è tutto JavaScript, funziona in tutti i browser supportati da SignalR, senza richiedere alcun plug-in del browser.

  • Last updated on