Standards Based Development

Mobile Safari's Web Inspector

Accessing Web Inspector in iPhone iOS Screenshot

Mobile Chrome offers usb Remote Debugging, enabling WebKit DevTools accessible on the desktop. Android 4.0 and greater offers usb Remote Debugging as well. iOS also has similar usb remote debugging tools, but again they're only for the latest versions of iOS. Mobile Safari Web Inspector is the iOS version of Chrome's remote debugger; works with PhoneGap.

WebKit uses wip while Mozilla uses remote debugging protocol.

iWebInspector cannot run on an actual iOS device, so it doesn't work for every case.

ADB Logcast / Console.app

Console.log output will generally be visible in heinre/Chrome/iWebInspector. Some messages may go straight into system logs, which is accessible on Android via adb logcat command. First connect the Android device via usb, then on desktop run adb logcat browser:V*:S, which will pipe the logs from the mobile browser to desktop, while supressing all non browser log entries. The best way to access system logs in iOS is to launch your PhoneGap application from within XCode.

Bookmarklets

iPad View Source Bookmarklet

');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();" title="Drag Me To Your Browser's Toolbar!">ipad.view.source


javascript:
(function(){
var a=window.open('about:blank').document;a.write('
<!DOCTYPE html>
<html>
<head>
<title>Source of '+location.href+'</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>');
a.close();
var b=a.body.appendChild(a.createElement('pre'));
b.style.overflow='auto';b.style.whiteSpace='pre-wrap';
b.appendChild(a.createTextNode(document.documentElement.innerHTML))
})();

Snoopy | View-source Bookmarklet for iPad, iPhone and other Mobile Devices

snoopy


javascript:(
function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B

Note: when scrolling in the view-source view in Mobile Safari with Snoopy, Mobile Safari hides all internal scrollbars in documents, so in order to scroll within the code display window, two fingered drags have to be used within the source code area to navigate about.

Mobile Safari bookmarklet to open a page in Chrome for iOS

chrome.open.ios


javascript:location.protocol='googlechrome'

Tweet from @sindresorhus to Open a Page in Chrome for iOS

Android View Source

Add "view source" to your Chrome for Android by adding this bookmarklet: javascript:window.open('view-source:' + location.href).

android.chrome.view.source


javascript:
window.open('view-source:' + location.href)

tweet by @cramforce

Mobile WebMobile WebPhonegapPhonegap

html5 Mobile Debuggin Options
Application	Platform	Version	Device	Tool	Logs
Mobile Web	Android	4.0+	Physical	Chrome Remote Debug	ADB Logcat
Mobile Web	Android	< 4	Physical	Weinre	ADB Logcat
Mobile Web	Android	Any	Emulator	Do not use	Do not use
Mobile Web	iOS	<= 5	Simulator	iWebInspector	Console.app
Mobile Web	iOS	<= 5	Physical	Weinre	Console.app
iOS	>= 6	Physical	Remote Web Inspector	Console.app
iOS	>= 6	Simulator	Remote Web Inspector	Console.app
Phonegap	Android	Any	Emulator	Do not use	Do not use
Phonegap	Android	Any	Physical	Weinre	ADB Logcat
Phonegap	iOS	<= 5	Simulator	iWebInspector	Launch within XCode
Phonegap	iOS	<= 5	Device	Weinre	Launch within XCode
iOS	>= 6	Simulator	Remote Web Inspector	Launch within XCode
iOS	>= 6	Device	Remote Web Inspector	Launch within XCode

Tools

Framote

Framote is a tool that helps you share “live” URLs that can be controlled remotely. To get started, you can specify any website – say cnn.com – and Framote will create a unique URL for that site. You can share that URL with a group of people and everyone will see the same website on their screens. If you update the underlying website at your end, all the other screens are refreshed automatically.

The service is especially useful for testing responsive designs. You can have the main website on your desktop computer and load the corresponding Framote URLs on your tablets and mobile phones. If you open a different page on your desktop, the mobile screens are updated automatically.

Internally, Framote embeds the source website into an IFRAME and makes an AJAX request to check the actual URL every few seconds. If the source URL has been modified, the IFRAME’s source attribute on the client’s screen is updated almost instantly. The Framote dashboard will also show list of IP address and devices that are accessing your unique URL.

Standards Based Development