- vừa được xem lúc

Simulate mobile devices with Device Mode | DevTools Tips

0 0 20

Người đăng: Google Chrome Developers

Want to test your websites on different mobile devices without owning a real one? In this episode, Jecelyn walks you through 5 ways to simulate mobile viewport with the Chrome DevTools Device Mode. 2 bonus tips included!

Chapters:
0:00 Intro
0:23 Toggle Device Toolbar
0:53 Responsive view mode
1:02 Preset media query breakpoints
1:33 Custom media query breakpoints
1:57 Resize with common devices
2:16 Bonus tip: Take a screenshot with mobile device frame
2:28 Add a custom device
2:48 Resize with Rulers mode
3:06 Bonus tip: Simulate your page’s performance

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Links:
Simulate mobile devices with Device Mode → https://goo.gle/devtools-device-mode
Learn responsive design → https://goo.gle/3UoAO5x
Learn PWA → https://goo.gle/3EUW0KH

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer

Bình luận

Bài viết tương tự

- vừa được xem lúc

CONSOLE.LOG trên chrome iOS, tại sao không ?

Bạn đã biết mình có thể Console.log trên chính chiếc điện thoại của mình hay chưa ? Tôi thật sự kinh ngạc khi lần đầu sử dụng nó và chắc chắc rằng nó sẽ thật sự có ích đối với anh em developer chúng ta. Cách hoạt động:. .

0 0 39

- vừa được xem lúc

Các tiện ích siêu hữu ích cho Testing của Chrome (Phần 2)

Bài viết tiếp tục giới thiệu các tiện ích của Chrome hỗ trợ cho việc test giao diện, clear cookies, và lấy test evidence mà bạn không thể bỏ qua trong quá trình testing. Để đảm bảo hoạt động của một ứng dụng Web đáp ứng được mong đợi và lấy được các dữ liệu và code đúng từ server thì việc quản lý đư

0 0 25

- vừa được xem lúc

10 điều mà bạn có thể chưa biết khi dùng Chrome Dev Tools

Nếu bạn là nhà phát triển web, tôi khá chắc chắn rằng bạn đã quen thuộc với Chrome Dev Tools. Nó có một danh sách lớn các tính năng để hỗ trợ phát triển web.

0 0 23

- vừa được xem lúc

New in Chrome 90: Overflow Clip, Permissions Policy, the Declarative Shadow DOM, and more!

Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy.

0 0 24

- vừa được xem lúc

Building for modern browsers: Progressively enhancing like it’s 2003 (German with English subtitles)

Switch on/off English subtitles by clicking on the CC icon. . JS Paint → https://goo.gle/2OaxqPz.

0 0 22

- vừa được xem lúc

Một vài Tips và Tricks trên trình duyệt Chrome hữu dụng mà cả Dev và Test nên biết.

Một vài Tips và Tricks trên trình duyệt Chrome khá hữu dụng mà cả Dev và Tester nên biết. Cái này trước giờ mình cũng ít khi sử dụng nhưng đợt vừa qua nó tại tỏ ra khá hiệu quả trong việc debug của mì

0 0 126