A Non-Developer’s Intro to the Developer Toolbar: Scripting

Last week, we started in on a basic into to accessing your site’s elements via the Developer Toolbar.

This week, we will cover scripting with the Developer Toolbar, and all of its wonders. :) Don’t worry, we’re not going to actually write code, well, maybe one or two really simple lines of code. Trust me, it’ll be painless.

The developer toolbar in each browser supports step-through debugging JavaScript, viewing errors, and real-time scripting. Since this post is to serve as an intro, my assumption is that you’re not a developer, but maybe you grabbed some code from a blog and it’s not working.

Script Errors

With your developer toolbar opened, go to the Script tab. If your script is acting up, it should be pretty obvious. You may need to refresh the page to get the script to run again, and return an error.

You will see the error on the right, and there should be a link right below it. In my example, the link is ”Home.aspx, line 622 character 20′. If you click that, that will take you to the corresponding line in the left pane. Pretty neat eh? As a non-developer this may mean nothing to you, but this info helps the developer who wrote the script a lot.

Real Time Scripting

The Script and Console tabs allow you to enter and run JavaScript on the fly. This is excellent for testing things against SharePoint and makes development time much faster.

You may or may not care much about this, stick with me for the sake of a quick example:

You’re interested in a set of code from a blog, but you’re not sure if you have jQuery installed, and if you do, what version.

Let’s find out!

Go to the Console tab. At the bottom of the window should be a textbox with >> in it. You’ll be entering your commands there.

Type in $ and press enter. Yes, just $, a dollar sign. (I told you this was going to be easy!)

If you don’t have jQuery installed, you’ll see an error, similar to:

If you get something like:

Good news, jQuery is available! One more line of code will tell us the version. Type in

 $("body")

and press enter. That should return something like:

If you look a few lines down, you’ll see jquery : “1.9.1”. There’s your version number.

I can’t stop myself, one more tiny line of code. Let’s hide something on the page, just for fun. Type in

 $("#s4-workspace").hide()

and press enter.

See what that does? Cool huh?

Oh no!

Relax. JavaScript only affects the immediate page, your changes are not applied to the back end. Want it back? Just refresh your page. This could be a fun prank to play on someone if you can get 2 seconds in front of their computer. Do it to one of your developers, let them know you know what they know, ya know?

Coming up next, performance!

What happened to debugging? Debugging script only comes in handy if you’re troubleshooting a script you’re writing. Since you’re not a developer, I’m not going down that road.

Til then, Happy SharePointing!