Browsers © Copyright 2014, Fred McClurg All Rights Reserved

Browser Development Requirements JavaScript Console Debugger Inspect (and modify) live sites Fast Standards compliant Secure 2

JavaScript Development Browsers Google  Chrome  Chrome Canary eSXS 3

JavaScript Development Browsers Firefox + Firebug  Firefox  Firebug (Add-on) 4

Installing Firebug within Firefox Easy way to install correct version:  Tools => Add-Ons  Extensions Tab  Type “firebug” in the search text  Press “Install” button 5

JavaScript Development Browsers Safari  Safari  Webkit Nightly Builds 6

Firefox + Firebug Enable & Setup Enabling: o Tools -> Web Developer -> Firebug -> Open Firebug o View -> Firebug Setup: o Tools -> Web Developer -> Firebug -> Firebug UI Location -> Right 7

Chrome/Canary Enable & Setup Enabling: View -> Developer -> Developer Tools Setup: Gear -> Dock Right 8

Safari/Webkit Enable & Setup Enabling: Safari -> Preferences... Advanced Tab [x] Show Develop menu in menu bar Develop -> Show Web Inspector 9

Running JavaScript Console o Auto completion on reserved words o Auto completion for previous variables o Type first characters and “tab” or “right arrow” to accept completion proposal o Default console allows only one line of text o Multiple lines can be entered by pressing the red “Show Command Editor” icon and then pressing the “Run” button to execute 10

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. 11

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: console.log( "Log message." ); console.debug( "Debug message." ); console.info( "Info message." ); console.warn( "Warning message." ); console.error( "Error message." ); 12 consoleLog.html