字幕组成品列表（Beta）
  • 写在前面
  • Android 平台
    • Game On! 游戏开发系列 - 031
      • Pie Noon - 1503060393
      • The Death of Base Game Activity - 1504030543
      • Surviving OpenGL Context Loss - 1504030546
      • WebP for Game Devs - 1504030547
      • Saved Games In-Depth (Part 1) - 1504070556
      • Saved Games In-Depth (Part 2) - 1504030548
      • Smaller Flipbook Textures with CRABBY - 1504030544
      • Google Tag Manager - 1504030545
      • Flatbuffers - 1505050794
      • Achievement Point Pointers - 1505050796
      • Frequency Scaling - 1505050797
      • Meet the Management APIs - 1501140367
      • Y U Ship Broken Games - 1505050795
    • Android 性能优化 - 088
      • Garbage Collection in Android - 1503170425
      • Performance Cost of Memory Leaks - 1503170424
      • Rendering Performance 101 - 1501130351
      • Understanding Overdraw - 1501130352
      • Understanding VSYNC - 1501130353
      • Tool - Profile GPU Rendering - 1501130354
      • Why 60fps? - 1501130355
      • Android UI and the GPU - 1501130356
      • Invalidations, Layouts, and Performance - 1501130357
      • Overdraw, Cliprect, QuickReject - 1501130358
      • Tool - Memory Monitor - 1501130363
      • Battery Performance 101 - 1501130364
      • Understanding Battery Drain on Android - 1501130365
      • Battery Drain and WakeLocks - 1501130366
      • Memory Performance 101 - 1504170661
    • I/O 2014 Android 开发专题 - 089
      • Activity Transitions - 1504020505
      • Building Apps For Android TV - 1504020520
      • Building great Android media experiences - 1504020510
      • Building a quality app from start to finish - 1504020515
      • App Indexing API - 1504020507
      • What's new in WebView - 1504010484
      • Bluetooth Low Energy - 1504010486
      • Building impressive Android media experiences - 1504010493
      • The next Generation of Authentication - 1504020497
      • Don't Alpha That Pixel! - 1504020523
      • NFC + HCE Your phone in an interactive world - 1504020509
      • Demystifying encodes and decodes of WebM - 1504020521
      • Google Cloud Messaging - 1504020524
      • Getting your Game on the Big Screen - 1504020518
      • I hear you like realtime memes - 1504020511
      • Offerize your App - 1504020506
      • Using the Android Job Scheduler - 1504020504
      • From Holo to Material - 1504020526
      • Under the Hood of Android Auto - 1504020501
      • Isolation for Android App Developers - 1504020498
      • Android Work - 1504010496
      • ExoPlayer: Adaptive video streaming on Android - 1504010489
      • Sample rates and resampling: Why can't we all just agree? - 1504010488
      • Drive Android API - 1504010485
    • Android Studio - 004
      • Layout Editor (Ep 3, Android Studio) - 1503290479
      • Introducing Gradle (Ep 2, Android Studio) - 1503170426
    • I/O 2014 Android 分发主题 - 091
      • Introduction to Google Play - 1504030534
      • Google Play: building your user community - 1504030535
      • Optimizing Apps for Education - 1504030536
      • Succeeding in Education Technology - 1504030530
      • Subscriptions Made Easy with Google Play - 1504030531
      • The world is your playground - go global with Google - 1504030533
      • Maximizing discoverability on Google Play - 1504030538
    • Android Auto - 003
      • Introduction to Android Auto - 1504130615
      • Android Auto Messaging - 1504130617
      • Android Auto Audio - 1504130616
    • Android Wear - 006
      • Designing for Android Wear - 1503210448
      • How We Customized Google Apps for Android Wear - 1503210450
      • Fullscreen apps for Android Wear - 1503210445
      • New Notification Features for Android Wear - 1503210446
      • Building Cloud-powered wearable Apps - 1503210449
      • An Introduction to Android Wear - 1503190435
      • Google I/O 2014 - Android Wear: The developer's perspective - 1503210442
      • Devoxx 2014 Interviews: Android Wear - 1503210440
      • DevBytes: Watch Faces for Android Wear - 1503210439
    • Android TV - 005
      • Using the Leanback library - 1504080588
      • Beach Buggy Racing Multiplayer with Nearby Connections (Play Services) - 1503060387
    • Android for Work - 106
      • Android for Work for Developers - 1503060390
      • App Configurations, Testing and Launchers - 1504110590
    • IO Bytes 2014 - Android - 066
      • Chrome Apps on Android and iOS - 1501080014
      • Perf Primer CPU, GPU and your Android game - 1501080017
  • Chrome 平台
    • IO Bytes 2014 - Chrome and Web - 067
      • Using the PageSpeed API - 1505070815
      • Fabulous Forms for the multi-device web - 1505070816
      • Testing multi-screen web pages - 1505070817
      • Responsive images today - 1505070819
      • Web Performance Testing at YouTube - 1505070828
      • Building sites for the multi-device web - 1505070820
      • Deep dive: Google Cloud Messaging for Chrome - 1505070827
  • Google 创业者资源
    • Coffee with a Googler - 012
      • Chat with Allen Huang of AndroidTV - 1503040384
      • Chat with Fred Chung about developer advocacy - 1503070395
      • Google Fit platform with Michelle Haq - 1503210443
      • Android Auto Product Manager Andrew Brenner - 1501120027
      • Chat with Francis Ma about Google Play services - 1501120028
    • Root Access For Startups - 077
      • What we learned building plug-ins for Android, with startup Magnet - 1503230453
      • How to use crowdfunding to your advantage, with startup Hale Devices - 1503280462
      • How to overcome customer objections when selling tech, with startup Guesswork - 1503280458
    • First Things First - 029
      • Getting started with Android: A crash-course in developing for Android - 1504120601
      • How to ask a question: conducting research for your startup - 1504120603
      • MVP Design Hacks: transform your hot idea into a validated prototype - 1504120602
      • Build something people want: Solving real problems - 1504120605
    • How I - 061
      • Use BigQuery to find my most valuable customers - 1504070573
      • Manage beta testing communities using Google Play - 1504070572
      • Use paper wireframing to build native prototypes - 1504070570
      • Used social media and $0 marketing to get 68 million users - 1504070568
      • Prep to fundraise with four questions - 1504070564
      • Validated my idea in 2 days (with no code) - 1504070562
      • Build open platforms on Android - 1504120596
      • Get cheap, automatic analytics for my business using BigQuery - 1504070571
      • Write press releases to get international media coverage - 1504070569
      • Test beta-product features using Google Apps - 1504070563
      • Use URL builder to measure ROI on social media - 1504070561
      • Use events to build DeadSocial's brand - 1504070557
      • Use BigQuery to visualize streaming data - 1503220452
      • Find, screen, and hire developers - 1503120406
      • Drive engagement with social challenges - 1504070558
  • 设计
    • DesignBytes - 017
      • Paper and Ink: The Materials that Matter - 1505050793
  • 云计算
    • DevBytes: Google Cloud Platform - 021
      • Powering the next killer app with the Google Cloud Platform - 1504210672
      • Introduction to Google Cloud Endpoints - 1504210675
      • The Beauty of Scale with Google Cloud Platform - 1504210678
    • Google Cloud Platform - Big Data - 105
      • GDELT & BigQuery: Understand the world - 1502200379
    • Uncategorized - 999
      • Introducing Google Cloud Platform Resources - 1501190370
  • Google 应用开发
    • Launchpad Online - 072
      • The Setup: Creating new apps using Google APIs - 1503190428
      • Listing your files in Google Drive - 1503190429
      • Customizing Google Analytics for your startup - 1503290473
      • The Launchpad Online series - 1503190427
      • Getting started with Google Analytics - 1503290472
      • Accessing Google Maps from a spreadsheet?!? - 1502220381
      • Change the world in 10 lines of code - 1503080398
    • Google Play Services - 054
      • Google Play services 6.1 - 1503290481
      • Google Play Services 7.0 - 1503200437
      • Google Play Services 6.5 - 1501080015
    • 谷歌地图 iOS SDK - 053
      • Maps Live: New Features in the Google Maps Mobile APIs for Android and iOS - 1504300777
    • Google 移动搜索开发 - 055
      • Is your app in the Google index? - 1504120598
      • Get more engaged users with Google Search for Developers - 1503070397
    • DevBytes: Google Cast - 020
      • Google Cast SDK for Android - 1504180666
      • Media Router Framework - Part 1 - Media Router API - 1504180667
      • Overview for Google Cast Receivers - 1504180664
      • Google Cast SDK for iOS - 1504180663
    • Getting Started with the Google Maps SDK for iOS - 035
      • Getting started with the Google Maps SDK for iOS, Part 1 - 1504270757
    • IO Bytes 2014 - Wearables - 070
      • Voice Driven GDK Glassware - 1505280836
    • Route 85 - 078
      • Introducing Route 85 - 1501120022
      • Quick Tip: Don't Default that Switch! - 1501190371
      • OpenInChrome on iOS, Part 1 - 1501120023
      • OpenInChrome on iOS, Part 2 - 1501120024
      • OpenInChrome on iOS, Part 3 - 1501120025
      • OpenInChrome on iOS, Part 4 - 1501120026
    • DevBytes 2014 - 019
      • Web Components - Template - 1505040789
      • Wearable DataLayer API - 1505050792
      • Using srcset for responsive images - 1505050790
      • The picture element for art direction - 1505050791
    • Uncategorized - 999
      • Sun Surveyor brings augmented reality to photographers using Google Maps APIs - 1504200668
      • Snappy travels with the Roads API - 1503060392
      • Easy Maps Apps in Java and Python - 1501140030
  • Google 广告平台
  • Polymer
    • Polycasts - 076
      • The Awesome Power of Auto-Binding Templates -- Polycasts #08 - 1502220382
      • Content Switcheroo with Core-Pages -- Polycasts #09 - 1502200380
      • Core Iconset -- Polycasts #02 - 1505040788
  • Web 平台
    • HTTP 203 - 062
      • Gotchas - 1501140368
      • Font Rendering - 1501080016
    • Web Components - 081
      • DevBytes: Web Components - Overview - 1504250709
  • 宣传视频
    • Uncategorized - 999
      • Google Developers - 1501150369
      • I/O Extended 2014 - Join me - 1502220383
  • Google 各类开发者会议
    • 2014 Chrome 开发者高峰会议 - 009
      • Keynote - Chrome Dev Summit 2014 (Darin Fisher) - 1503120407
      • TLS All the Things! - Security with Performance(Chris Palmer) - 1503140412
      • Let’s build some apps with Polymer!(Rob Dodson) - 1503150415
      • Day One Closing Remarks(Sundar Pichai) - 1503150417
      • Chrome Leadership panel - 1503160422
      • Fundamentals of Mobile Web Development(Matt Gaunt) - 1503150416
    • 2015 游戏开发者大会中 - 039
      • FlatBuffers - 1504150640
      • Games for Google Cast - 1504150637
      • Top 10 Things Android Game Developers Should Know v 3.0 - 1504150643
      • Automate Publishing for Google Play APIs - 1504150639
      • 3 Game Design Mistakes You're Making - 1504150636
      • Android TV - 1504150638
      • How to Go Viral Without Really Trying - 1504150641
    • Devoxx 2014 Interviews - 024
      • What's new in Android 5.0 Lollipop - 1504260740
      • Android Tools - 1504260743
      • BigQuery and user-defined functions - 1504260744
    • IO Bytes 2014 - 065
      • Dart in Google Cloud - 1505070810
      • Big genomic data on Google Cloud Platform - 1505070811
      • Easy International Checkout with Chrome - 1505070802
      • Google developer tools and APIs for iOS - 1503190436
      • Whet your appetite with IO Bytes - 1501080021
    • PlayTime@Shanghai - 095
      • 主题演讲 Chris Yerga - 1504060549
      • 如何成功地开发你的应用 Ellie Powers - 1504060550
      • 在Google上营利 Brahim Elbouchikhi - 1504060551
      • Playtime Shanghai event sizzle reel - 1504070552
    • Project Google I/O 2015 - 098
      • Project Tango Mobile 3D tracking and perception - 1506120857
      • Democratizing Education - 1506120868
      • Improve your Android app’s accessibility - 1506120864
      • Google Cloud Messaging 3.0 - 1506120844
      • Developers connecting the world through Google Play - 1506120862
  • 开源开放技术
    • Compressor Head - 013
      • The Trailer, Season 2 - 1503060385
      • Behind the Scenes - 1503210441
      • Arithmetic Compression (Ep 5, Compressor Head) Google - 1503070394
      • Introducing Compressor Head - 1502120372
      • Episode 1 (Variable Length Codes) - 1502120373
      • Episode 2 (The LZ77 Compression Family) - 1502120374
      • Episode 3 (Markov Chain Compression) - 1502120375
