A Non-Developer’s intro to the Developer Toolbar: Element Inspection

If you’re a beginner in the world of customizing SharePoint, you should get to know the developer toolbar. Even if you’re only copying and pasting code from blog posts, knowing about, and using, the developer toolbar can save you a few cycles of banging your head on the keyboard.

The developer toolbar is key. Any SharePoint developer who is doing anything on the front end (JavaScript, jQuery, CSS, HTML, etc.) heavily relies on it. It does some really awesome stuff. I am going to run through some of the key things you can get out of the developer toolbar, like:

  • Element Inspection
  • Scripting
  • Performance
  • Other Advantages

I decided to break this up into a few posts since there’s a lot of info to cover.

How do you get a Developer Toolbar?

Most if not all major browsers have a variation of one:

Internet Explorer calls it the F12 Developer Tools, and can be accessed by pressing the F12 button.

Internet Explorer F12 Developer Toolbar

Chrome calls it Developer Tools, and can also be accessed by pressing the F12 button.

Chrome Developer Toolbar

Safari calls it Web Inspector and you can get to it by pressing CTRL+ALT+i.

Safari Web Inspector

FireFox calls it FireBug, and is quite different than the rest, but the same functionality exists. You can get to it by pressing SHIFT+F2.

FireFox Developer Tools

Once we have the developer toolbar running, we can explore the DOM. DOM stands for the Document Object Model, more at Wikipedia: http://en.wikipedia.org/wiki/Document_Object_Model. Basically, the DOM is your page, and all the elements you see: text, colors, shapes, images, etc.

Element Inspection

Each of the toolbars have an option to Inspect or Select an element:

Safari

Safari

Chrome

Chrome

FireFox

FireFox

Internet Explorer

Internet Explorer

With the selection tool enabled, you can then hover over elements in your page. You’ll quickly see a border wrapping the elements. Click on an item and the CSS attributes assigned to that element will appear in the toolbar.

Select an element

Select an element and view its position in the DOM, and all CSS that affects it on the right.

View the element's CSS

Press Trace Styles (only in IE) to see a cleaner view of the CSS attributes.

Press Trace Styles for a cleaner view (only in IE). Edit CSS directly and see it change in the page!

Double click on a CSS value and see it change in the page! (See how the font size increased?)

Once you have played around with it, you can take what you know, and apply it to your custom CSS files, or in a web part. This part will require you to know CSS a little bit more, however if you mess with your CSS and decide you like a new look, you can send along your desired CSS  to your developers and surprise them.

A few notes:

  • Modifying the CSS is not permanent. When you refresh the page or browse to another, the CSS reverts back to what it was.
  • I use IE for CSS related inspection, as it has the cleaner Trace Styles option.
  • Popup dialogs and some menus are dynamically generated by a user clicking, IE doesn’t do a good job at inspecting these. I will usually use Chrome or FireFox to access these elements.

Coming up next, Scripting!

Til then, Happy SharePointing!

Advertisements

5 thoughts on “A Non-Developer’s intro to the Developer Toolbar: Element Inspection

  1. Pingback: A Non-Developer’s Intro to the Developer Toolbar: Performance | David Lozzi's Blog

  2. Pingback: A Non-Developer’s Intro to the Developer Toolbar: Other Cool Stuff | David Lozzi's Blog

  3. wmhogg

    FireFox has its own developer toolbar, accessible by Shift + F2. FireBug is an independently developed FireFox extension which can be added to FireFox, but does not come with FireFox.

    Reply
  4. Pingback: Vertical Promoted Links in SharePoint 2013 | Views from Veronique

  5. Pingback: SharePoint: Hiding Ribbon and More with IsDlg | David Lozzi's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s