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

1

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 doesn’t want to know about them, if he isn’t 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.info/tutorial/development 2/5 . P. Click on it to get to the source code. Enable the panels you need. and then visit a buggy page: bug. You can see it’s source by pressing Ctrl-U or going to menu V i e w>V i e wS o u r c e . 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. Firebug also opens on F12 Internet Explorer In IE starting with version 8.html. there is no variable or function l a l a l a . Firebug Console should show you the error: Obviously. Uncheck it: http://javascript. Enjoy.S.

Safari In Safari. tab A d v a n c e d : http://javascript. A window should open suggesting you to start debugging. visit the buggy page: bug. 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 . Press “Yes” and enjoy. you should first enable the Develop Menu.1/21/2014 Browser Developer's Tools | JavaScript Tutorial Try it Now. Go menu P r e f e r e n c e s .info/tutorial/development 3/5 .html.

available in several flavours: MS Office Doesn’t install by default. you have to check the option when instaling MS Office.1/21/2014 Browser Developer's Tools | JavaScript Tutorial Check the “Show Develop menu” option. search it under Script Editor. http://javascript. MS Visual Studio The debugger is available if web-development components are installed. you need to enable S h o wM e n ub a rfirst.info/tutorial/development 4/5 . Visual Studio is the best option for IE<8. there is Microsoft Script Debugger. MS Script Debugger Express A piece of crap. Now the tools become available through the Menu bar. 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 . Also. You’ll need it for IE7 and (oh) IE6. under D e v e l o pitem: Opera In Opera. there is Internet Explorer Developer Toolbar for page inspection. 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. No need to install C# etc.

2011. This site is not affiliated with Oracle corp.info/tutorial/development 5/5 . prompt and confirm › See also: Variable naming The content of this site is available under the terms of CC BY-NC-SA.1/21/2014 ‹ Variables and statements Browser Developer's Tools | JavaScript Tutorial User interaction: alert. © Ilya Kantor. http://javascript. "JavaScript™ is a registered trademark of Oracle corp.