Powered by GitBook
On this page
  • 译者信息
  • 解说词中文版：

Was this helpful?

  1. Chrome 平台
  2. IO Bytes 2014 - Chrome and Web - 067

Testing multi-screen web pages - 1505070817

PreviousFabulous Forms for the multi-device web - 1505070816NextResponsive images today - 1505070819

Last updated 5 years ago

Was this helpful?

视频发布时间

2014年6月25日

视频介绍

So you need to build a responsive site. We'll look at how you set up your dev environment to best test across multiple devices and screen sizes.

视频推介语

暂无，待补充。

译者信息

翻译

润稿

终审

原始链接

中文字幕

翻译流水号

加入字幕组

韩淼

段威

--

1505070817

解说词中文版：

相对于桌面Web的开发 测试移动端Web

需要另一套不同的工具

嗨

我是Pete 来自谷歌开发支持部门

我会讲讲我的工作流程

和你们怎么去用它

来让你的网页在任何设备上显示都不错

我一般会先将桌面浏览器缩小至400像素

来模拟手机屏幕大小

自然也可以去调整浏览器窗口的大小

来感受不同尺寸下网页的效果

当我做完一些基础的工作 包括我的布局

我常用的断点等等

再打开Chrome内置的仿真工具和iOS模拟器

仿真器和模拟器都是很棒的工具

