您的位置:首页 » 分类: 前端工具 & 前端资源 » 文章: Chrome DevTools – 使用设备模式模拟移动设备

Chrome DevTools – 使用设备模式模拟移动设备

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。

简而言之

切换Device Mode(设备模式)

切换Device Mode(设备模式)来控制Device Mode(设备模式)的开和关。

Initial start for device mode

课程内容大纲 | 开篇:一线大公司对中高级前端工程师的要求

  • 1 JavaScript 测试基础
  • 2 JavaScript 难点选讲
  • 3 异步流程控制
  • 4 模块化
  • 5 模板引擎
  • 6 webpack
  • 7 学会性能测试对比
  • 8 基于缓存的前端性能优化
  • ......
点击报名

Device Mode(设备模式)打开时,图标为蓝色(设备模式开启)。

关闭时,图标为灰色(关闭设备模式)。

默认情况下启用Device Mode(设备模式)。

您也可以按Command+Shift+M (Mac) 或者Ctrl+Shift+M (Windows, Linux) 来切换设备模式。要使用此快捷方式,你的开发者工具窗口需要获取焦点。如果焦点您的可视窗口上,那么将触发Chrome的切换用户快捷方式

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/device-mode/

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

发表评论

电子邮件地址不会被公开。 必填项已用*标注