From the course: SharePoint Advanced: Enhancing Functionality with JavaScript

Browser developer tools

From the course: SharePoint Advanced: Enhancing Functionality with JavaScript

Start my 1-month free trial

Browser developer tools

“

- [Instructor] Before we start messing around with code and stuff, I think it's really important that we spend a little time looking at the browser developer tools. Internet Explorer, Edge, Chrome, Firefox, Brave, you get to the developer tools in the same way in all of them on a Windows machine, pressing F12. You can also find the tools in the various settings menus. I'm in Firefox right now so I'll click the hamburger menu in the top right. Did you know that that's the official name? Yeah, hamburger. Anyways, from there, I'll select Web Developer and then Toggle tools. Now if you haven't used this before, you'll want to spend a little time getting comfortable with it. The reason that we're interested in the developer tools is that it's the easiest way to identify different element names for items and classes within SharePoint. These are the things that you interact with in your JavaScript coding. There's a pointer tool that let's us pinpoint things on the page and identify them. Let me show you what I mean. We've got the developer tools open for the page. So I'll click the pointer icon here on the far left, and now as I float over elements on the page, they're identified. And if I click on one, you'll see that the code in the window below goes directly to that spot. Sometimes this can be a little tricky. If you don't wind up on a recognizable event, you may need to scroll up or down to find the thing you're wanting to work with. The developer tools also let us use the console to do JavaScript on the fly in our pages and test how things are working and do page debugging. And I'll be showing you that really soon so stay tuned.

Contents