When you’re writing code for anything, no matter the tools, language, or environment, you need to be able to debug it. In simple terms, stop the code from running and step through it line by line to see what data is coming in and how your code is processing it. Since the Etherson method utilizes HTML and JavaScript, you can easily debug code in your browser using Firebug or developer tools. As mentioned in Chapter 1, we’ll be using Firebug a plug-in for Firefox. You can use the built-in developer tools in any browser.
To launch these tools, just press F12 on your keyboard and the tools will launch at the bottom of your screen, as shown in Figure 4-35.
Figure 4-35. Firebug console window in Firefox
Figure 4-34. Restored file being displayed in the Content Editor Web Part
If it’s not already open, select the Script tab in Firebug. If this is the first time you have launched Firebug, you may need to enable script debugging by pulling down the arrow on the tab and choosing Enabled in the options. This tab allows you to inspect all the scripts that are being loaded for the page. The left-hand pane shows the current script that you are looking at, and the right-hand pane shows any JavaScript objects that are loaded. These objects are found under the Watch tab in the right pane. Let’s open our SimpleExample.js script by using the drop-down list right above the left pane, as shown in Figure 4-36.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
This list contains all the JavaScript files that were loaded for the page. Scroll down until you find SimpleExample.js, and then click it. You’ll notice that Firebug provides the path from where the script is loaded, which is very convenient should you need to locate it in your environment. Clicking the file loads it into the left pane, as shown in Figure 4-37.
Figure 4-36. Locating the SimpleExample.js file in Firebug
Figure 4-37. SimpleExample.js file loaded in Firebug
You’ll notice that line numbers are provided on the left of the script file. These come in very handy if an error is thrown, as the browser will let you know which line an error occurred on. You can set a breakpoint by clicking one of the line numbers. A breakpoint is simply a location where your code will stop running so that you can inspect what is going on. You can set multiple breakpoints; in fact, you could set one on each line.
When you set a breakpoint, a red dot appears next to the line number, as shown in Figure 4-38.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
Once a breakpoint is set, you can reload the page, and when the script is loaded, it will stop running once the breakpoint is hit. You can see this when the red dot has a yellow arrow inside of it and the line is highlighted, as shown in Figure 4-39.
Figure 4-38. Placing a breakpoint in the JavaScript file
Figure 4-39. Breakpoint hit while debugging SimpleExample.js in Firebug
Now that the script has stopped, you can look in the right pane in the Watch tab and see the objects that your script is consuming. For instance, in this success function we declared a variable called data, which is where the results are located. The Watch tab now has a data object that we can inspect. Click the + icon next to data, and you can expand it to view its properties. Continue to click the + icons until you see the results, as shown in Figure 4-40.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
We know the number of items that are coming back from our list and we can see these in the results object. They are labeled by their index, or position, in the list and indexing always starts at 0. You can further expand the items and view their properties as well. Click the + icon next to the item at the 0 index. You can see that SharePoint returns a lot of data about list items. This does not only apply to list items—just about anything you request data for in SharePoint comes with a lot of information tacked on. Scroll down to explore all the properties in the item and you’ll find the Title and Description properties that we display via the script, as shown in Figure 4-41.
Figure 4-40. Data object that is sent back from the REST API
Figure 4-41. Expanding the first list item to inspect its properties
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
Debugging will prove extremely useful to you as you develop custom solutions, because you can inspect all the data coming back to ensure that it’s exactly what you need. It’s very handy as well, because sometimes data is not in the places that you thought. Since the script is stopped at this point, you have a couple of ways to start it back up again. Pressing the F10 key on your keyboard will make the script move forward one line at a time. This is very helpful because you can see what happens as each line is executed. Some blocks of code will execute together; for instance, all the code inside the $.each loop will act as a single line if you are using F10 to step through the code. You can easily place another breakpoint inside the loop to stop it there as well.
The other option is to use the arrow icon, as shown in Figure 4-42.
Figure 4-42. Continue to run the script by clicking the Play icon
Figure 4-43. Developer tools in Chrome
This icon simply tells the debugger to continue on and resume processing the script. If no other breakpoints are present, it will finish processing the script completely. The buttons and file locations can vary between developer tools a great deal. You can see Chrome and Internet Explorer developer tools in Figures 4-43 and 4-44.
Chapter 4 ■ Building Custom WeB parts using html and JavasCript
No matter which browser you use or how strange the developer tools may appear, rest assured that they all perform the same functions. You can inspect the HTML, review and change the CSS, and most importantly, debug your JavaScript. As you progress down the path of custom solutions using HTML and JavaScript, you’ll find these tools as important as ever.
Summary
In this chapter, you were introduced to the Etherson method for building custom solutions using HTML and JavaScript. We covered the various components and you saw how to configure each and learned how they all worked together as a single unit. You built a couple of sample solutions and saw how you could easily restore code after uploading new files. As you work through this book, we’ll continue to use this method for many examples, and you’ll learn how to expand it using CSS.
In the next chapter, we’ll explore using JSLink to style and enhance List View Web Parts. JSLink is a new and exciting way to bring more functionality to out-of-the-box SharePoint. It can also be combined with JavaScript to create very unique solutions to meet your business needs.
Figure 4-44. Developer tools in Internet Explorer 11