Extra verktyg för redigering av JavaScript  
 

Warning: Many of these features were developed for our own use in debugging OmniWeb. While we left them in because they may be useful to web developers who use OmniWeb, we don't consider them all "production -quality" code. Use at your own risk.

If you select the Show Console option in JavaScript Preferences, the JavaScript console will pop up whenever you visit a web page that uses JavaScript. The console allows you to observe and talk to the JavaScript interpreter running in the browser window. Each page has its own interpreter, so each page will pop up a separate console.

The console can be used to see what code is being executed by the interpreter. Any time the interpreter executes some JavaScript code, the code appears in the console in blue, followed by the result, in black. This works for code in <script> blocks, in event handlers, in javascript: URLs — anywhere.

If an error occurs, then instead of a result, the console will show the error message. For example, it might display a message like this:

http://www.wherever.net/something/blah/mypage.html (block 3):2: document.myform.thingy has no properties
The message describes where the offending code was, followed by what went wrong. This error, for example, was found on the page http://www.wherever.net/something/blah/mypage.html, and it was found in the third <script> block on the page (block 3), and it was found on line 2 of that block. The second half of the message describes the error. In this case, the JavaScript code was probably trying to use a property of the document.myform.thingy object, but that object doesn't have any properties. Perhaps the object is null.

You can find out what's wrong by using the interactive feature of the console. At the bottom of the console is a text box. You can type JavaScript code into this box, hit return, and it will be executed. It's executed in the page, so you can use this to look around at the objects in the web page, or to change things. When you execute code, it's displayed in the console in blue just like any other JavaScript code, followed by the result (in black) or the error (in red). You could use this to do simple arithmetic:

1 + 1
2
6 * 7
42

Or you can use it to examine variables in your JavaScript code:

document.myform
[object Form]
document.myform.thingy
[no result]

You can even use it to change variables, or to affect the page:

document.myform.elements[2].value = "some text"
some text
document.myform.submit()
[no result]

As you can see, this is a powerful way to interact with the JavaScript interpreter.

Remember that if you leave a page, even if you come back later, that page's interpreter goes away. When this happens, the console window will still be there, but you won't be able to execute any code in it any more.

In the examples above, you'll notice that one of the expressions returned [no result]. This means that the expression returned void. But a void value can't be directly represented as text, so the console wrote [no result]. Other values that can't be easily represented, such as arrays and objects, will be displayed similarly. For example, if you type document, the result will be [object Document].

You can examine objects by typing more JavaScript at them, for example, by typing document.location to find out the document's url. Or you can use the object inspector. To inspect an object, just type an expression in the console, and then instead of hitting return or clicking on Evaluate, click on Inspect. This works just like Evaluate except that the result, if it's an object, is displayed in the object inspector.

Närliggande ämnen
JavaScript Preferences

Innehåll: Redigera HTML-källkod
Innehållsförteckning