mobile browser debug skill

1. REMOTE DEBUG INREMOTE DEBUG IN
MOBILE BROWSERMOBILE BROWSER

2. WORKING ENVIRONMENTWORKING ENVIRONMENT
1. responsive site/page
2. webview in app/hybrid app

3. DEBUGING METHODSDEBUGING METHODS
1. chrome device mode method
2. USB method(real device)
3. remote method(virtual/real device)

4. WHY METHOD 3?WHY METHOD 3?
1. Chrome device mode is a simulation context
2. USB connection problem
3. no devices

5. IOS:IOS: IOS SIMULATORIOS SIMULATOR
SAFARI WEB INSPECTORSAFARI WEB INSPECTOR
1. iOS Simulator -> settings -> Safari -> Advanced ->
Web Inspector
2. Safari -> Preferences -> Advanced -> Show Develop
menu in menu bar -> Develop -> iOS Simulator

6. ANDROID:ANDROID: GENYMOTIONGENYMOTION
CHROME INSPECTORCHROME INSPECTOR
1. Genymotion -> Add(Start) virtual device -> Install*
(Start) Chrome
2. PC chrome -> open url "about:inspect" -> hit
"inspect" button
Q: HOW TO DEBUG IN THE DEFAULT BROWSER?Q: HOW TO DEBUG IN THE DEFAULT BROWSER?

7. JSCONSOLEJSCONSOLE
jsconsole.com is a simple JavaScript command line tool.
However, it also provides the ability to bridge across to
other browser windows to remotely control and debug
that window - be it in another browser or another
device altogether.

8. DEBUG IN JSCONSOLE.COMDEBUG IN JSCONSOLE.COM
1. open jsconsole.com
2. create a session(listen: anything)
3. copy the script to the page(js inject)
4. visit the page
5. debug in jsconsole.com

9. DEBUG IN YOUR OWN JSCONSOLEDEBUG IN YOUR OWN JSCONSOLE
1. clone https://github.com/remy/jsconsole.git
2. npm install
3. node server.js [port]
4. same as above

10. ISSUESISSUES
1. secret issue(open source)
2. https not working

11. Q&AQ&A

12. THANKSTHANKS