First pass implementation of a page event logger bookmarklet to help us quickly diagnose navigation problems for external jQuery Mobile sites. Users can either follow the instructions for using/setting up the bookmarklet in log-page-events.html, or simply include the log-page-events.js directly in their source.

2026-03-16 22:10:25 +00:00 · 2011-10-07 09:31:28 -07:00 · 2011-10-07 09:31:28 -07:00 · e3f45bf0f3
commit e3f45bf0f3
parent dc90ef39f6
2 changed files with 132 additions and 0 deletions
--- a/tools/log-page-events.html
+++ b/tools/log-page-events.html
@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Page Event Logger Bookmarklet</title>
+</head>
+
+<body>
+<h1>Page Event Logger Bookmarklet</h1>
+<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p>
+<script>
+document.write('<p><a id="bookmarklet-link" href="javascript:function loadScript(u){var s=document.createElement(\'script\');s.setAttribute(\'language\',\'javascript\');s.setAttribute(\'src\',u);document.body.appendChild(s);} loadScript(\'' + ( location.href.replace( /\.html/, ".js" ) ) + '\');">Page EventLogger Bookmark</a></p>');
+</script>
+<p>For platforms that don't allow bookmarking of <code>javascript:</code> urls, you can copy/paste the following source for the bookmarklet directly into the browser's location bar then hit enter or hit the &quot;go&quot; button on your keypad:</p>
+<p>
+  <textarea id="ta" rows="10" cols="50"></textarea>
+</p>
+<p>NOTE: Some browsers like Chrome will strip off the javascript: prefix from the string above when you paste it into the location bar. Make sure what you pasted is prefixed by javascript: before attempting to load the bookmarklet.</p>
+<script>
+document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
+  </script>
+</body>
+</html>
--- a/tools/log-page-events.js
+++ b/tools/log-page-events.js
@ -0,0 +1,108 @@
+/*!
+ * jQuery Mobile v@VERSION
+ * http://jquerymobile.com/
+ *
+ * Copyright 2011, jQuery Project
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+// This is code that can be used as a simple bookmarklet for debugging
+// page loading and navigation in pages that use the jQuery Mobile framework.
+// All messages are sent to the browser's console.log so to see the messages,
+// you need to make sure you enable the console/log in your browser.
+
+(function($, window, document) {
+	if ( typeof $ === "undefined" ) {
+		alert( "log-page-events.js requires jQuery core!" );
+		return;
+	}
+
+	var pageEvents = "mobileinit pagebeforechange pagechange pagechangefailed pagebeforeload pageload pageloadfailed pagebeforecreate pagecreate pageinit pagebeforeshow pageshow pagebeforehide pagehide pageremove";
+
+	function getElementDesc( ele )
+	{
+		var result = [];
+		if ( ele ) {
+			result.push( ele.nodeName.toLowerCase() );
+			var c = ele.className;
+			if ( c ) {
+				c = c.replace( /^\s+|\s+$/, "" ).replace( /\s+/, " " );
+				if (c) {
+					result.push( "." + c.split( " " ).join( "." ) );
+				}
+			}
+			if ( ele.id ){
+				result.push( "#" + ele.id )
+			}
+		}
+		return result.join( "" );
+	}
+
+	function debugLog( msg )
+	{
+		console.log( msg );
+	}
+
+	function getNativeEvent( event ) {
+	
+		while ( event && typeof event.originalEvent !== "undefined" ) {
+			event = event.originalEvent;
+		}
+		return event;
+	}
+
+	function logEvent( event, data )
+	{
+		var result = event.type + " (" + (new Date).getTime() + ")\n";
+
+		switch( event.type )
+		{
+			case "pagebeforechange":
+			case "pagechange":
+			case "pagechangefailed":
+				result += "\tpage: ";
+				if ( typeof data.toPage === "string" ) {
+					result += data.toPage;
+				} else {
+					result += getElementDesc( data.toPage[ 0 ] ) + "\n\tdata-url: " + data.toPage.jqmData( "url" );
+				}
+				result += "\n\n"
+				break;
+			case "pagebeforeload":
+			case "pageloadfailed":
+				result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\n";
+				break;
+			case "pageload":
+				result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\tpage: " + getElementDesc( data.page[ 0 ] ) + "\n\n";
+				break;
+			case "pagebeforeshow":
+			case "pageshow":
+			case "pagebeforehide":
+			case "pagehide":
+				result += "\tpage: " + getElementDesc( event.target ) + "\n";
+				result += "\tdata-url: " + $( event.target ).jqmData( "url" ) + "\n\n";
+				break;
+			case "pagebeforecreate":
+			case "pagecreate":
+			case "pageinit":
+				result += "\telement: " + getElementDesc( event.target ) + "\n\n";
+				break;
+			case "hashchange":
+				result += "\tlocation: " + location.href + "\n\n";
+				break;
+			case "popstate":
+				var e = getNativeEvent( event );
+				result += "\tlocation: " + location.href + "\n";
+				result += "\tstate.hash: " + ( e.state && e.state.hash ? e.state.hash + "\n\n" : "" );
+				break;
+		}
+
+		debugLog( result );
+	}
+
+	// Now add our logger.
+	$( document ).bind( pageEvents, logEvent );
+	$( window ).bind( "hashchange popstate", logEvent );
+
+})( jQuery, window, document );