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
944
290
Tài liệu CNTT khác
6
(New)
Sử dụng Momentum để tạo màn hình chờ trên Chrome
5
981
211
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.271
274
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
976
273
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
957
284
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
603
261
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
1.025
267
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
884
295
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!
xem nhiều trong tuần
Giáo trình Quản trị học của Đại học kinh tế quốc dân
4 đề thi học sinh giỏi Toán lớp 2, có đáp án kèm theo
Mẫu slide thuyết trình về Golf
Luận văn về các tác nhân ảnh hưởng đến kết quả học tập của sinh viên chính quy trường Đại Học Kinh Tế- TP HCM
Bài tập ôn tập cuối tuần lớp 3: Tuần 21
Bài tập ôn tập cuối tuần lớp 2: Tuần 21
yêu cầu tài liệu
Giúp bạn tìm tài liệu chưa có
×
