如果你開發的應用有 UI，你可能經歷開發->編譯->測試->修改->編譯->測試的迴圈。根據所使用的框架或技術，有些可以改善這一流程，比如 edit-and-continue、Xamarin Hot Reload、design-time 編輯器等。當然，沒有什麼會像你的應用一樣顯示你的 UI。

　　ASP.NET WebForm 允許你從你的 WebForm 程式碼檢視切換到設計檢視來了解 UI 可能是什麼樣子的。隨著現代 UI 框架的發展，越來越依賴於 CSS/HTML 等的片段或元件。此時設計檢視可能並不總是反映 UI：

 　　對於 web 開發人員來說，這些框架和 UI 庫正變得越來越流行和常見。我們把它們和一些 Visual Studio 模板一起打包成常用的專案模板。我們看到一些網路的趨勢，以及同開發者交談，我們想優化 UI、資料和狀態等等的表現。這就是我們正在做的事情。

　　從今天開始，你可以下載我們的 Visual Studio 預覽擴充套件，用於一種新的編輯模式，我們稱之為“Web Live Preview”。擴充套件現在已經可以使用了，所以去 Visual Studio Marketplace 下載/安裝 Visual Studio 2019 的“Web Live Preview”擴充套件。講真，現在就去吧，只需點選安裝，然後回來閱讀剩下的。當你完成時，它就為你準備好了！

使用擴充套件

　　擴充套件安裝完成後，在 ASP.NET web 應用中，在 ASPX 頁面點選右鍵，你將看到一個選項叫“Edit in Browse”：

　　這將以一種特殊的模式啟動應用程式的預設瀏覽器。你應該馬上注意到一個小的不同，在你的觀點上有一些裝飾：

　　在此模式下，您現在可以互動地在此檢視中選擇元素，並看到與源同步的選擇。即使你選擇了來自母版頁的內容，同步也會在 Visual Studio 中開啟該頁以導航到所選內容。

　　你可能會說，這不僅僅是選擇上的同步，還有原始碼的同步。你可能有一個 web 控制元件，並選擇這些元素。例如，這是一個 asp:DataGrid 元件。當你對原始碼進行修改時，它們會立即反映在執行的應用程式中。注意，沒有儲存或瀏覽器刷新發生：

　　當使用 Razor pages 時，我們也可以檢測程式碼，甚至可以在這些程式碼塊中進行互動。在 Razor 頁面中，我有一個迴圈，我在迴圈中做一些修改，並看到它在執行的應用程式中的反映：

　　因此，即使在 HTML 中的程式碼塊中，你也可以進行編輯，並在執行的應用程式中看到它們的反映。

　　但是稍等，這還不是全部！

　　如果你已經在使用瀏覽器開發工具，你可能會問，這是否可以完全的替代瀏覽器開發工具。但它可能不行，這是故意的！我們知道 web 開發人員在瀏覽器中非常依賴於開發工具，我們也在試驗一個小擴充套件（針對 Edge/Chrome ），它可以在渲染的開發工具檢視中同步。所以現在你有了同步原始碼（包括控制元件/程式碼/靜態）呈現的應用程式，與開發工具 DOM 樹檢視…兩種方式：

　　我們還有很多工作要做，因此這只是到目前為止我們工作的一個預覽。

當前的限制

　　我們最終看到這只是 Visual Studio 中 web 開發人員的功能，而不需要安裝任何其他東西，所以這個擴充套件是臨時的。目前，我們只支援 WebForm 和 MVC。是的，我們知道，你想要 .NET Core 和 Blazor 支援，這肯定在我們的路線圖中，我們正在努力。

　　ASPX/Razor 頁面之外的純程式碼更改，我們沒有完整的“熱過載”,在這些情況下，你需要重新整理瀏覽器。一些基本物件模型正在改變，你可能依賴classes/functions/properties，改變資料型別，等等。這是我們希望在 .NET 生態系統中更廣泛地解決的問題，並利用我們從客戶那裡學到的經驗。

　　該擴充套件適用於基於 Chrome 的瀏覽器，如最新的 Microsoft Edge 和谷歌 Chrome 瀏覽器。這也使我們能夠有一個單一的瀏覽器開發工具擴充套件來處理整合。要使用該瀏覽器擴充套件，你必須在瀏覽器中使用 developer 模式並從磁碟載入擴充套件。這個過程相當簡單，但是你必須遵循在 Edge 中新增和刪除擴充套件的幾個步驟。開發工具外掛的預設位置位於 C:\Program Files (x86)\Microsoft Visual Studio\2019\Common7\IDE\Extensions\Microsoft\Web Live Preview\BrowserExtension。請注意，這也是一個臨時解決方案，因為我們正在開發這些功能。任何最終的瀏覽器工具擴充套件都將分佈在瀏覽器商店中。

原文連結

    https://devblogs.microsoft.com/aspnet/introducing-web-live-preview/?utm_source=vs_developer_news&utm_medium=referral

相關推薦