Bắt đầu miễn phí
Tất cả bài viết
Nhiều điện thoại và một máy tính bảng xem trước một app cục bộ qua một tunnel chia sẻ.
mobile testinglocalhost tunnelingQAcross-device

Kiểm thử di động với tunnel localhost

Bạn có thể kiểm thử app trên thiết bị di động khi nó chạy trên localhost bằng cách phơi nó qua một URL HTTPS công khai. Điện thoại và máy tính bảng không thể tới 127.0.0.1 trên laptop của bạn, nhưng một tunnel localhost bắc cầu khoảng cách đó tức thì.

Vì sao thiết bị di động không truy cập được localhost

Khi bạn chạy một máy chủ dev trên laptop, nó lắng nghe trên một địa chỉ loopback (127.0.0.1 hoặc localhost) mà chỉ máy bạn tới được. Dù điện thoại ở cùng mạng Wi-Fi, gõ http://192.168.x.x:3000 thường thất bại vì luật tường lửa, yêu cầu HTTPS hoặc chính sách CORS.

Một tunnel localhost cho điện thoại bạn một URL HTTPS chuẩn chuyển tiếp tới tiến trình cục bộ — không cần cấu hình mạng.

Điều kiểm thử di động bắt được mà giả lập bỏ lỡ

  • Mục tiêu chạm thật, hành vi cuộn và xử lý cử chỉ.
  • Kích thước viewport thực trên các thiết bị iOS và Android.
  • Các điểm quái của trình duyệt di động (Safari, Chrome, WebView trong app).
  • Hiệu năng trên phần cứng thật, không phải môi trường mô phỏng.
  • Hành vi camera, định vị và API riêng của thiết bị.
  • Chuyển hướng OAuth và deep-link trên trình duyệt di động.

Từng bước: kiểm thử di động với PortPreview

  1. Khởi động máy chủ dev cục bộ (ví dụ npm run dev trên cổng 3000).
  2. Chạy npx portpreview 3000 để có một URL HTTPS công khai.
  3. Mở URL trên trình duyệt điện thoại (hoặc quét mã QR nếu nhóm bạn chia sẻ link theo cách đó).
  4. Kiểm thử bố cục responsive, điều hướng, biểu mẫu và luồng auth trên thiết bị thật.
  5. Chia sẻ cùng URL với đồng nghiệp QA hoặc thiết kế để rà soát đa thiết bị.

Danh sách kiểm thử di động

Bố cục responsive

Xác minh breakpoint, co giãn font, tải ảnh và hành vi tràn trên điện thoại và máy tính bảng.

Tương tác chạm

Kiểm thử mục tiêu chạm, cử chỉ vuốt, pull-to-refresh và header dính dưới đầu vào chạm thật.

Luồng xác thực

Chuyển hướng OAuth và đăng nhập magic-link hành xử khác trên trình duyệt di động. Kiểm thử trọn chu kỳ auth trên thiết bị. Xem kiểm thử callback OAuth để biết chi tiết thiết lập.

Hiệu năng

Đo tải trang, tác động bundle JavaScript và tối ưu ảnh trên thiết bị tầm trung — không chỉ laptop phát triển.

Mẹo cho kiểm thử localhost di động đáng tin

  • Dùng HTTPS: nhiều tính năng di động (service worker, cookie an toàn, định vị) yêu cầu HTTPS, mà tunnel cung cấp mặc định.
  • Tắt cache khi kiểm thử: hard-refresh hoặc chế độ ẩn danh để tránh asset cũ.
  • Kiểm thử nhiều thiết bị: iOS Safari và Android Chrome xử lý CSS và JavaScript khác nhau.
  • Giữ tunnel hoạt động: URL ngừng hoạt động khi bạn đóng phiên CLI.

Chia sẻ bản xem trước di động với nhóm

Thay vì quay ảnh chụp màn hình, chia sẻ URL tunnel để đồng nghiệp kiểm thử trên thiết bị của họ. Đọc cách chia sẻ máy chủ dev cục bộ để biết quy trình cộng tác.

Bắt đầu PortPreview miễn phí để kiểm thử di động nhanh từ localhost.

Câu hỏi thường gặp

Làm sao kiểm thử localhost trên điện thoại của tôi?
Khởi động một tunnel localhost với PortPreview để có URL HTTPS công khai, rồi mở URL đó trong trình duyệt điện thoại. Tunnel chuyển tiếp lưu lượng tới máy chủ dev cục bộ của bạn.
Vì sao điện thoại không truy cập được localhost trên laptop của tôi?
Địa chỉ localhost là giao diện loopback chỉ tới được trên máy đang chạy máy chủ. Một tunnel tạo một URL công khai chuyển tiếp tới tiến trình cục bộ của bạn.
Tôi có cần HTTPS để kiểm thử di động không?
Có, cho nhiều tính năng di động gồm cookie an toàn, service worker và chuyển hướng OAuth. Tunnel localhost cung cấp HTTPS mặc định mà không cần thiết lập chứng chỉ.