• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Debugging and Tuning Mobile Web Sites with Modern Web Browsers

Debugging and Tuning Mobile Web Sites with Modern Web Browsers



Until recently, debugging a mobile web site was incredibly difficult. Luckily things things have changed. Now some desktop browsers not only contain remote debuggers, but have other features to ...

Until recently, debugging a mobile web site was incredibly difficult. Luckily things things have changed. Now some desktop browsers not only contain remote debuggers, but have other features to monitor and improve performance and detect memory leaks.



Total Views
Views on SlideShare
Embed Views



4 Embeds 154

https://twitter.com 114
https://t.co 29
https://controller.mobile.lan 10
https://www.linkedin.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Debugging and Tuning Mobile Web Sites with Modern Web Browsers Debugging and Tuning Mobile Web Sites with Modern Web Browsers Presentation Transcript

    • 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 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 ! rockncoder@gmail.com