Successfully reported this slideshow.
Your SlideShare is downloading. ×

Tweak, Test and Debug your mobile apps from Web directions code 13

Ad

Test, tweak and debug your
mobile web apps
Web Directions Code 2013
Chris Ward
@chrischinch

Ad

“I was going through corrections with a
designer.
CLIENT: Can you add more internet stuff to
this box?
ME: What is ’intern...

Ad

Let’s fix it…

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Responsive Design
Responsive Design
Loading in …3
×

Check these out next

1 of 15 Ad
1 of 15 Ad

More Related Content

Tweak, Test and Debug your mobile apps from Web directions code 13

  1. 1. Test, tweak and debug your mobile web apps Web Directions Code 2013 Chris Ward @chrischinch
  2. 2. “I was going through corrections with a designer. CLIENT: Can you add more internet stuff to this box? ME: What is ’internet stuff’? CLIENT: You know, like shadows and stuff.”
  3. 3. Let’s fix it…
  4. 4. “Avoid using white, it’s going to go out of style any day now.”
  5. 5. Let’s fix it…
  6. 6. Chrome: developers.google.com/chrome- developer-tools/docs/remote-debugging iOS: moduscreate.com/enable-remote-web- inspector-in-ios-6 Firefox: hacks.mozilla.org/2012/08/remote- debugging-on-firefox-for-android
  7. 7. Ripple DeviceAnywhere JSBin
  8. 8. Thanks! Chris Ward @chrischinch chriswhward@gmail.com au.linkedin.com/in/chrischinchilla Meetup.com/melbournemobile
  9. 9. "The mobile site looks great! How do I view it on my phone?"

Editor's Notes

  • Demo link - http://localhost/WDC/Demos/demos/index.htmlRight hand list add - box-shadow: 20px 20px 10px #111;
  • If we were to do this normally, we have to set up proxies, or upload and reload or…Demo link - http://portablechinch.local/WDC/Demos/demos/index.htmlChange page colourWalk through other tabs
  • Remote debuggingDemo link - http://portablechinch.local/WDC/Demos/demos/index.htmlChange page colourWalk through other tabsYou can use consoleYou still have to find some sort of way of accessing the project
  • Remote Debugging
  • Adobe Edge InspectShow, then negativesNot sure how long it will remain free, a bit slow and jumpyYou can use consoleNot sure of browser used
  • WeinreWe’ve seen this alreadyYou can use console.logWill work in PhoneGap, you can even use a hosted service with a JS script or Moderately complex installation – node.jsSluggish at times

×