Setting a Conditional Breakpoint in Firefox with Firebug

Every once in a while I click randomly on something and realize that I’ve been an idiot. OK, sometimes it doesn’t require clicking on anything.

First off, if you’re working on client side code and you aren’t using Firefox with the Firebug add on, you should be. It gives you all the debugging capability that you need to win. (Some others swear by Chrome, but I’ve been developing with Firefox for a long time.)

Firebug

Everyone else has probably known this for millennia, but I just figured out today that I can set a conditional breakpoint in Firebug. If you right click on a line where you’ve set a breakpoint (this was my random click), you get a syntax menu that looks something like this:

Firebug Breakpoint Context Menu

By selecting Edit Breakpoint Condition… you can add any valid JavaScript condition. Here’s one I used to break when I was processing row 55 in a loop:

Firebug Conditional BreakpointSetting a condition like this is really useful, especially when you know that item 55 out of 4645 is causing an error and you just want to step through your script for that item.

There’s more to conditional breakpoints in Firebug [I know now], as you can read in the Firebug Tip: Conditional Breakpoints post on the Firebug blog.

Perhaps because I’m old school, while I’ve truly wanted to be able to set conditional breakpoints like this I’ve simply changed my indices or put in conditional debugging statements. I’ve gotten by just fine, but I’m going to be a lot more efficient now. If you didn’t know about this little trick, then hopefully you’ll be more efficient now, too.

Or maybe I’m just an idiot.

But Is jQuery Already Loaded?

JQuery

JQuery (Photo credit: Wikipedia)

Many end users are taking advantage of all of the goodness that jQuery provides, whether by adding simple effects like a sliding Quick Launch, more sophisticated form enhancements like SPCascadeDropdowns from SPServices, or even writing their own scripts for more complex solutions. More than ever, the distinction between “end user” and “developer” is blurring. IMO, that’s a good thing, but it also introduces complications, of course.

As one of those end users, you owe it to yourself to talk to your SharePoint team to explain what you are doing and to find out if jQuery is already loaded in the environment. In many cases, it will already be loaded in the master page or a page layout so that it is readily available across the Site Collection. The version that is loaded can also have an impact on how plugins function, making some of them effectively useless if there’s a version mismatch.

I know that in some cases, even finding the person who might know what’s loaded in the master page or what the plans may be is well nigh impossible. In those cases, here’s a trick to find out what’s up.

In a Internet Explorer browser window with the page you want to work with open, hit F12 to open the Developer Tools, and go to the Console. The screenshot below is from IE9, where there is a separate Console tab:

SNAGHTML562e339

If you’re in IE8, the Console is hidden under the Script tab, as below.

SNAGHTML5632086

If you’re in an older version of IE, well, I don’t have a screenshot for you. You may also not have the Developer Tools available, as it was a separate download with IE7 and below.

In Firefox, you’ll need the firebug add-in. If you have it, you can hit F12 to open Firebug. The Console tab is the first one on the left:

SNAGHTML56920f4

Once you’ve gotten to the Console, wherever it is, type the line I show in each of the screenshots above:

jQuery.fn.jquery

Depending on where you are, you’ll then either hit enter or click on the Run button.

Somewhere on the screen, you’ll see a display like this one, which shows that jQuery version 1.7.1 is loaded…

SNAGHTML56b32de

…or you’ll see something like…

SNAGHTML56d0846

…which tells you that jQuery isn’t loaded at all.

At that point, at least you’ll know what you are dealing with. If the version number isn’t what you need (I sometimes still see jQuery 1.3.2 loaded in a master page, which is ancient) then you’ll need to talk to your SharePoint team about updating it.

Tip ‘o the skimmer to Matt Bramer (@ionline247) for the exact syntax…

https://twitter.com/#!/iOnline247/status/200574868524236800

…and @BinaryJam for asking the question in the first place!

https://twitter.com/#!/BinaryJam/status/200566890437951488

Enhanced by Zemanta

DOM Inspectors for Different Browsers

I’ve been using the Internet Explorer Developer Toolbar for years with Internet Explorer 7 and below.  When Internet Explorer 8 came out, it had these tools baked right in and called the Developer Tools.  (You can activate the Developer tools by hitting F12 in IE8.)

But what if you need to peek into the DOM with Safari or Firefox?  Here are the tools for the Windows platform:

Safari

From Safari help:

To examine the resources of a webpage:

  1. Open the website, and then choose Develop > Show Web Inspector. The Web Inspector’s sidebar lists the categories of resources found on the page, such as documents, style sheets, and scripts.

    Note:If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”

image

Firefox

From the Firebug Web Site:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Visit the Firebug website for documentation, screen shots, and discussion forums: http://getfirebug.com