Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

10
Browsers © Copyright 2014, Fred McClurg All Rights Reserved

Transcript of Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

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

Browsers

© Copyright 2014, Fred McClurg All Rights Reserved

Page 2: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

2

Browser Development Requirements

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

Page 3: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

3

JavaScript Development Browsers

Google Chrome

http://google.com/chrome

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

Page 4: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

4

JavaScript Development Browsers

Firefox + Firebug Firefox

http://getfirefox.com

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

Page 5: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

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

Page 6: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

6

JavaScript Development Browsers

Safari Safari

http://apple.com/safari

Webkit Nightly Buildshttp://nightly.webkit.org

Page 7: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

7

Firefox + Firebug Enable & Setup

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

Open FirebugoView -> Firebug

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

Firebug UI Location -> Right

Page 8: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

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

Page 9: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

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.

Page 10: Browsers © Copyright 2014, Fred McClurg All Rights Reserved.

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