1. Browsers © Copyright 2014, Fred McClurg All Rights Reserved

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

3. JavaScript Development Browsers Google  Chrome http://google.com/chrome  Chrome Canary http://tools.google.com/dlpage/chrom eSXS 3

4. JavaScript Development Browsers Firefox + Firebug  Firefox http://getfirefox.com  Firebug (Add-on) http://getfirebug.com 4

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 5

6. JavaScript Development Browsers Safari  Safari http://apple.com/safari  Webkit Nightly Builds http://nightly.webkit.org 6

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

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

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

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

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

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