Skip to content

Commit e3f45bf

Browse files
jblasjblas
committed
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.
1 parent dc90ef3 commit e3f45bf

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎tools/log-page-events.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Page Event Logger Bookmarklet</title>
7+
</head>
8+
9+
<body>
10+
<h1>Page Event Logger Bookmarklet</h1>
11+
<p>A simple bookmarklet for logging jQuery Mobile page events. To use, bookmark the following link:</p>
12+
<script>
13+
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>');
14+
</script>
15+
<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>
16+
<p>
17+
<textarea id="ta" rows="10" cols="50"></textarea>
18+
</p>
19+
<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>
20+
<script>
21+
document.getElementById("ta").value = document.getElementById("bookmarklet-link").href;
22+
</script>
23+
</body>
24+
</html>

‎tools/log-page-events.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*!
2+
* jQuery Mobile v@VERSION
3+
* http://jquerymobile.com/
4+
*
5+
* Copyright 2011, jQuery Project
6+
* Dual licensed under the MIT or GPL Version 2 licenses.
7+
* http://jquery.org/license
8+
*/
9+
10+
// This is code that can be used as a simple bookmarklet for debugging
11+
// page loading and navigation in pages that use the jQuery Mobile framework.
12+
// All messages are sent to the browser's console.log so to see the messages,
13+
// you need to make sure you enable the console/log in your browser.
14+
15+
(function($, window, document) {
16+
if ( typeof $ === "undefined" ) {
17+
alert( "log-page-events.js requires jQuery core!" );
18+
return;
19+
}
20+
21+
var pageEvents = "mobileinit pagebeforechange pagechange pagechangefailed pagebeforeload pageload pageloadfailed pagebeforecreate pagecreate pageinit pagebeforeshow pageshow pagebeforehide pagehide pageremove";
22+
23+
function getElementDesc( ele )
24+
{
25+
var result = [];
26+
if ( ele ) {
27+
result.push( ele.nodeName.toLowerCase() );
28+
var c = ele.className;
29+
if ( c ) {
30+
c = c.replace( /^\s+|\s+$/, "" ).replace( /\s+/, " " );
31+
if (c) {
32+
result.push( "." + c.split( " " ).join( "." ) );
33+
}
34+
}
35+
if ( ele.id ){
36+
result.push( "#" + ele.id )
37+
}
38+
}
39+
return result.join( "" );
40+
}
41+
42+
function debugLog( msg )
43+
{
44+
console.log( msg );
45+
}
46+
47+
function getNativeEvent( event ) {
48+
49+
while ( event && typeof event.originalEvent !== "undefined" ) {
50+
event = event.originalEvent;
51+
}
52+
return event;
53+
}
54+
55+
function logEvent( event, data )
56+
{
57+
var result = event.type + " (" + (new Date).getTime() + ")\n";
58+
59+
switch( event.type )
60+
{
61+
case "pagebeforechange":
62+
case "pagechange":
63+
case "pagechangefailed":
64+
result += "\tpage: ";
65+
if ( typeof data.toPage === "string" ) {
66+
result += data.toPage;
67+
} else {
68+
result += getElementDesc( data.toPage[ 0 ] ) + "\n\tdata-url: " + data.toPage.jqmData( "url" );
69+
}
70+
result += "\n\n"
71+
break;
72+
case "pagebeforeload":
73+
case "pageloadfailed":
74+
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\n";
75+
break;
76+
case "pageload":
77+
result += "\turl: " + data.url + "\n\tabsUrl: " + data.absUrl + "\n\tpage: " + getElementDesc( data.page[ 0 ] ) + "\n\n";
78+
break;
79+
case "pagebeforeshow":
80+
case "pageshow":
81+
case "pagebeforehide":
82+
case "pagehide":
83+
result += "\tpage: " + getElementDesc( event.target ) + "\n";
84+
result += "\tdata-url: " + $( event.target ).jqmData( "url" ) + "\n\n";
85+
break;
86+
case "pagebeforecreate":
87+
case "pagecreate":
88+
case "pageinit":
89+
result += "\telement: " + getElementDesc( event.target ) + "\n\n";
90+
break;
91+
case "hashchange":
92+
result += "\tlocation: " + location.href + "\n\n";
93+
break;
94+
case "popstate":
95+
var e = getNativeEvent( event );
96+
result += "\tlocation: " + location.href + "\n";
97+
result += "\tstate.hash: " + ( e.state && e.state.hash ? e.state.hash + "\n\n" : "" );
98+
break;
99+
}
100+
101+
debugLog( result );
102+
}
103+
104+
// Now add our logger.
105+
$( document ).bind( pageEvents, logEvent );
106+
$( window ).bind( "hashchange popstate", logEvent );
107+
108+
})( jQuery, window, document );

0 commit comments

Comments
 (0)