Debugging and Tuning Mobile Web Sites with Modern Web Browsers
-
Upload
troy-miles -
Category
Internet
-
view
1.049 -
download
1
description
Transcript of Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Installation Files! If you haven't already, be sure to download the installation
files for Troy Miles' tutorial from here: !
! http://10.35.0.2/velocity/
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 ! [email protected]
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 browser ! Lots of mobile web features
iPhone Mobile Web Features! Viewport meta tag ! Startup image ! Hide browser UI ! Home screen icons ! No debugging features
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 browser ! Designed to work remotely, good for mobile
What does it give you?! See HTML & CSS ! View the console ! View resources like local and session storage ! Network calls ! Performance measures
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 written in JavaScript
Installation & running! For Windows, Mac OS X, and Linux based machines ! Delivered as a npm module ! sudo npm -g install weinre ! from the terminal - weinre ! weinre --boundHost -all- ! Or use an online host
Why use an online host?! You aren't a node user ! You have firewall issues ! You, like me, are lazy ! http://debug.build.phonegap.com/
Multi-user Model! Add a hash tag + id to the end both the client and target URLs ! Minimalistic security measure ! Still transmitted in the clear ! Can also add the id to a bookmarklet
Using a bookmarklet! It is easy to forget to remove the weinre script from a page ! You may not have access to the source code for a page ! It is not easy to get a bookmark onto a mobile device ! Remember: if you reload the page the injected script is gone!
Adding a bookmarklet - Safari Edition! Open Safari ! Go to your debug Server web page ! Scroll down to the bookmarklet textarea ! Tap and release the textarea to zoom it ! Tap it again until the magnifying glass appears ! Release it and the edit options should appear ! Tap Select All ! Tap Copy
Adding a bookmarklet - Safari Edition! Tap Done ! Tap the Share icon ! Tap the Bookmark icon ! Give your bookmarklet a name ! Tap Save ! Tap the Bookmark icon ! Find your saved bookmark ! Tap Edit in the lower right hand corner
Adding a bookmarklet - Safari Edition! Tap your bookmark ! Tap the URL line ! Tap the "x" to erase the URL ! Tap and release the Address line to make the Paste option
appear ! Tap Paste ! Tap Done ! Tap Done again
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 press until the selectors appear ! Move the selectors to encompass the entire textarea ! Tap the copy icon ! Tap the favorite icon ! Erase the URL text ! Long press until PASTE appears
Adding a bookmarklet - Chrome Edition! Tap PASTE ! Rename bookmark if desired ! Tap Save ! Return to you debug page ! From the URL bar, begin typing the name of your bookmark ! When it appears in the list of suggestions, tap it
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 client and target can be sluggish ! Not perfect, but better than alerts
Opera Dragonfly! The first browser to support remote debugging ! Had to use its mobile & desktop browser ! Like weinre communication via HTTP - no need to connect ! This has relegated their Dragonfly remote debugging obsolete ! Opera’s new browser supports remote debugging via Chrome
Dev Tools
Safari! iOS gained remote debugging capabilities starting with iOS 6
and Safari 6 ! iOS 6 release September 2012 ! Only works with Apple devices iPhone, iPad, Mac OS X ! Devices must be connected via USB
Safari iPhone Debugging Demo! On iPhone, Settings -> Safari -> Advanced -> WebInspector,
turn on ! From Safari, Preferences -> Advanced ! Click Show Develop menu in menu bar ! Using Apple approved cable connect iPhone to Mac ! On iPhone, use Safari to open a web page ! On Mac, Develop -> <your device name> -> <web page>
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 devices on iOS 7 ! For the 2% on iOS 5 or below, use weinre
Chrome! Remote debugging introduced with Chrome for Android Beta ! Released in Early 2012 ! Initially required Android SDK and the Android Debug Bridge
(ADB) ! Now included in Chrome, no need for Android SDK
Chrome Nexus 4 Debugging Demo! Preparing Android phone ! Settings -> About phone -> Build number, tap until it says you
are a developer ! Settings -> Developer options -> USB debugging, select it ! In Chrome -> Hot dog icon -> Tools -> Inspect devices ! Check, Discover USB devices ! Connect Android device to computer via USB ! On Android phone, use Chrome to open a web page
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 the rest
Amazon Silk! Silk is the browser used on the Kindle Fire and the Fire Phone ! Silk is Webkit based ! Can use weinre on it ! Can also remote debug with Chrome dev tools and the ADB
How fast is 4G?! No actual 4G standard ! Name for the standard is International Mobile
Telecommunication Advanced ! The standard doesn't have minimum speeds ! Maxs moving speeds to 100 Mbps, and 1 Gbps for stationary ! Latency is high on both 3G and 4G networks averaging over
100ms across all carriers
Throttling your website! The basics of throttling
! Proxy phone through your development machine ! Throttle the speed of development machine
! For the Mac we use: ! an Xcode tool, Network Link Conditioner ! The free edition of Burp
! For the PC ! Fiddler ! A Fiddler extension, Connection Simulator
Throttling via a Mac! System Preferences -> Network Link Conditioner ! Select a Profile ! Turn on ! Launch Burp ! Proxy -> Options, Select the single proxy listener ! Click Edit, Click Binding tab, Click Specific address ! Choose your IP address ! Click OK
Throttling via a PC! In Fiddler, Go Tools -> Fiddler Options… ! Click the Connections tab ! Click Allow remote computers to connect ! In Fiddler, Click Bandwidth Simulation -> Configure… ! Select a Simulation Mode ! Select a Bandwidth Midpoint ! Click Apply
Proxying an Android device! Your device and dev box must be on the same network ! Settings -> Wi-Fi ! Long press Wi-Fi connection ! Tap Modify network ! Check Show advanced options ! Proxy, select Manual ! Enter IP address and Proxy port ! Tap Save
Proxying an iOS device! Settings -> Wi-Fi -> tap info icon ! Scroll to the bottom of the page ! Tap Manual ! Enter Server and Port ! Tap Wi-Fi
Turning off caching via Chrome! Caching is great ! It speeds up your site for return visitors ! But it covers up speed issue during development
Turning off caching via Safari! Developer -> Your iOS device -> Your web page ! Click Timelines ! Press command + shift + R to load with no cache ! Press command + R to load with caching
Performance Measuring! Timeline is the tab for performance measuring ! Can view the time three ways:
- Events - Frames - Memory
Intro to HTML Rendering! DOM creation - web page parsed into a tree of nodes called
the Document Object Model ! Render Tree creation - DOM is parsed into a tree of visible
objects called the Render Tree ! Rendering - The render tree is goes through “layout”, all of the
nodes defined in screen coordinates ! Painting - The render is traversed which each node sent to
the UI
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 ! This conversion is where the performance boost comes from ! Layers are not FREE
- They use system and GPU memory - There is CPU overhead
! Remember: Compositing is cheap, repainting is expensive
Performance Improving! There are no hard and fast algorithms ! The performance tools will help, but you have to do the hard
work ! My favorite is the continuous page repainting mode
Rules of Thumb! Prefer requestAnimFrame over setTimeout or setInterval ! Prefer CSS animation over JavaScript ! Be careful of mixing CSS reads and writes
CSS Performance Hit! Triggers Composite
- opacity - webkit-transform
! Triggers Paint and Composite - color, background color, box-shadow
! Triggers Layout, Paint, and Composite - left, top - width, height - visibility
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 referencing it, it can be collected ! If two objects point to each other, they will never be collected ! It is easy to create a leaky JavaScript apps ! Leaks have always existed in JavaScript apps ! The only difference is that now JavaScript apps are persistent
Why its your fault?! In JavaScript we don’t think about memory leaks ! Even when we think we may have one, too hard to find ! Leaks often involve some object creation code which should
have been checked better
Determining that a leak exists! Leaks take time to be apparent, sometimes a long time ! The main tools are the Timelines and Profiles tabs ! The timelines, memory display shows current memory usage ! The profiles heap snapshot and heap allocation can help you
finger the culprit ! Make use of the collect garbage button
Finding the cause of the leak! The Profiles tab’s record heap allocation is your best friend ! It can help you determine which object is holding memory ! Determining who is hold a reference to it is up to you ! Beware of closures
Summary! weinre ! Safari and Chrome remote debugging ! Performance measuring and improving ! Memory leaks ! https://bitly.com/bundles/rockncoder/4 ! [email protected]