Date post: | 23-Aug-2014 |
Category: |
Internet |
Upload: | troy-miles |
View: | 1,048 times |
Download: | 1 times |
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]