Webpage Event Timing

Wait for it! Waaaait for it! … BOOM! There’s a list that just displayed below this paragraph. Ever wanted to know what named events happen and in what order during the loading of a page (like this one… perhaps?).
The window.performance.timing object was used along with some code listening to readyState changes to see when things happened.
Notice that “doc complete” or “document complete” does not show up in the list; That’s because webpagetest.org just defines it here. It isn’t otherwise a real thing.

Posted in JavaScript, Web Development | Leave a comment

Mobile Browser Orientation Detection

This is a test of window.orientation – displaying current result of this value here:

The orientation value of window, if defined, will be visible above. If it is not available then “undefined” will display.

Code is simple, it looks like this:

var orient = document.getElementById('insertOrient');
orient.innerHTML = window.orientation?window.orientation:'undefined';

At its core, probably the image below has a lot to do with what is going on but I added it here only because it seemed like a cool way to end this post. 🙂

Posted in JavaScript, Mobile, Web Development | Tagged | Leave a comment

Buttons: onClick vs click Event Listener Playground with Bonus DOM swapped click element!

Here’s a button with some classic click handling with good ol’ alert and console debugging to attach via links below:

Click Dummy now clickable

Experiment #1: Go through links above in order. Click button after each step to see what it did.

Experiment #2: Try reloading this page and add 1. and 2. in reverse order – see if it changes the order of when they fire.

Experiment #3: Reload and then select 4. and then try adding 1. and/or 2., original and replacement buttons have the same ID used to attach click handling, see which button gets the click handling.

Posted in Uncategorized | Leave a comment

Add Breakpoints to JavaScript Code in Browser Console

Okay, so you don’t add breakpoints in the console, but you can add breakpoints to functions you’ve pasted in the console and then call the functions from the console and step through it. Sound complicated? If you are familiar with JavaScript breakpoints then this is super easy, VERY cool and can save you a ton of time bug hunting. Here are the quick steps to make it happen along with a little tool I use… this one right here:

(1) Paste Code Here:
(Standalone functions or snippets modified into functions that can be called)

(2) Change filename if you’d like:
Transformed JavaScript code magically appears here:

(4) Copy/paste the code into your browser debugger console and run it.
(5) Go to Sources tab (in Chrome)
(6) Show navigator (tiny button above line numbers)
(7) Select Sources Tab, scroll down and select the filename
(8) Press Pretty Print button on bottom (open/close brackets {})
(9) Add breakpoints, call functions in console
(10) Have a blast debugging console code with breakpoints!

Why and How, if you must know

Deep dive debugging often involves some isolation and inspection of blocks of code. Layers of try-catches, closures and object literals mixed in with AJAX calls and cookies or session data can make isolated testing of code an ultramega-challenge or much worse! So I want to cut and paste a couple functions into the browser console to get it in the global scope and do some very visible testing. I may want to alter a bit to hard-code some normally dynamic values so I can test for expected results. Sure, good unit testing up front may prevent the need to do this but not necessarily.
So if you want to step through and inspect values one line at a time I used to think the only option was to use my console.log machine gun and just riddle the code with console.logs. Here’s a much much much better way:

Just modify code to a safe string value
(remove inline comments and line-breaks and escape doublequotes):

