Debugging and Tuning Mobile Web Sites with Modern Web Browsers

2,521 views

Published on

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.

Published in: Internet, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,521
On SlideShare
0
From Embeds
0
Number of Embeds
740
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Debugging and Tuning Mobile Web Sites with Modern Web Browsers

  1. 1. 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/
  2. 2. Debugging and Tuning Mobile Web Sites with Modern Web Browsers 24 June 2014
  3. 3. Me ! Troy Miles - Senior Software Engineer ! Kelley Blue Book, Irvine, CA ! @therockncoder ! rockncoder@gmail.com
  4. 4. All of the materials ! Slides ! Links ! Notes ! https://bitly.com/bundles/rockncoder/4
  5. 5. The Agenda ! The Mobile Web ! Debugging ! Performance Measuring & Improving ! Memory Leaks
  6. 6. 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
  7. 7. iPhone Mobile Web Features ! Viewport meta tag ! Startup image ! Hide browser UI ! Home screen icons ! No debugging features
  8. 8. Android ! First phone HTC Dream aka G1 ! Released October 22, 2008 ! Like Safari it is Webkit based ! No debugging features
  9. 9. Analogs ! All of the major mobile browsers have desktop cousins ! Android - Chrome ! iOS - Safari ! Windows Phone - IE
  10. 10. Debugging ! Understanding the scope of the problem ! Debugging without a debugger ! What is weinre?
  11. 11. Understanding the problem ! You can do a lot with analogs but you can't… ! Touch ! Render correctly ! Measure performance
  12. 12. Debugging without a debugger ! alert() ! iPhone Developer Debug Console ! Proprietary solutions
  13. 13. 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
  14. 14. What does it give you? ! See HTML & CSS ! View the console ! View resources like local and session storage ! Network calls ! Performance measures
  15. 15. Three main parts of weinre ! Debug Server ! Debug Client ! Debug Target
  16. 16. 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
  17. 17. 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
  18. 18. 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/
  19. 19. 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
  20. 20. 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!
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Adding a bookmarklet - Safari Edition ! Return to your debug page ! Find your bookmark and tap it
  25. 25. 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
  26. 26. 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
  27. 27. Using weinre ! Remote ! Elements ! Resources ! Network ! Timeline ! Console
  28. 28. Client/Target Colors ! blue - online but not active ! green - online and active ! red - disconnected about to disappear
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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>
  33. 33. Safari UI ! Resources ! Timeline ! Debugger ! Console / Inspect ! Styles ! Layers ! Node ! Resource
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Chrome UI ! Inspect ! Elements ! Network ! Sources ! Timeline ! Profiles ! Resources ! Audits
  38. 38. Chrome UI ! Console ! Show Console ! Show Settings ! Show Screen Cast
  39. 39. Chrome Caveats ! Every Android device is different, your steps may vary ! Only for 4.0 and greater phones ! Use weinre for the rest
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Turning off caching via Chrome ! Caching is great ! It speeds up your site for return visitors ! But it covers up speed issue during development
  48. 48. 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
  49. 49. Performance Measuring ! Timeline is the tab for performance measuring ! Can view the time three ways: - Events - Frames - Memory
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Rules of Thumb ! Prefer requestAnimFrame over setTimeout or setInterval ! Prefer CSS animation over JavaScript ! Be careful of mixing CSS reads and writes
  54. 54. 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
  55. 55. Memory Leaks ! Intro to memory leaks ! Why its your fault? ! Determining that a leak exists ! Finding the cause of the leak
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. Summary ! weinre ! Safari and Chrome remote debugging ! Performance measuring and improving ! Memory leaks ! https://bitly.com/bundles/rockncoder/4 ! rockncoder@gmail.com

×