Remote web debugging at mobile devices in Safari and Firefox
-
Upload
dark-space-lab -
Category
Devices & Hardware
-
view
45 -
download
2
Transcript of Remote web debugging at mobile devices in Safari and Firefox
![Page 2: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/2.jpg)
Agenda
Safari debugging in iOS
Firefox debugging in Android
References
![Page 3: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/3.jpg)
Safari: major steps
Prepare desktop browser
Prepare mobile browser
Connect to device
Debug
![Page 4: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/4.jpg)
Safari: desktop preparation
Safari contains all modules necessary for development without any downloads.
You should enable “Show Develop menu in menu bar” in your Safari preferences.
![Page 5: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/5.jpg)
Safari: enable debugging in device
iOS’s Safari includes all modules necessary for remote web debugging
Web debugging can be enabled in Settings/Safari/Advanced/Inspect
![Page 6: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/6.jpg)
Safari: connect from desktop to device
Connect iOS device to your desktop computer using USB cable.
Select menu Develop/Your device/Your Page
Selected page should be highlighted in your device
![Page 7: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/7.jpg)
Safari: inspect DOM objects
Browse over DOM structure in your document and inspect objects in device with live highlight
![Page 8: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/8.jpg)
![Page 9: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/9.jpg)
Safari: inspect network queries
Use Safari network monitor to observe communication with HTTP server, JavaScript execution, rendering routines
![Page 10: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/10.jpg)
Safari: execute JavaScript
Execute JavaScript statements with console at target device
![Page 11: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/11.jpg)
![Page 12: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/12.jpg)
Firefox: major steps
Prepare mobile browser
Configure debugging bridge
Connect
Debug
![Page 13: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/13.jpg)
Firefox: prepare mobile browser
Input about:config into address bar in mobile Firefox at Android
Search for: devotees.debugger.remote-enabled
Set configuration value to true
![Page 14: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/14.jpg)
![Page 15: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/15.jpg)
Firefox: configure debugging bridge
ADB should be configured to forward ports from device to desktop.
List devices: adb devices
Port forwarding
adb -s device forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
![Page 16: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/16.jpg)
Firefox: connect desktop
Enable Remote debugging in Firefox.
Select Connect in Tools menu
Accept connection at device
![Page 17: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/17.jpg)
![Page 18: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/18.jpg)
Firefox: debug remote device
Inspect remote DOM document.
Analyse network communication.
Execute JavaScript statements in device.
![Page 19: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/19.jpg)
![Page 20: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/20.jpg)
![Page 21: Remote web debugging at mobile devices in Safari and Firefox](https://reader034.fdocuments.in/reader034/viewer/2022042608/55c52691bb61eb157d8b45a1/html5/thumbnails/21.jpg)
References
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android
https://developer.android.com/tools/help/adb.html
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
https://developer.mozilla.org/en-US/docs/Tools/Debugger