Firebug is great even if I only feel like I’m using a fraction of it’s capabilities most of the time.
Recently I have found myself using the built in JavaScript console more and more for debugging so if you have forgotten how useful this is – here is a quick reminder.
- Quickly see what version of Jquery your page/web app is using.
// print out to console
jQuery.fn.jquery
// or if you want to view it ‘old school’ in a popup
alert (‘I can confirm that this page is using ….\n\n version ‘ + jQuery.fn.jquery + ‘ of Jquery’);
Ok you could have easily checked your calls to external resources for “jquery –some-number.min.js” but not everyone keeps to standard naming conventions and there is something infinitely more reassuring about using Jquery itself to echo the version even if we are already 99% sure.
Recently whilst looking at a rendering bug in Primo sorry NuSearch I encountered a CSS issue which turned out to have been caused by an applied service pack changing the order that CSS resources were called within the source and hence the effective order of precedence of some selectors. In the process this had partially broken correct search box rendering on the page(s) in question.
The console can be your friend again. For a quick test we can use Jquery in the console to move the call to the CSS file to ‘max’ it’s precedence by using a Jquery ‘append’ within <head> as follows:
- Append a resource within <head>
//need standard Document Ready check
$(function() {
$("head").append('<link rel="stylesheet" type="text/css" href="../css/my_shelf.css" />');
});
Effectively in this case we’re just calling the same file again within the source but moving it to become the last line within <head> and promoting the CSS in question to take greatest precedence assuming we have no inline style of course. We wouldn’t do this in practice but this works to apply the necessary style instantly on the page. We have confirmed what we suspected without ever needing access to the box in question.
Here I have applied the above on a totally random page from StackOverflow. Of course the resource can’t be found so we get a 404 warning in the console but you can see the line appended as last line in source below.
A couple of very simple examples which we can use in our browser console of choice 
