MacMost Now 511: Debugging JavaScript in Safari

Learn about the developer tools in Safari. You can view JavaScript error messages, send output to the console, and step through your code using the debugger.

Check out MacMost Now 511: Debugging JavaScript in Safari at YouTube for closed captioning and more options.

Video Transcript: hi, this is Gary with MacMost Now. On today's episode lets look at some of the debugging features of safari. So, few developed web pages who may or may not know, that all browsers have some way to debug Java script. Let's take a look at how safari does it. So there's a very simple little web page, and in it there's a simple little script, basically sets a variable to five checks to see if the variable is five, and issues an alert. But if i run in here, by simply refreshing the page, I don't get the alert, and that's of course because these two variables are different. This one's a capital V, this one's a lower case V. Very common mistake for a programmer to make, so how can you discover that in safari? You see now i don't any feedback at all. So the first thing you need to do, is you need to turn on the developer tools, you can do that by going to preferences and then click in advanced, show developed menu in menu bar. You can see it appears there. Now that i have this develop menu, i can go to it and select ""show error console,"" and now when i refresh the page here, i can see i do get a error message down here, ""can't find the variable,"" and it lists it and tells me what line it's on. Using that information, i can usually then go and deduce what the problem is and fix it. And now when i refresh, i instead get the proper response and no errors there. Now in addition to error messages you can also put your own messages to the output window here. You can use the command "console.log," and put any string in it, so if i were to run this, i can see it's output my string here. Tells me even what line it comes from, so i can actually output some of my own variable names and positions, that it is in the code here, so i can follow along with my code and debug. Here's an even more complex example, it's kind of output the numbers 0-9 and if i run it You can see it actually, outputs them all here. Here's a slightly more complex example. It's going to actually add up each of the numbers from 0-9, and output the total. So i run that and i get the same result, plus the 45 there at the bottom. Now i'm using this example to show how you can use the debugger. If i use scripts here rather than console, at the top of the  develop area, i can enable debugging. Now when i refresh the page, in the scrips in area i actually see the scrip and i'll be able to put in a break point, by clicking here on the left. And now when i run it, i can actually step through each one of these loops here, and i can even switch over to the console if i want and see it's progress here. Course i would see any changes to the page itself, if this were the type of script were making changes to the page. And i can even watch certain variables, and watch expressions to all sorts of different things. So there's a lot you can do here by debugging inside of safari. You can also use the console here to issue your own commands. So for instance, you can issue and actually get a result for something that you type in. You can even make changes to elements on the HTML page by using commands here in the console. So now i'm just scratching the surface there, as you may have noticed there is all sorts of ways to look at style sheets and the HTML objects for a webpage there and the develop area and a lot of different things you can do. So if your a developer, and you haven't yet checked out Safari's development tools, give them a look. till next time, this is gary with MacMost Now.

MacMost Now 511: Debugging JavaScript in Safari

Comments: One Response to “MacMost Now 511: Debugging JavaScript in Safari”

Welcome to MacMost

Free Weekly Newsletter

Recent Shorts

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information