Tag Archives: links

A Non-Developer’s Intro to the Developer Toolbar: Other Cool Stuff

This is part four of my mini-series, part one covered element inspectionpart two covers scripting and part three covered performance.

In this, my final post, I will cover some of the other neat things the developer toolbar does for us. I may get a little deeper than a non-developers point of view. All of the items below live in the menu of the toolbar


Link Report

Click the View menu, then Link report.

Link Report

This neat little report tells you all of the links on the current page, and how they’re accessed.

Image Report

Click the Images menu, then image report.

Image Report

This report includes all of the images on the page, along with loads of data about the image, including sizes.


Pronounced cash, but has nothing to do with money. Cache is a local temporary storage location for assets like images and scripts, and allows your computer to use the local version instead of the server version, which is faster. However, cache is also a frequent headache dealing with web pages. Hopefully your developers and support teams never said “you need to clear your cache”. If they do, you can do this from this menu. Select Clear browser cache… from the Cache menu.

Resize your Browser

You can resize your browser to some of the standard dimensions. Click the Tools menu, then click Resize and select your size. Why would you want to do this? One, you can see what the page looks like for users with a lower resolution than yours. Two, basically an extension of one, is if you’re dealing with responsive web design, you can see what your tablet would see when the browser is reduced to the tablet size.


Click Tools menu, then Show Ruler.

rulerA neat little tool to size up anything on the page. Not sure what a non-developer would use this for, but hey, it’s cool anyway.

Don’t be afraid to explore

I think that should do it! The developer toolbar, though named and targeted to developers, has some nice resources for non-developers. Don’t be afraid to explore and try out some other stuff. Have fun and harass your developers, they’ll love it.


SharePoint: Defaulting external links to open in a new window

Within SharePoint, you can have links to other resources outside of SharePoint. These could go to other internal systems, or external websites. Also, if you’re using Enterprise Search and index websites which are not within SharePoint the search results will include links to outside of SharePoint. The issue with linking to external sites and resources outside of SharePoint is that the link takes over the window so the user leaves SharePoint. Instead, I want the user to go to the link within a new window, thereby keeping the user in SharePoint when they’re done with other resource.

Pretty simple concept, but updating links manually throughout SharePoint might be a pain. Below is a simple little JQuery script that checks all hyperlinks on the page and if it references an external URL, it will set the target to blank! Throw this in your masterpage or in a content editor web part if you only want it on a couple of pages.

NOTE: you’ll need to include a reference to the JQuery files, below I’m using Google’s API, but I recommend uploading the JQuery file into your farm and referencing that instead.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 var url = '://' + window.location.hostname;

 // get the current website name, and i add :// to make sure we're looking at the right name
 // in the URL, rules out http://www.google.com/site:wss.domain.com
 url = url.toLowerCase(); // lowercase everything to compare apples to apples
 $("a").each(function() {
 var link = this; // assign the link object to another variable for easier managability
 var linkHref = link.href.toLowerCase(); // lower case it
 if(linkHref.indexOf(url) < 0 && linkHref.indexOf('javascript:') < 0){
 // check to see if this A object has this domain in it and make sure it's not a javascript call
 link.target = '_blank'; // change the target to be in the new window

 if(linkHref.indexOf('.pdf') > 0){ // check to see if this is a PDF
 link.target = '_blank'; // change the target to be in the new window
 $(link).removeAttr("onclick"); //remove the SP click event

 if(linkHref.indexOf('/forms/') > 0 && linkHref.indexOf(').aspx') > 0){
 //check for links in the forms library
 link.target = '_blank'; // change the target to be in the new window
 $(link).removeAttr("onclick"); //remove the SP click event