Debugging and Tuning Mobile Web Sites with Modern Web Browsers

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Installation Files
! If you haven't already, be sure to download the installation
files for Troy Miles' tutorial from here...

Debugging and Tuning
Mobile Web Sites with
Modern Web Browsers
24 June 2014

Me
! Troy Miles - Senior Software Engineer
! Kelley Blue Book, Irvine, CA
! @therockncoder
! rockncoder@gmail.com

All of the materials
! Slides
! Links
! Notes
! https://bitly.com/bundles/rockncoder/4

The Agenda
! The Mobile Web
! Debugging
! Performance Measuring & Improving
! Memory Leaks

iPhone
! On-sale June 29, 2007
! Initially the only way to write iPhone "apps" was via the web
! Introduced Mobile Safari ...

iPhone Mobile Web Features
! Viewport meta tag
! Startup image
! Hide browser UI
! Home screen icons
! No debugging featur...

Android
! First phone HTC Dream aka G1
! Released October 22, 2008
! Like Safari it is Webkit based
! No debugging features

Analogs
! All of the major mobile browsers have desktop cousins
! Android - Chrome
! iOS - Safari
! Windows Phone - IE

Debugging
! Understanding the scope of the problem
! Debugging without a debugger
! What is weinre?

Understanding the problem
! You can do a lot with analogs but you can't…
! Touch
! Render correctly
! Measure performance

Debugging without a debugger
! alert()
! iPhone Developer Debug Console
! Proprietary solutions

What is weinre?
! Created by Patrick Mueller
! Stands for WEb INspector REmote
! Like Firebug but only for Webkit based br...

What does it give you?
! See HTML & CSS
! View the console
! View resources like local and session storage
! Network calls...

Three main parts of weinre
! Debug Server
! Debug Client
! Debug Target

How does it work?
! The debug client and target communicate via XHR with the
server
! Both the debug target and client are...

Installation & running
! For Windows, Mac OS X, and Linux based machines
! Delivered as a npm module
! sudo npm -g install...

Why use an online host?
! You aren't a node user
! You have firewall issues
! You, like me, are lazy
! http://debug.build....

Multi-user Model
! Add a hash tag + id to the end both the client and target URLs
! Minimalistic security measure
! Still ...

Using a bookmarklet
! It is easy to forget to remove the weinre script from a page
! You may not have access to the source...

Adding a bookmarklet - Safari Edition
! Open Safari
! Go to your debug Server web page
! Scroll down to the bookmarklet te...

Adding a bookmarklet - Safari Edition
! Tap Done
! Tap the Share icon
! Tap the Bookmark icon
! Give your bookmarklet a na...

Adding a bookmarklet - Safari Edition
! Tap your bookmark
! Tap the URL line
! Tap the "x" to erase the URL
! Tap and rele...

Adding a bookmarklet - Safari Edition
! Return to your debug page
! Find your bookmark and tap it

Adding a bookmarklet - Chrome Edition
! Go to your debug server page
! Scroll down to the bookmarklet textarea
! Long pres...

Adding a bookmarklet - Chrome Edition
! Tap PASTE
! Rename bookmark if desired
! Tap Save
! Return to you debug page
! Fro...

Using weinre
! Remote
! Elements
! Resources
! Network
! Timeline
! Console

Client/Target Colors
! blue - online but not active
! green - online and active
! red - disconnected about to disappear

weinre summary
! Only webkit browsers
! No JavaScript debugging
! The target script is 151 KB
! The communication between ...

Opera Dragonfly
! The first browser to support remote debugging
! Had to use its mobile & desktop browser
! Like weinre co...

Safari
! iOS gained remote debugging capabilities starting with iOS 6
and Safari 6
! iOS 6 release September 2012
! Only w...

Safari iPhone Debugging Demo
! On iPhone, Settings -> Safari -> Advanced -> WebInspector,
turn on
! From Safari, Preferenc...

