Giới thiệu
Nếu là nhà phát triển web nhắm đến web đa thiết bị, bạn có thể phải kiểm thử các trang web và ứng dụng web của mình trên một số thiết bị và cấu hình. Kiểm thử được đồng bộ hoá có thể hỗ trợ trường hợp này và là một cách hiệu quả để tự động thực hiện cùng một hoạt động tương tác trên nhiều thiết bị và trình duyệt cùng lúc.
Kiểm thử được đồng bộ hoá có thể giúp giải quyết hai vấn đề đặc biệt tốn thời gian:
- Luôn đồng bộ hoá tất cả thiết bị của bạn với URL bạn muốn kiểm thử. Việc tải theo cách thủ công trên từng thiết bị là quá trình hôm qua, mất nhiều thời gian hơn và giúp bạn dễ dàng bỏ lỡ các lần hồi quy.
- Đồng bộ hoá các hoạt động tương tác. Việc có thể tải một trang lên là rất tốt để kiểm thử hình ảnh, nhưng đối với kiểm thử tương tác, lý tưởng bạn cũng muốn có thể đồng bộ hoá các thao tác cuộn, lượt nhấp và các hành vi khác.
Rất may nếu bạn có quyền truy cập vào một số thiết bị mục tiêu, có một số công cụ dùng để cải thiện luồng dữ liệu từ máy tính đến thiết bị di động. Trong bài viết này, chúng ta sẽ tìm hiểu về Ghostlab, Remote Preview, Adobe Edge Inspect và Grunt.
Công cụ
GhostLab (máy Mac)
Ghostlab là một ứng dụng Mac thương mại (49 USD) được thiết kế để đồng bộ hoá việc kiểm thử các trang web và ứng dụng web trên nhiều thiết bị. Với mức thiết lập tối thiểu, bạn có thể đồng bộ hoá đồng thời:
- Lượt nhấp
- Thao tác
- Lượt cuộn
- Nhập biểu mẫu (ví dụ: biểu mẫu đăng nhập, đăng ký)
Việc này giúp việc kiểm thử trải nghiệm người dùng toàn diện trên trang web của bạn trên nhiều thiết bị rất đơn giản. Sau khi bạn mở trang trong một trình duyệt trên thiết bị của mình, mọi thay đổi đối với thao tác (bao gồm cả làm mới) sẽ khiến mọi thiết bị đã kết nối khác làm mới ngay lập tức. Ghostlab hỗ trợ xem các thư mục cục bộ, vì vậy, quá trình làm mới này cũng xảy ra khi bạn lưu nội dung chỉnh sửa vào tệp cục bộ, giúp mọi thứ luôn được đồng bộ hoá!
Tôi thấy quá trình thiết lập Ghostlab rất đơn giản. Để bắt đầu, hãy tải xuống, cài đặt và chạy bản dùng thử (hoặc phiên bản đầy đủ nếu bạn đang muốn mua). Sau đó, bạn sẽ muốn kết nối máy Mac và các thiết bị mà bạn muốn kiểm thử với cùng một mạng Wi-Fi để có thể tìm thấy các thiết bị này.
Khi Ghostlab đang chạy, bạn có thể nhấp vào "+" để thêm URL cho mục đích thử nghiệm hoặc chỉ cần kéo URL đó từ thanh địa chỉ của trình duyệt. Ngoài ra, hãy kéo thư mục cục bộ mà bạn muốn kiểm thử vào cửa sổ chính để tạo một mục trang web mới. Đối với bài viết này, tôi đang thử nghiệm phiên bản đang hoạt động của http://html5rock.com. Thô tiện, phải không? ; )
Sau đó, bạn có thể khởi động một máy chủ Ghostlab mới bằng cách nhấp vào nút phát ">" bên cạnh tên trang web của mình. Thao tác này sẽ khởi động một máy chủ mới, có tại địa chỉ IP dành riêng cho mạng của bạn (ví dụ: http://192.168.21.43:8080).
Ở đây, tôi đã kết nối Nexus 4 và trỏ Chrome dành cho Android tới địa chỉ IP mà Ghostlab cung cấp cho tôi. Đó là tất cả những gì tôi phải làm. Ghostlab không yêu cầu bạn cài đặt ứng dụng riêng cho mỗi thiết bị như một số giải pháp khác, mà điều đó có nghĩa là bạn có thể bắt đầu kiểm thử nhanh hơn nữa.
Mọi thiết bị bạn kết nối với URL của Ghostlab sẽ được thêm vào danh sách ứng dụng đã kết nối trong thanh bên ở bên phải cửa sổ chính của Ghostlab. Nhấp đúp vào tên thiết bị sẽ hiển thị các thông tin chi tiết bổ sung như kích thước màn hình, hệ điều hành, v.v. Bây giờ, bạn có thể kiểm thử thao tác điều hướng và đồng bộ hoá các lượt nhấp! Thật tuyệt!
Ghostlab cũng có thể hiển thị một số số liệu thống kê về các thiết bị đã kết nối như chuỗi UA, chiều rộng và chiều cao của khung nhìn, mật độ pixel của thiết bị, tỷ lệ khung hình, v.v. Bạn luôn có thể thay đổi URL cơ sở mà bạn đang kiểm tra theo cách thủ công bằng cách nhấp vào bánh răng cài đặt bên cạnh một mục. Thao tác này sẽ mở ra một cửa sổ cấu hình có dạng như dưới đây:
Bây giờ, tôi có thể chọn một trong những thiết bị đã kết nối khác của mình, nhấp vào các đường liên kết khác nhau xung quanh HTML5Rocks và chức năng điều hướng được đồng bộ hoá trên cả Chrome dành cho máy tính (nơi tôi đã nhập vào cùng một URL Ghostlab) cũng như trên tất cả các thiết bị của tôi.
Hơn nữa, Ghostlab cung cấp tuỳ chọn cho phép bạn proxy tất cả các đường liên kết đi qua mạng để thay vì nhấp vào http://192.168.21.43:8080/www.html5rocks.comhttp://192.168.21.43/www.htm5rocks.com/en/performance
Để bật, hãy chọn "Load all content through Ghostlab" (Tải tất cả nội dung thông qua Ghostlab) trong thẻ "Content Loading" (Tải nội dung).
Cách xem ví dụ thực tế:
Ghostlab có thể tải vô số trang web hoặc cửa sổ trên mọi trình duyệt được hỗ trợ. Việc này không chỉ cho phép bạn thử nghiệm trang web của mình ở các độ phân giải khác nhau, mà còn cho biết cách mã của bạn hoạt động trên các trình duyệt và nền tảng khác nhau. Thật tuyệt vời!
Với Ghostlab, bạn có thể định cấu hình chế độ thiết lập cho không gian làm việc của dự án mà bạn đang xem trước, đồng thời bạn có thể chỉ định xem bạn có muốn xem và làm mới các thay đổi đối với thư mục khi phát hiện thấy các thay đổi đó hay không. Điều này có nghĩa là những thay đổi sẽ làm mới tất cả ứng dụng được kết nối. Bạn không còn phải làm mới theo cách thủ công nữa!
Có thể bạn đang thắc mắc về điều gì khác mà Ghostlab có thể hỗ trợ. Mặc dù chắc chắn không phải là con dao của quân đội Thụy Sĩ, nhưng nó cũng hỗ trợ việc kiểm tra mã từ xa trên các thiết bị được kết nối. Thông qua giao diện chính, việc nhấp đúp vào tên thiết bị bất kỳ sẽ hiển thị tuỳ chọn "gỡ lỗi". Thao tác này sẽ khởi chạy phiên bản Công cụ của Chrome cho nhà phát triển để bạn khám phá.
Ghostlab giúp bạn thực hiện việc này thông qua trình kiểm tra web từ xa Weinre đi kèm, cho phép bạn gỡ lỗi các tập lệnh và chỉnh sửa kiểu trên các thiết bị được kết nối. Tương tự như trải nghiệm gỡ lỗi từ xa dành cho Chrome dành cho Android, bạn có thể chọn các phần tử, chạy một số tập lệnh gỡ lỗi và phân tích hiệu suất.
Nhìn chung, tôi rất ấn tượng với tốc độ sử dụng Ghostlab để kiểm thử mỗi ngày trên nhiều thiết bị. Nếu là người làm nghề tự do, bạn có thể thấy chi phí giấy phép thương mại cao hơn một chút (xem bên dưới để biết thêm các lựa chọn khác). Tuy nhiên, tôi rất sẵn lòng giới thiệu Ghostlab.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect là một phần của gói thuê bao Adobe Creative Cloud nhưng cũng được cung cấp dưới dạng bản dùng thử miễn phí. Dịch vụ này cho phép bạn lái nhiều thiết bị iOS và Android bằng Chrome (thông qua tiện ích Edge Inspector Chrome), để nếu bạn duyệt đến một URL cụ thể, thì tất cả các thiết bị được kết nối của bạn sẽ luôn đồng bộ hoá.
Để thiết lập, trước tiên, hãy đăng ký một tài khoản Adobe Creative Cloud hoặc đăng nhập vào một tài khoản hiện có nếu bạn đã có tài khoản. Tiếp theo, hãy tải xuống và cài đặt Edge Inspector từ Adobe.com (hiện có sẵn cho Mac và Windows nhưng không có sẵn cho Linux – rất tiếc!). Xin lưu ý rằng docs về công cụ Kiểm tra Edge rất hữu ích để bạn có thể sử dụng.
Sau khi cài đặt, bạn nên tải tiện ích kiểm tra Edge cho Chrome để có thể đồng bộ hoá hoạt động duyệt web giữa các thiết bị đã kết nối.
Ngoài ra, bạn cũng sẽ cần cài đặt ứng dụng Edge Inspect trên từng thiết bị mà bạn muốn đồng bộ hoá các hành động. Rất may ứng dụng này hiện đã hỗ trợ iOS, Android và Kindle.
Với quy trình cài đặt phía sau, giờ đây chúng tôi có thể bắt đầu kiểm tra các trang của mình. Bạn cần đảm bảo tất cả các thiết bị của mình được kết nối với cùng một mạng để tính năng này hoạt động.
Khởi động Edge Inspect trên máy tính, tiện ích Edge Inspect trong Chrome, sau đó là ứng dụng trên thiết bị (xem bên dưới):
Giờ đây, chúng ta có thể chuyển đến một trang web như HTML5Rocks.com trên máy tính và thiết bị di động của chúng tôi sẽ tự động chuyển đến cùng một trang đó.
Giờ đây trong tiện ích, bạn cũng sẽ thấy thiết bị của mình được liệt kê với biểu tượng <> bên cạnh như trong ảnh chụp màn hình dưới đây. Khi bạn nhấp vào đây, một phiên bản của Weinre sẽ mở ra để bạn kiểm tra và gỡ lỗi trang của mình.
Weinre là một bảng điều khiển và trình xem DOM đồng thời thiếu các tính năng của Công cụ của Chrome cho nhà phát triển như gỡ lỗi JavaScript, phân tích tài nguyên và thác nước mạng. Mặc dù đây là công cụ tối thiểu cho nhà phát triển, nhưng mã này rất hữu ích trong việc kiểm tra tính hợp lý của trạng thái DOM và JavaScript.
Tiện ích Edge Inspect cũng hỗ trợ việc tạo ảnh chụp màn hình từ các thiết bị đã kết nối một cách dễ dàng. Hữu ích khi thử nghiệm bố cục hoặc chỉ chụp trang của bạn để chia sẻ với người khác.
Đối với các nhà phát triển đã trả tiền cho CC, Edge Inspect là một giải pháp tuyệt vời. Tuy nhiên, việc này đi kèm một vài cảnh báo, chẳng hạn như mỗi thiết bị yêu cầu cài đặt ứng dụng chuyên dụng và một số thao tác thiết lập bổ sung mà bạn có thể không tìm thấy bằng giải pháp thay thế như Ghostlab.
Xem trước từ xa (Mac, Windows, Linux)
Xem trước từ xa là một công cụ nguồn mở giúp bạn lưu trữ các trang HTML và nội dung mà bạn có thể hiển thị trên nhiều thiết bị.
Bản xem trước từ xa sẽ thực thi lệnh gọi XHR tại khoảng thời gian 1100 mili giây một lần để kiểm tra xem URL trong tệp cấu hình có thay đổi hay không. Nếu nhận thấy có, tập lệnh sẽ cập nhật thuộc tính src của iframe đã tải vào trang cho từng thiết bị, tải trang vào đó. Nếu không phát hiện thấy thay đổi nào, tập lệnh sẽ tiếp tục thăm dò ý kiến cho đến khi có thay đổi.
Đây là tính năng tuyệt vời để liên kết các thiết bị với nhau và dễ dàng thay đổi URL trên tất cả các thiết bị đó. Cách bắt đầu:
- Tải xuống Bản xem trước từ xa và di chuyển tất cả tệp của bản xem trước đó sang máy chủ có thể truy cập cục bộ. Đó có thể là Dropbox, một máy chủ phát triển hoặc một thứ khác.
- Tải "index.html" từ tệp tải xuống này trên tất cả thiết bị mục tiêu của bạn. Trang này sẽ được dùng làm trình điều khiển và sẽ tải trang mà bạn muốn kiểm tra bằng cách sử dụng iframe.
- Chỉnh sửa "url.txt" (có trong tệp tải xuống và hiện được phân phát trên máy chủ của bạn) với URL mà bạn muốn xem trước. Lưu tệp này.
- Tính năng Xem trước từ xa sẽ nhận thấy tệp url.txt đã thay đổi và sẽ làm mới tất cả các thiết bị đã kết nối để tải URL của bạn.
Mặc dù là giải pháp lo-fi, nhưng Xem trước từ xa miễn phí và hoạt động.
Grunt + Live-Reload (Mac, Windows, Linux)
Grunt (và Yeoman) là các công cụ dòng lệnh dùng để giàn giáo và xây dựng các dự án trên giao diện người dùng. Nếu đang sử dụng các công cụ này và đã thiết lập tính năng tải lại trực tiếp, bạn có thể dễ dàng cập nhật quy trình công việc để cho phép kiểm thử trên nhiều thiết bị, trong đó mỗi thay đổi bạn thực hiện trong trình chỉnh sửa đều dẫn đến quá trình tải lại trên mọi thiết bị mà bạn đã mở ứng dụng cục bộ.
Có thể bạn đã quen với việc sử dụng grunt server. Khi chạy từ thư mục gốc của dự án, công cụ này sẽ theo dõi mọi thay đổi đối với tệp nguồn và tự động làm mới cửa sổ trình duyệt. Điều này là nhờ tác vụ grunt-contrib-watch mà chúng tôi thực hiện trong máy chủ.
Nếu bạn vô tình sử dụng Yeoman để triển khai chi tiết cho dự án của mình, thì công cụ này sẽ tạo ra một Gruntfile với mọi thứ bạn cần để tải lại trực tiếp trên máy tính của bạn. Để tính năng này hoạt động trên nhiều thiết bị, bạn chỉ cần thay đổi một thuộc tính, đó là hostname (trên máy tính của bạn). Trang này sẽ được liệt kê trong connect. Nếu bạn thấy hostname được đặt thành localhost, chỉ cần thay đổi thành 0.0.0.0. Tiếp theo, hãy chạy grunt server và như bình thường, một cửa sổ mới sẽ mở ra và hiển thị bản xem trước trang của bạn. URL có thể sẽ có dạng http://localhost:9000 (9000 là cổng).
Kích hoạt một thẻ hoặc thiết bị đầu cuối mới và sử dụng ipconfig | grep inet để khám phá IP nội bộ của hệ thống. Mã này có thể có dạng 192.168.32.20. Bước cuối cùng là mở một trình duyệt như Chrome trên thiết bị mà bạn muốn đồng bộ hoá các ứng dụng tải trực tiếp và nhập địa chỉ IP này, theo sau là số cổng trước đó. Tức là 192.169.32.20:9000.
Vậy là xong! Việc tải lại trực tiếp giờ đây sẽ khiến mọi chỉnh sửa bạn thực hiện đối với tệp nguồn trên máy tính để kích hoạt quá trình tải lại trong cả trình duyệt dành cho máy tính và trình duyệt trên thiết bị di động của bạn. Tuyệt vời!
Yeoman cũng có sẵn Trình tạo thiết bị di động, giúp việc thiết lập quy trình này trở nên dễ dàng.
LiveStyle Emmet
Emmet LiveStyle là một trình bổ trợ trình chỉnh sửa và trình duyệt, giúp bạn chỉnh sửa CSS trực tiếp vào quy trình phát triển của mình. Công cụ này hiện có sẵn cho Chrome, Safari và Sublime Text, đồng thời hỗ trợ chỉnh sửa hai chiều (trình chỉnh sửa cho trình duyệt và ngược lại).
Emmet LiveStyle không buộc làm mới trình duyệt hoàn toàn khi bạn thực hiện thay đổi, mà thay vào đó sẽ đẩy các nội dung chỉnh sửa CSS trên giao thức gỡ lỗi từ xa cho Công cụ cho nhà phát triển. Điều này có nghĩa là bạn có thể thấy các thay đổi được thực hiện trong trình chỉnh sửa trên máy tính trong mọi phiên bản Chrome được kết nối, cho dù là trên Chrome dành cho máy tính hay Chrome dành cho Android.
LiveStyle có cái gọi là "chế độ nhiều khung hiển thị", lý tưởng để thử nghiệm và chỉnh sửa các thiết kế thích ứng trên các cửa sổ và thiết bị. Ở chế độ nhiều khung hiển thị, mọi bản cập nhật của trình chỉnh sửa đều được áp dụng cho tất cả cửa sổ cũng như các bản cập nhật Công cụ cho nhà phát triển cho cùng một trang.
Sau khi cài đặt gói LiveStyle, để bắt đầu chỉnh sửa CSS trực tiếp, hãy làm như sau:
- Khởi động Sublime Text và mở tệp CSS trong dự án
- Khởi động Chrome và truy cập trang có CSS mà bạn muốn chỉnh sửa
- Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển LiveStyle. Chọn tuỳ chọn "Enable LiveStyle". Lưu ý: Công cụ cho nhà phát triển phải luôn mở trong phiên chỉnh sửa trực tiếp cho từng cửa sổ để áp dụng các nội dung cập nhật về kiểu.
- Khi tính năng này được bật, danh sách các biểu định kiểu sẽ hiển thị ở bên trái và danh sách các tệp trình chỉnh sửa của bạn ở bên phải. Chọn tệp trình chỉnh sửa để liên kết với trình duyệt. Vậy là xong! Micrô cần dài.
Giờ đây, danh sách tệp trình chỉnh sửa sẽ tự động được cập nhật khi bạn chỉnh sửa, tạo, mở hoặc đóng tệp.
Kết luận
Thử nghiệm trên nhiều thiết bị vẫn là một không gian mới và nhanh chóng với nhiều đối thủ mới đang trong quá trình phát triển. Rất may là hiện có một số công cụ miễn phí và thương mại để đảm bảo khả năng tương thích và kiểm thử của bạn trên nhiều bộ thiết bị.
Tuy nhiên, vẫn còn rất nhiều tiềm năng để cải thiện lĩnh vực này và chúng tôi khuyến khích bạn suy nghĩ về cách cải thiện hơn nữa công cụ kiểm thử trên các thiết bị. Bất kỳ giải pháp nào giúp giảm thời gian thiết lập và cải thiện quy trình làm việc trên nhiều thiết bị đều mang lại lợi ích.
Vấn đề
Có lẽ vấn đề lớn nhất mà tôi gặp phải trong quá trình kiểm thử bằng các công cụ này là thiết bị thường xuyên chuyển sang chế độ ngủ. Đây không phải là một yếu tố phá vỡ giao dịch nhưng sẽ gây khó chịu sau một thời gian. Nếu có thể, bạn nên đặt thiết bị ở chế độ không ngủ để giải quyết vấn đề. Tuy nhiên, hãy lưu ý rằng việc này có thể làm tiêu hao pin trừ phi bạn luôn cắm sạc.
Cá nhân tôi không gặp phải bất kỳ vấn đề lớn nào khi dùng GhostLab. Với mức giá 49 USD, một số người có thể thấy mức giá hơi cao; tuy nhiên, xin lưu ý rằng nếu bạn thường xuyên sử dụng, thì mức giá này sẽ cao hơn hoặc ít hơn. Một trong những điều thú vị nhất về việc thiết lập là bạn không phải lo lắng về việc cài đặt và quản lý ứng dụng trên mỗi thiết bị mục tiêu. Cùng một URL hoạt động ở mọi nơi.
Với Adobe Edge Inspect, tôi nhận thấy việc phải cài đặt và sử dụng các ứng dụng cụ thể trên từng thiết bị sẽ hơi tẻ nhạt. Tôi cũng nhận thấy tính năng này không làm mới một cách nhất quán tất cả các ứng dụng đã kết nối, nghĩa là tôi phải tự làm việc này trên tiện ích của Chrome. Bạn cũng cần đăng ký gói thuê bao Creative Cloud và chỉ tải được các trang web trong ứng dụng thay vì trong một trình duyệt đã chọn trên thiết bị của bạn. Điều này có thể hạn chế khả năng thử nghiệm chính xác.
Xem trước từ xa hoạt động như được quảng cáo nhưng cực kỳ nhẹ. Điều này rất quan trọng đối với không chỉ làm mới trang web trên nhiều thiết bị, bạn cần có một công cụ nâng cao hơn. Ví dụ: quá trình này sẽ không đồng bộ hoá các thao tác nhấp hoặc cuộn.
Đề xuất
Nếu đang tìm một giải pháp miễn phí trên nhiều nền tảng để bắt đầu, bạn nên sử dụng tính năng Xem trước từ xa. Đối với những người làm việc trong một công ty đang tìm kiếm một giải pháp trả phí, GhostLab luôn mang đến trải nghiệm tuyệt vời cho tôi nhưng chỉ hoạt động với máy Mac. Đối với người dùng Windows, Adobe Edge Inspect là công cụ tốt nhất mà bạn có thể sử dụng và trừ một số điểm độc đáo, thường thì họ cũng hoàn thành tốt công việc.
Grunt và LiveStyle cũng rất phù hợp để tăng cường việc lặp lại trực tiếp trong quá trình phát triển.