Browser Link trong ASP.NET Core

Browser Link là một tính năng của Visual Studio. Nó tạo ra một kênh giao tiếp giữa môi trường Development và một hoặc nhiều trình duyệt web. Sử dụng Browser Link để:

Làm mới ứng dụng web của bạn trong nhiều trình duyệt cùng một lúc.
Kiểm tra trên nhiều trình duyệt với các cài đặt cụ thể như kích thước màn hình.
Chọn các phần tử UI trong trình duyệt theo thời gian thực, xem markup và source nó tương quan đến đâu trong Visual Studio.
Thực hiện kiểm tra tự động trình duyệt theo thời gian thực.

Runtime compilation so với hot reload

Sử dụng Browser Link với runtime compilation hoặc hot reload để xem tác dụng của các thay đổi runtime trong các file Razor (.cshtml). Chúng tôi khuyến nghị hot reload.

Cách sử dụng Browser Link

Khi bạn có một dự án ASP.NET Core đang mở, Visual Studio hiển thị điều khiển thanh công cụ Browser Link bên cạnh điều khiển thanh công cụ Debug Type:

!browser link drop-down menu

Từ điều khiển thanh công cụ Browser Link, bạn có thể:

Làm mới ứng dụng web trong nhiều trình duyệt cùng một lúc.
Mở Browser Link Dashboard (Bảng điều khiển Browser Link).
Bật hoặc tắt Browser Link.
Bật hoặc tắt CSS Hot Reload.

Làm mới ứng dụng web trong nhiều trình duyệt cùng lúc

Để chọn một trình duyệt web duy nhất để khởi chạy khi bắt đầu dự án, sử dụng menu thả xuống trong điều khiển thanh công cụ Debug Target:

!F5 drop-down menu

Để mở nhiều trình duyệt cùng một lúc, chọn Browse with... từ cùng menu thả xuống. Giữ phím Ctrl để chọn các trình duyệt bạn muốn, sau đó nhấn Browse:

!Open many browsers at once

Ảnh chụp màn hình sau đây hiển thị Visual Studio với Index view đang mở và hai trình duyệt đang mở:

!Sync with two browsers example

Di chuột qua điều khiển thanh công cụ Browser Link để xem các trình duyệt đang kết nối với dự án:

!Hover tip

Thay đổi Index view, và tất cả các trình duyệt đã kết nối đều được cập nhật khi bạn nhấn nút refresh của Browser Link:

!Browsers sync to changes

Browser Link cũng hoạt động với các trình duyệt mà bạn khởi chạy từ bên ngoài Visual Studio và điều hướng đến URL của ứng dụng.

Browser Link Dashboard

Mở cửa sổ Browser Link Dashboard từ menu thả xuống Browser Link để quản lý kết nối với các trình duyệt đang mở:

!how-to-open-browserlink-dashboard

Các trình duyệt đã kết nối được hiển thị cùng đường dẫn đến trang mà mỗi trình duyệt đang hiển thị:

!Browser link dashboard two connections

Bạn cũng có thể nhấp vào tên một trình duyệt riêng lẻ để chỉ làm mới trình duyệt đó.

Bật hoặc tắt Browser Link

Khi bạn bật lại Browser Link sau khi tắt, bạn phải làm mới các trình duyệt để kết nối lại.

Bật hoặc tắt CSS Hot Reload

Khi CSS Hot Reload được bật, các trình duyệt đã kết nối được tự động làm mới khi bạn thực hiện bất kỳ thay đổi nào với file CSS.

Cơ chế hoạt động

Browser Link sử dụng SignalR để tạo kênh giao tiếp giữa Visual Studio và trình duyệt. Khi Browser Link được bật, Visual Studio đóng vai trò như một SignalR server mà nhiều client (trình duyệt) có thể kết nối. Browser Link cũng đăng ký một middleware component (thành phần phần mềm trung gian) trong pipeline yêu cầu ASP.NET Core. Component này inject các tham chiếu <script> đặc biệt vào mọi yêu cầu trang từ server. Bạn có thể xem các tham chiếu script bằng cách chọn View source trong trình duyệt và cuộn đến cuối nội dung thẻ <body>:

html

    <!-- 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>

Các file source của bạn không bị sửa đổi. Middleware component inject các tham chiếu script một cách động.

Vì code phía trình duyệt hoàn toàn là JavaScript, nó hoạt động trên tất cả các trình duyệt mà SignalR hỗ trợ mà không yêu cầu plugin trình duyệt.

Thiết lập Browser Link (ASP.NET Core 3.x/5.x)

Thêm gói Microsoft.VisualStudio.Web.BrowserLink vào dự án. Đối với các dự án ASP.NET Core Razor Pages hoặc MVC, cũng bật runtime compilation của các file Razor (.cshtml) như mô tả trong Razor file compilation in ASP.NET Core. Các thay đổi cú pháp Razor chỉ được áp dụng khi runtime compilation được bật.

Cấu hình

Gọi UseBrowserLink trong phương thức Startup.Configure:

csharp

app.UseBrowserLink();

Lời gọi UseBrowserLink thường được đặt bên trong một block if chỉ bật Browser Link trong môi trường Development. Ví dụ:

csharp

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Để biết thêm thông tin, xem ASP.NET Core runtime environments.