Sử dụng chế độ giả lập di động trên Chrome
S d ng ch đ gi l p di đ ng trên Chromeử ụ ế ộ ả ậ ộ
L p trình Website đã và đang tr nên ph c t p. Ngoài vi c ki m th tính ậ ở ứ ạ ệ ể ử
năng trên hàng tá trình duy , website c a b n c n đ c đánh giá th t k ệ ủ ạ ầ ượ ậ ỹ
l ng trên c m t lo t thi t b đa d ng, t di đ ng đ n máy tính v i ưỡ ả ộ ạ ế ị ạ ừ ộ ế ớ
nh ng h đi u hành, đ phân gi i, khích th c màn hình và t c đ x lý ữ ệ ề ộ ả ướ ố ộ ử
khác nhau. Trong nh ng tr ng h p c c đoan, th i gian cho test có th lâu ữ ườ ợ ự ờ ể
b ng th i gian phát tri n ban đ u. R t may m n, các trình duy t hi n đ i ằ ờ ể ầ ấ ắ ệ ệ ạ
ngày nay đ u đã cung c p công c gi l p di đ ng. Trong bài vi t này ề ấ ụ ả ậ ộ ế
chúng ta s tìm hi u v ch đ gi l p di đ ng trên Chrome.ẽ ể ề ế ộ ả ậ ộ
Chrome Developer Tools
Truy c p vào trang web b n mu n test và m Developer Tools (Menu > ậ ạ ố ở
Tools > Developer Tools, Cmd+Opt+I trên Mac ho c F12 / Ctrl+Shift+I trên ặ
Windows và Linux). B n gi đây đã có th kích ho t gi l p b ng cách ạ ờ ể ạ ả ậ ằ
click vào icon Toggle device toolbar góc trái trên cùng:ở
B gi l p thi t b s hi n lên:ộ ả ậ ế ị ẽ ệ
Gi l p c m ngả ậ ả ứ
Di chuy n con tr chu t lên thi t b đ bi n thành tr ‘ch m’ tròn. Thay ể ỏ ộ ế ị ể ế ỏ ạ
đ i này s ph n ng v i các e0vent JavaScript d ng ch m nh touchstart, ổ ẽ ả ứ ớ ạ ạ ư
touchmove và touchend. Event riêng cho cu t và hi u ng CSS s không ộ ệ ứ ẽ
x y ra.ả
Gi phím Shift sau đó click và di chuy n con chu t đ mô ph ng pinch ữ ể ộ ể ỏ
zooming.
Mobile Emulator Device Toolbar
B n cũng r t nên dành chút th i gian làm quen v i toolbar và menu phía ạ ấ ờ ớ
trên c a s trên mobile emulator:ử ổ
Các m c đi u khi n m c đ nh g m:ụ ề ể ặ ị ồ
ki u thi t b (ho c đ n gi n là Responsive)ể ế ị ặ ơ ả
đ phân gi i hi n t iộ ả ệ ạ
t l (màn hình có th đ c phóng to ho c thu nh đ kh p v i ô giỷ ệ ể ượ ặ ỏ ể ớ ớ ả
l p h n)ậ ơ
nút chuy n đ i portrait/landscape.ể ổ
Menu 3 ch m cho phép b n n/hi n 1 s các đi u khi n khác:ấ ạ ẩ ệ ố ề ể
khung thi t b (hình nh minh h a c a thi t b )ế ị ả ọ ủ ế ị
th c pixelướ
t l pixel c a thi t b (nh 2.0 có các màn hình Retina đ c gi l p)ỷ ệ ủ ế ị ư ượ ả ậ
đi u ti t m ng (gi i h n băng thông và test hi u năng trên các k t ề ế ạ ớ ạ ệ ế
n i ch m h n)ố ậ ơ
tùy ch n cu i cùng cho phép b n ch p screenshot kèm theo khung ọ ố ạ ụ
thi t b n u đ c hi n th .ế ị ế ượ ể ị
Thanh CSS Media Query
Thanh bên d i toolbar hi n th m t lo t kích th c di đ ng, tablet và các ướ ể ị ộ ạ ướ ộ
thi t b khác th ng th y. M c này click đ c khi Responsive đ c ch n ế ị ườ ấ ụ ượ ượ ọ
làm thi t b cho đ r ng đó.ế ị ộ ộ
L a ch n Show media queries t menu ba ch m đ xem đ c b n tóm t t ự ọ ừ ấ ể ượ ả ắ
theo màu c a t t c media query đ c set trong CSS.ủ ấ ả ượ
BLUE – các query t p trung vào maximum widthậ
GREEN – các query t p trung vào widths trong m t kho ng nh t đ nhậ ộ ả ấ ị
ORANGE – các query t p trung vào m t đ r ng nh t đ nh B n có ậ ộ ộ ộ ấ ị ạ
th click b t kỳ thanh nào đ thi t đ t màn hình gi l p v đ r ng ể ấ ể ế ặ ả ậ ề ộ ộ
đó.
L a ch n thi t b c n gi l pự ọ ế ị ầ ả ậ
Dropdown menu phía bên trái b n l a ch n m t thi t b . B n cũng s ở ạ ự ọ ộ ế ị ạ ẽ
đ c cung c p m t lo t preset cho smartphone và tablet, đi n hình nh ượ ấ ộ ạ ể ư
iPhones, iPads, Nexus tablets, Samsung Galaxy,…
B n có th m ho c t t thi t b ho c t nh p kích th c thi t b thông ạ ể ở ặ ắ ế ị ặ ự ậ ướ ế ị
qua:
tên
phân nhóm nh “Mobile” ho c “Tablet”ư ặ
đ phân gi i c a thi t bộ ả ủ ế ị
và t l pixel (ví d nh 2 cho màn hình iPhone Retina – m t đ pixelỷ ệ ụ ư ậ ộ
cao g p đôi đ phân gi i c a view port đ c report).ấ ộ ả ủ ượ
M t c a s m i s xu t hi n cho phép b n xác đ nh:ộ ử ổ ớ ẽ ấ ệ ạ ị
Kinh-vĩ đ hi n t i ho c l a ch n m t thành ph l n nào đó t ộ ệ ạ ặ ự ọ ộ ố ớ ừ
dropdown. B n cũng có th l a ch n Location unavailable đ gi l p ạ ể ự ọ ể ả ậ
ph n ng c a ng d ng khi thi t b không thu đ c tín hi u GPS.ả ứ ủ ứ ụ ế ị ượ ệ
V tính năng xoay. B n có th xoay theo các preset có s n ho c xoay ề ạ ể ẵ ặ
thi t b b ng cách click và kéo.ế ị ằ
Remote Real Device Debugging
Cu i cùng, Chrome cũng đã cho phép b n k t n i m t thi t b Android th tố ạ ế ố ộ ế ị ậ
thông qua USB remote device debugging. L a ch n More tools -> Remote ự ọ
devices trong menu ba ch m chính c a Developer Tools. Ki m tra xem m cấ ủ ể ụ
Discover USB devices đã đ c đánh d u hay ch a, sau đó k t n i đi n ượ ấ ư ế ố ệ
tho i/tablet và làm theo h ng d n.ạ ướ ẫ
Chrome còn cho phép b n set up port forwarding, đ b n có th chuy n ạ ể ạ ể ể
h ng đ n đ a ch web trên local server c a thi t b . Ô preview c a ướ ế ị ỉ ủ ế ị ủ
có thể bạn quan tâm
Hướng dẫn sử dụng ứng dụng Chrome Remote Desktop trên Android
6
924
283
Tài liệu CNTT khác
6
(New)
Sử dụng Momentum để tạo màn hình chờ trên Chrome
5
966
203
Tài liệu CNTT khác
5
(New)
Tắt tính năng tự động phát video theo mặc định trên Chrome và Firefox
7
1.245
252
Tài liệu CNTT khác
7
(New)
Cách tắt tính năng Tự động phát Video gây phiền toái trên Chrome và Fi...
7
950
267
Tài liệu CNTT khác
7
(New)
Ngăn chặn việc tự động đăng nhập tài khoản Google vào các dịch vụ trên...
3
925
279
Tài liệu CNTT khác
3
(New)
Một số tiện ích trên Chrome hữu ích cho kiểm thử phần mềm
9
588
253
Tài liệu CNTT khác
9
(New)
Xem lại mật khẩu tài khoản đã lưu trên Google Chrome
7
981
260
Tài liệu CNTT khác
7
(New)
Hướng dẫn bật tính năng bảo mật Site Isolation trên Chrome
4
857
291
An ninh, bảo mật
4
(New)
thông tin tài liệu
Lập trình Website đã và đang trở nên phức tạp. Ngoài việc kiểm thử tính năng trên hàng tá trình duyệ, website của bạn cần được đánh giá thật kỹ lưỡng trên cả một loạt thiết bị đa dạng, từ di động đến máy tính với những hệ điều hành, độ phân giải, khích thước màn hình và tốc độ xử lý khác nhau. Trong những trường hợp cực đoan, thời gian cho test có thể lâu bằng thời gian phát triển ban đầu.
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
