1/21/2014

Browser Developer's Tools | JavaScript Tutorial

Log in

JavaScript Tutorial
Home Tutorial JavaScript: from the Ground to Closures First Steps
Variables and statements User interaction: alert, prompt and confirm Tutorial

JavaScript: from the Ground to Closures

JavaScript: from the Ground to Closures Javascript and related technologies First Steps
First Steps

Browser Developer's Tools

Ilya Kantor

1. Firefox 1. Install 2. Open and enable Console 3. Enter the buggy page 2. Internet Explorer 1. Enable Debugging 2. 3. Other 1. 2. 3. 4. Try it browsers Google Chrome Safari Opera IE<8

Like

Setup your environment Hello, World! Variables and statements Browser Developer's Tools User interaction: alert, prompt and confirm Operators and constructs

Functions: declarations and expressions Mastering data types Four scents of "this" Type detection Function arguments Static variables and methods Scopes and Closures Decorators

By default, browsers hide JavaScript errors. Right, a visitor doesnt want to know about them, if he isnt into JavaScript. For develpers, there are great tools to see errors and debug scripts, in all major browsers.

Firefox
To develop in firefox, there is a tool named Firebug.

Document and Events Object Oriented Programming Timing

Install
Grab it at: 1. http://getfirebug.com Install it and restart the browser. Firebug should show up in the right-bottom corner of the browser:

Frames and windows Regular expressions in JavaScript Advanced and Extra stuff

Donate Donate to this project

Open and enable Console

Click on the bug icon to open Firebug. The Console functionality is initially disabled, so we need to click and enable it:

http://javascript.info/tutorial/development

1/5

1/21/2014

Browser Developer's Tools | JavaScript Tutorial

Enter the buggy page

Make sure Firebug is open, and then visit a buggy page: bug.html. You can see its source by pressing Ctrl-U or going to menu V i e w>V i e wS o u r c e . Firebug Console should show you the error:

Obviously, there is no variable or function l a l a l a . Click on it to get to the source code. Enable the panels you need. Enjoy. P.S. Firebug also opens on F12

Internet Explorer
In IE starting with version 8, there is a similar native debugger, disabled by default.

Enable Debugging
Go to menu Tools -> Internet Options:

Switch to A d v a n c e dtab and scroll until you see checked D i s a b l eS c r i p tD e b u g g i n gitem. Uncheck it:

http://javascript.info/tutorial/development

2/5

1/21/2014

Browser Developer's Tools | JavaScript Tutorial

Try it
Now, visit the buggy page: bug.html. A window should open suggesting you to start debugging. Press Yes and enjoy.

Other browsers
Google Chrome
Go to menu T o o l s>D e v e l o p e rT o o l s .

Safari
In Safari, you should first enable the Develop Menu. Go menu P r e f e r e n c e s , tab A d v a n c e d :

http://javascript.info/tutorial/development

3/5

1/21/2014

Browser Developer's Tools | JavaScript Tutorial

Check the Show Develop menu option. Then you need to enable menu in P r e f e r e n e s>S h o wM e n ub a r . Now the tools become available through the Menu bar, under D e v e l o pitem:

Opera
In Opera, you need to enable S h o wM e n ub a rfirst. The developer tools are called Opera Dragonfly and available under T o o l s>A d v a n c e dmenu:

IE<8
For IE<8, there is Microsoft Script Debugger, available in several flavours: MS Office Doesnt install by default, you have to check the option when instaling MS Office, search it under Script Editor. MS Visual Studio The debugger is available if web-development components are installed. No need to install C# etc. MS Script Debugger Express A piece of crap. Visual Studio is the best option for IE<8. Also, there is Internet Explorer Developer Toolbar for page inspection. Youll need it for IE7 and (oh) IE6.

http://javascript.info/tutorial/development

4/5

1/21/2014
Variables and statements

Browser Developer's Tools | JavaScript Tutorial

User interaction: alert, prompt and confirm

See also:
Variable naming

The content of this site is available under the terms of CC BY-NC-SA. Ilya Kantor, 2011.

"JavaScript is a registered trademark of Oracle corp. This site is not affiliated with Oracle corp.

http://javascript.info/tutorial/development

5/5