var parseJSON = function(JSNstr) {


"var parseJSON = function(JSNstr) {[code in JavaScript-friendly string]};"

Add //@ sourceURL=[resource name].js to end of string:

"var parseJSON = function(JSNstr) { ... [escape double quotes]...}; //@ sourceURL=parseTest.js"

Throw the whole string in a call to eval() within the console:

eval("var parseJSON = function(JSNstr) { ... [escape double quotes]...}; //@ sourceURL=parseTest.js")

Now go check it out! Go to Chrome Debugger Sources tab, select the show navigator slide out button on the far left (above the line numbers). Select Sources tab and scroll down if you need to, there’s your [resource name].js!
Select it, add break points then go back to console and call it.
The eval’d code can be updated and re-eval’d to update the resource, each version is preserved in the Sources tab with the most recent on top. //@ sourceURL is valid in any webkit browser.

Posted in Uncategorized | Leave a comment

IE 8 Render Mode Bookmarklet

Here’s the link:

IE 8 Render Mode
(updated Feb 28,2011 with Quirks/Standards test)

IE 8 render mode result on google (IE8, html5 doctype, no X-UA meta tag found)

IE 8 Render Mode Test in action

(right-click in IE and Add to Favorites > Put in Links or FavoritesBar folder for easiest access!)

Here’s the story:

You might have heard that Internet Explorer 8 has multiple sets of rules for rendering HTML markup, so if you’ve got good clean efficient standards based content then IE 8 should cruise through in high gear (IE 8 Mode) and display approximately the same thing the other browsers show (I said approximately!).

I was naively assuming the improper render mode issues wouldn’t be anything I’d have to deal with because, after all, I do things RIGHT! Right? I’m all about W3C Standards… avoid deprecated HTML and browser hacks, close all empty elements, try to keep markup semantic, etc etc. I’m working on this latest masterpiece, a hefty municipal website built in the DotNetNuke Framework, sporting some slick 3rd party modules and lots of customised CSS. My inbox alert lights up from time to time with a complaint from a poor city employee who is still forced to browse from Internet Explorer 6. No, the site doesn’t look right in IE6 but it functions and we either move forward to embrace the future or we linger behind to rescue the past, amiright? From Firefox or Chrome the site looks pretty good.

But then someone points out content is mysteriously missing even in IE 8!? I come to find out that IE 8 as great as it is, will shift down (to IE 7 or 6 or 5 mode) to handle rougher stuff if it thinks that’s necessary. In other words, if it thinks your site isn’t up to par with latest standards then it decides that it’s probably hacked together with older browsers in mind and so will probably break with the new IE 8. For me however, I discovered I need the IE 8 mode to get this content to show up properly. Why? I don’t know yet! This will require some more sluething but I wasn’t even sure how to tell exactly what mode Internet Explorer had selected. The IE Developer Tools let’s you pick from 3 modes but what is it by default? Then I read about some javascript to get this “document mode.” I just need to paste this in the URL and IE will pop up an alert box with the info. I looked for this in a nicer bookmarklet package (javascript you can add to your favorites/bookmarks). I couldn’t find it so, side project!

Here’s the script:

(except I use if-then conditionals here for readability and ternary conditionals in actual link)

var cr='\r\n';//return-newline chars
var cm=document.compatMode;//test for quirks-standards mode
var ezmode;//readable set as 'quirks' or 'standards' based on cm
var dt='DOCTYPE: '+document.all[0].text;//first line in document(doctype?)
var cmode='';//for content mode meta tag
if (cm) //document.compatMode value is found
if (cm=='BackCompat')//aka quirks
{ezmode = 'Quirks';} 
else if (cm=='CSS1Compat')//aka standards 
{ezmode = 'Standards';} 
else {ezmode = 'Almost Standards';}
} else //document.compatMode value not found
{ezmode = 'document.compatMode not detected'}
metas=document.getElementsByTagName('meta');//gather meta tags
for(var i in metas){
if (metas[i].httpEquiv=='X-UA-Compatible')  //if key meta tag is found
{cmode='X-UA-Compatible value found set to: '+metas[i].content} //add
{cmode='X-UA-Compatible NOT FOUND'} //add 'not found' announcement
}//close for loop
alert(  //building alert content
if (document.documentMode) //documentMode exists in IE
{'Internet Explorer Mode: '+ document.documentMode + cr+dt+cr+cmode+
cr+cr+ezmode+' (Standards/Quirks-based on compatMode: '+cm+')'}
{'Internet Explorer Mode: This only works in Internet Explorer.'+cr+dt+
cr+cmode+cr+ezmode+' based on compatMode: '+cm}
); //close alert
}//close function
)//close this javascript statement

It shows the Internet Explorer Compatibility Mode (render mode) along with the DOCTYPE and  the X-UA-Compatible meta content value which if found should match the render mode since the meta value is supposed to force the render mode.

This is for Internet Explorer but it should show the DOCTYPE and any X-UA-Compatibile meta values on the page in other browsers (still having some issues with other browsers). And I’d love to add a keyboard short-cut to this but there’s an issue assigning keyboard shortcuts to invalid files apparently, bummer!  Anyone know how to do this?

An awesome collection of other helpful bookmarklets and…
the mother of all bookmarklets (DOM Monster-wasn’t working in IE 8 though when I tried it)

Thanks to someone at J&C Group for digging the key reference to the DOCTYPE in Internet Explorer (document.all[0].text) out of another older thread.

Posted in JavaScript, Web Development | Tagged , , , , , , , | Leave a comment