虽然它们不总是百分百准确

但是也八九不离十

Chrome的仿真工具可以让你模拟很多东西

比如各种屏幕大小和分辨率

比如基本的点击事件

甚至是地理位置和加速传感器的信息输入

开启一个仿真器很简单

只要把开发工具调出来

然后点击Escape来显示控制台

之后选择仿真面板

在这里选择你想要仿真的设备

然后点击Emulate按钮

Chrome会自动重置浏览器页面

这里有一个小提示

因为移动设备通常是竖着的

我们把开发面板固定在右边而不是底下

可以更方便我们开发

至于iOS测试 我通常打开一个iOS模拟器

它可以从苹果的iOS开发者中心下载

通过它让我清楚页面效果和实际表现是什么样

只要用Chrome的仿真器和iOS模拟器

我通常能找到并修复

我碰到过的80%问题

至于剩下的20%问题 我就必须切换到真机

推荐使用远程调试模式

这样用手头电脑上的开发工具

就可以查看调试和分析真机上的表现

为了使用Safari中的远程调试 进入Safari的设置中

看下菜单栏中的Show Develop复选框

这名字真长

下一步 通过USB把你的iOS设备连接到Mac

之后在iOS设备上用Safari

打开你想调试的页面

现在从你的桌面Safari的开发者菜单中

