Debugging the use of a jQuery plugin - JavaScript教程

- [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. Here's the page that we'll be troubleshooting. It's called Lettering.js Test, and it looks a lot like a very, very simple blog. Most CMSs don't let you insert markup into the titles of posts, so if you want to 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 can help with this. The goal is to make certain words look different from the rest of the title. Also included in the exercise files is the Lettering.js example page that I've enhanced a little bit to include a very fancy treatment of the plug-in name here using the plugin. This will let us see the expected behavior and kind of check out how it works. So, if I use command option U, or control alt U on non-MacOS platforms, we open the source. We can scroll down to the name of the plugin here, Lettering.js. You can see here that there's nothing other than these letters that spell out the logo's name in the source, and yet on the page, each of them is styled differently. So if I inspect this by right clicking and choosing inspect, I can see that what's happening is the plugin inserts a span tag around each letter in this case, and then there's CSS for each one that will style them however you want. That's the sort of behavior that we're expecting here on our test page, but it's not working. So let's see if we can figure out why. We'll open up the developer tools. And here on the sources pane, we can start to look things over. First, I'll open the index.html file. We'll scroll down to where the script tags are. Here's jQuery, and then the Lettering.js plugin, with its jQuery prefix that helps us know that it's a plugin for jQuery, and then here's our main.js file, which should have the custom JavaScript. So I could open that over here in the sidebar by clicking this. But also in the sources pane, I could use command P, or control P on Windows or Linux, to open any file that Chrome is aware of. I start typing main.js, and here it is. It's not such a hardship to find something that's in just a couple of folders deep, but when you're looking for something where you might have a very complicated folder and document structure, that shortcut can be really helpful. So let's set a break point here on line two, where the plugin is invoked, and we'll reload the page. And there we go, we're paused here on the invocation of the plugin. So I'm going to step into this function, and we can see what's going wrong. Okay, so we've jumped here into jQuery. This is the minified version of jQuery. It's pretty unreadable, even if we were to use the pretty print function. And I really don't actually care about what's going on in jQuery itself, so what I need to do at this point is ignore this script from debugging, also called blackboxing 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 make sure that you're only looking at the stuff that's important to you when you're trying to debug. The way you do this in Chrome is right clicking anywhere in the sources pane, and then I can choose add script to ignore list. There are other ways to do that as well, even from the call stack. And as you can see, the call stack has just removed everything that was related to jQuery. By check show ignore listed frames, you can see there's a lot more here that's just from jQuery itself, so I'll uncheck that again, and now we just see what's in the main.js file. Now, anytime something cyclists into jQuery, I'll be taken out without having to look at it. Having scripts in an ignore list or a blackbox is really handy when you're working with a lot of third party libraries, and the way you can do it varies in different browsers. Over here in Firefox, I have the same example loaded, and here in the source pane, I can choose ignore source. Sometimes you'll see a little eyeball icon that you could click that will also give you an option to hide the script. Okay, back here in Chrome, I'm going to refresh, and we'll try stepping into this function again. Okay, now we've skipped jQuery, and we've just gone over to the lettering plugin, and because I'm in the developer build of jQuery lettering, it's not minified and I can really see what's going on here. And it's showing me that the method I've passed in to the lettering function is word. Which sounds right, but it's not working. And then I can see that it's trying to look it up in this methods variable. It's not in the local scope, but if I open up the parent closure, I can see the methods here, and the ones that are available are init, lines, and words, and I'm passing in word. So now I know what the problem is and we can fix it. If I didn't want to go digging through the scopes pane, I could also have added methods here, in my watch expressions, and inspected it that way. In any case, now we can go fix this. So switching over here to my code editor, I have the index.html file, and I'm going to jump down to the bottom of the file with command down arrow, and then I can hold command and click this file to open it. And now I can change word to words and save. I'll let the execution resume here in Chrome, close the developer tools, and refresh. And I can see that now my titles are starting to look partially different. That means that the CSS that was supposed to be loading and restyling those words is working again. Of course, there's more than one way to do this, but we've just applied some of what we've learned about using a debugger to fix this very simple bug.