Browsers

© Copyright 2014, Fred McClurg All Rights Reserved

2

Browser Development Requirements

• JavaScript Console• Debugger• Inspect (and modify) live sites• Fast• Standards compliant• Secure

3

JavaScript Development Browsers

Google Chrome

http://google.com/chrome

Chrome Canaryhttp://tools.google.com/dlpage/chromeSXS

4

JavaScript Development Browsers

Firefox + Firebug Firefox

http://getfirefox.com

Firebug (Add-on)http://getfirebug.com

5

Installing Firebug within Firefox

Easy way to install correct version:

Tools => Add-Ons Extensions Tab Type “firebug” in the search text Press “Install” button

6

JavaScript Development Browsers

Safari Safari

http://apple.com/safari

Webkit Nightly Buildshttp://nightly.webkit.org

7

Firefox + Firebug Enable & Setup

Enabling:oTools -> Web Developer -> Firebug ->

Open FirebugoView -> Firebug

Setup:oTools -> Web Developer -> Firebug ->

Firebug UI Location -> Right

10

Running JavaScript Console

o Auto completion on reserved wordso Auto completion for previous variableso Type first characters and “tab” or “right

arrow” to accept completion proposalo Default console allows only one line of

texto Multiple lines can be entered by pressing

the red “Show Command Editor” icon and then pressing the “Run” button to execute

11

Running JavaScript Console

o After using copy and paste in the console, enter a return to execute.

o A variable as a single statement displays the value to the console.

o Use URL “about:blank” to display a blank page.

o Use “clear();” to clear text in the console.

12

JavaScript Console Output

Description:JavaScript does not provide any print or output functions. However, a number of browsers offer several functions for printing messages to the console.

Examples:<script> console.log( "Log message." ); console.debug( "Debug message." ); console.info( "Info message." ); console.warn( "Warning message." ); console.error( "Error message." );</script> consoleLog.html