找到设备并选择你想要去调试的

浏览器页面

这时候 Safari的Web Inspector已准备好运行了

很好

初始化Chrome的设置更为复杂一点

它需要你把开发者选项中的

USB调试模式打开

如果你找不到开发者选项面板

进入设置 然后在Biuld number上

点击七次

对 不开玩笑 七次

还好每台设备你只要做过一次就好

如果你正在运行的是Windows系统

你可能还需要安装设备驱动程序

一旦你完成以上的操作 剩下的就简单多了

通过USB把设备连上你的电脑

然后打开你想要调试的页面

之后在桌面打开chrome 地址栏填chrome://inspect

你现在应该能在桌面浏览器中看到

所有在设备上开启的标签了

如果你看不到 检查下Discover USB Devices是否打开

而且设备上也没有弹出过

任何请求权限的对话框

你甚至可以直接访问本地的文件

或者用一个私有网络的端口转发来翻墙

Chrome远程调试也支持实时转播设备的画面

点击右上角的按钮

之后Chrome在你的开发工具窗口里

实时显示设备上的页面

这样你可以专注于自己的电脑屏幕

而不用来来回回地在设备

和开发工具间切换

但是要注意 这项功能是通过一次次截屏

然后把他们连续地发到桌面上来

所以这里可能会有一些卡顿

如果你已经有了你需要的设备

远程调试用起来很爽 可如果你收到某个设备

的Bug报告 而你手头正好没有

短时间内也不会去买的测试机

或者更进一步 你希望自动运行一部分测试

对于这些问题 我会从类似BrowserStack Sauce Labs

或DeviceAnywhere这样的第三方服务中选一个

这些远程测试服务提供基于云的

仿真的浏览器和真机的测试

通过这些服务我可以与这些设备互动

就好像就在我手上操作一样

因为我的操作会直接传输给

远端的设备或者模拟器

其中一些服务甚至提供API

你可以利用它们来实现自动化测试

例如单元测试 前后端连调

或者截屏视觉回归测试

以上就是我的Web开发工作流程

我首先会用桌面浏览器来进行初代开发

之后转向仿真器和模拟器完成主要工作

接着上真机来改善所有的效果和实现

当我没有我想要的设备时

我就去第三方远程测试服务找

然后我就准备发布了

吼吼

如果你不确定你的页面是否在不同设备上工作正常

为什么不现在开始呢

我刚刚已经向你展示了三种简单的方法

你今天就可以着手开始

感谢观看

Youtube
Youtube
加入 GDG 字幕组
video_screenshot