Safari UI
! Resources
! Timeline
! Debugger
! Console / Inspect
! Styles
! Layers
! Node
! Resource

Safari Caveats
! Remote debugging only works for iOS 6 or greater devices
! 9% of iOS devices on iOS 6
! 89% of iOS device...

Chrome
! Remote debugging introduced with Chrome for Android Beta
! Released in Early 2012
! Initially required Android SD...

Chrome Nexus 4 Debugging Demo
! Preparing Android phone
! Settings -> About phone -> Build number, tap until it says you
a...

Chrome UI
! Inspect
! Elements
! Network
! Sources
! Timeline
! Profiles
! Resources
! Audits

Chrome UI
! Console
! Show Console
! Show Settings
! Show Screen Cast

Chrome Caveats
! Every Android device is different, your steps may vary
! Only for 4.0 and greater phones
! Use weinre for...

Amazon Silk
! Silk is the browser used on the Kindle Fire and the Fire Phone
! Silk is Webkit based
! Can use weinre on it...

How fast is 4G?
! No actual 4G standard
! Name for the standard is International Mobile
Telecommunication Advanced
! The s...

Throttling your website
! The basics of throttling
! Proxy phone through your development machine
! Throttle the speed of ...

Throttling via a PC
! In Fiddler, Go Tools -> Fiddler Options…
! Click the Connections tab
! Click Allow remote computers ...

Proxying an Android device
! Your device and dev box must be on the same network
! Settings -> Wi-Fi
! Long press Wi-Fi co...

Proxying an iOS device
! Settings -> Wi-Fi -> tap info icon
! Scroll to the bottom of the page
! Tap Manual
! Enter Server...

Turning off caching via Chrome
! Caching is great
! It speeds up your site for return visitors
! But it covers up speed is...

Turning off caching via Safari
! Developer -> Your iOS device -> Your web page
! Click Timelines
! Press command + shift +...

Performance Measuring
! Timeline is the tab for performance measuring
! Can view the time three ways:
- Events
- Frames
- ...

Intro to HTML Rendering
! DOM creation - web page parsed into a tree of nodes called
the Document Object Model
! Render Tr...

What is a layer?
! A layer is a portion of the web page which has been converted
into a texture and moved to the GPU
! Thi...

Performance Improving
! There are no hard and fast algorithms
! The performance tools will help, but you have to do the ha...

Rules of Thumb
! Prefer requestAnimFrame over setTimeout or setInterval
! Prefer CSS animation over JavaScript
! Be carefu...

CSS Performance Hit
! Triggers Composite
- opacity
- webkit-transform
! Triggers Paint and Composite
- color, background c...

Memory Leaks
! Intro to memory leaks
! Why its your fault?
! Determining that a leak exists
! Finding the cause of the leak

Intro to memory leaks
! JavaScript uses reference counting to do garbage collection
! When an object has no one referencin...

Why its your fault?
! In JavaScript we don’t think about memory leaks
! Even when we think we may have one, too hard to fi...

Determining that a leak exists
! Leaks take time to be apparent, sometimes a long time
! The main tools are the Timelines ...

Finding the cause of the leak
! The Profiles tab’s record heap allocation is your best friend
! It can help you determine ...

Summary
! weinre
! Safari and Chrome remote debugging
! Performance measuring and improving
! Memory leaks
! https://bitly...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

The Modern Web Part 3: Social Netwo... by David Pallmann 1055 views
When worlds Collide: HTML5 Meets th... by David Pallmann 941 views
The Modern Web, Part 2: HTML5 by David Pallmann 1847 views
Calculate your Water Footprint at H... by guest5961519 1148 views
Using the internet for search by Dr-Heba Mustafa 353 views
Web of knowledge advanced features by Lisa Hartman 1427 views

View on Slideshare

1 of 60 Ad

View on Slideshare

1 of 60 Ad