- [Instructor] In this video we're going to start putting together everything we've seen so far about debuggers. And fix a bug in the usage of a jQuery plugin. So here's my example page. It's called lettering.js test, and it looks a lot like a very, very simple block. Most CMSs don't let you insert markup into the title of posts, so if you wanna sort of art direct your titles and make parts of them look different, you have to come up with another option. There's a jQuery plugin called lettering.js that's here to help. And that's what we're tryin' to use here.
The goal is to make certain words in each of these titles look a little different. Let's take a look at the home page for lettering.js. This is what it looks like. And this fancy logo that they have here is using their own plugin. If I use command option U to load up the source of this page let's scroll down a little bit and look here at the logo. And you can see here there's nothing other than these letters that spell out the logo's name. But each of these letters is styled separately.
This is something you can't do with CSS by itself at the moment. So, how are they doing this? They're using their own plugin, and if I open up the web inspector, with command option I, I'll switch to the elements inspector, right-click the logo, and inspect it. I can see that what the plugin does is it wraps each of these units, in this case the characters, in a span tag so they can all be styled differently. That's just what we want over in our example.
And yet, it's not working, so it's up to us to figure out why. Let's open up the web inspector. And we'll switch to the sources pane. Now you can see, there is an error firing here, which tells us something about what's going on. We're gonna pretend we don't see that for now and just use the debugger. So I'm gonna open the index.html file and scroll down to where the script tags are, below all the posts. Here they are. We're loading up jQuery, and then the plugin, and then the script file that actually invokes the plugin.
Now I can open that file by finding it here in the sources pane, or I can use a command that Chrome makes available, command P, which will open anything that's known in the sources pane. So I can start to type main.js. Sometimes this doesn't work, let's reload. So I can type command P, and if I start to type main, there it is. It opens it up for me. It's not such a hardship to find something that's just in a couple folders deep, but when you're looking for something where you might have a very complicated structure, that command is really helpful.
So let's set a breakpoint here on line two where the plugin is invoked. And we'll reload the page. There we go, we're paused here on the invocation. So I'm going to step into this function and see what's going wrong. Whoa, okay, so I've just stepped into jQuery. This is the minified version of jQuery, it's very unreadable even if I were to pre-print it. And really, I don't actually care about what's going on in jQuery itself. So what I need to do at this point is, do what's called black boxing the script.
That is, I'm going to force my debugger to ignore anything that takes place inside that jQuery file. You can do this to as many files as you need to, to make sure that you're only looking at the stuff that's important to you when you're trying to debug. The way you black box in Chrome, is right-clicking anywhere in the source pane, and choosing black box script. There are other ways to do this as well. You can do it from the call stack. As you can see the call stack just updated to show me that there are a whole bunch of stack frames that are hidden because I've just black boxed them. Now anytime something cycles into jQuery, I'll be taking out without looking at it.
Black boxing is really handy when you're working with a lot of third-party libraries, and I wanna mention one other thing about it. Over here in Firefox, I have the same example loaded. And here in the source pane, if I right-click I have the same option to black box the source, but I also have this little eyeball button. This is something that you'll see in a lot of debuggers, not currently in Chrome, that let's you toggle black boxing on and off in a more visual way. Okay, back here in Chrome I'm going to refresh, and we'll try stepping into this function again.
jQuery is skipped entirely this time, much better. And I'm right into my developer build of jQuery.lettering, so I know that what I'm doing is calling this using the method word, which sounds right, but it's not working. So I can see that what's going on is we're passing in this argument, and then it's looking it up inside this methods object. And you can see if I hover over this, there is no method called word in here, it's called words. So that's one way to find this out.
I could've also use a watch expression. And you can see it like that. I could've also looked for it here in the scope panel. Here's methods. Okay so I know that I need to rename this to words. Let's resume this. I'm gonna switch over to my code editor and make that change. So here's main.js, I'm gonna hold down the command key and click to open this. Now if I change this to words and save.
I can switch back and refresh. I still have my breakpoint set, so I'm gonna remove that and resume, there we go. Now the CSS that's supposed to be loading and restyling some of the words of every title is actually working. Of course there's more than one way that you could approach this problem. But we've just applied some of what we learned about using a debugger to fix this very simple bug.
- Understanding the need for a debugger
- Debuggers in web browsers
- Basic debugger concepts
- Debugging the use of a jQuery plugin
- Remote debugging on an Android device
- Debugging a node application in WebStorm
- Using a debugger as a learning tool on a live site