Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Scripts Tab
The Scripts tab of the Web Inspector lets you see all the JavaScript source code loaded by your web page (see Figure 12).
)
Figure 12 Scripts tab
After activating the Scripts tab, you will see at the top of the Web Inspector pane, just below the tabs, a drop-down list that lets you see all the places from where JavaScript code has been loaded. You can select which code you are interested in viewing or troubleshooting from this drop-down.
The JavaScript code is displayed below the tabs with their line number, useful for locating the exact source of an error and when using the debugging features. Clicking on the line number lets you set a breakpoint at that line.
The right pane in the Scripts tab is used for advanced troubleshooting, like letting you view the call stack and JavaScript variables in the current context. So if you set a breakpoint and you are stepping through your JavaScript code, you can see all the methods that were invoked before the method where your breakpoint was set. In addition to seeing all defined variables in that context, you can modify the values of any variable, if necessary, to see how your code behaves with a different value.
The buttons above the Call Stack in the right pane let you control the execution of your JavaScript code if you are stepping through it to debug it.
At the bottom of the Scripts tab pane is the familiar toolbar ribbon. You already know what the first two buttons do. After these two icons is the checkbox icon, which lets you disable the features of the Scripts tab.
The fourth button, the "pause" icon, lets you set an "exception trap," which will bring the Script tab into focus and show you the line of JavaScript code that caused an exception if one occurs.
Without going into too much detail, there is a feature of the Console that I haven't covered. When you enable the Console, you can type in arbitrary JavaScript into the command line, which is the empty line next to the "greater than" symbol.
When you type JavaScript code into this command line, the result of the JavaScript you entered will appear above the command line. If you type in the name of a JavaScript object, for example "window", you will see a collapsed representation of a DOMWindow object.
Clicking on the twistie next to the object that appeared lets you see all the members of that object. Something I like about the Safari Console command line is that it has "type-ahead" intelligence. If you start to type in the name of an object that Safari can resolve, it will offer you a suggested object name that you can choose by pressing the Tab key, saving you some typing.