8
We bring IBM i RPG assets forward 1 © 2014 by ASNA. All rights reserved. Chrome, FireFox and IE all provide good tools for Web developers Debug JS/CSS in real time: Using browser developer tools Presented by Roger Pence

Browser tools

Embed Size (px)

Citation preview

Page 1: Browser tools

We bring IBM i RPG assets forward 1© 2014 by ASNA. All rights reserved.

Chrome, FireFox and IE all provide good tools for Web developers

Debug JS/CSS in real time:

Using browser developer tools

Presented by

Roger Pence

Page 2: Browser tools

We bring IBM i RPG assets forward 2© 2014 by ASNA. All rights reserved.

WebDev tools are in the box!

• Chrome, FireFox and IE all include good WebDeveloper tools

• Access them with F12 or pull them up from the browser’s menu

• WebDev screens can be docked at the bottom of the display or split out as separate windows

• Multiple monitors helps this experience dramatically

Page 3: Browser tools

We bring IBM i RPG assets forward 3© 2014 by ASNA. All rights reserved.

Chrome and FireFox plugins

• Chrome and FireFox have a rich assortment of developer add-ons

• IE, not so much

• It’s an opinion, but…• IE is in third place in every regard

• If IE is your browser of choice, at least install FireFox and Chrome for their developer tools

Page 4: Browser tools

We bring IBM i RPG assets forward 4© 2014 by ASNA. All rights reserved.

How bad is IE6’s reputation?

Page 5: Browser tools

We bring IBM i RPG assets forward 5© 2014 by ASNA. All rights reserved.

IE rendering modes

• IE does do one thing that is helpful--it can, finally change rendering modes

• A drop-down on the right-hand sideof the IE DevTools lets you selectvarious rendering engines

• IE 6 is missing—who cares!

• Presents a helpful, albeit generally disappointing, view

• You didn’t really expect that to workin older version of IE, did you?

Page 6: Browser tools

We bring IBM i RPG assets forward 6© 2014 by ASNA. All rights reserved.

FireBug for Firefox

• Rich debugging experiences are available out of the box from all three browsers, but…

• FireFox’s FireBug plugin takes things to another level• Been around a long time, very mature and has tons of

features

• Lite version available for Chrome

• You should have this

• Chrome’s intrinsic tools nearly give FireBug a run for its money

Page 7: Browser tools

We bring IBM i RPG assets forward 7© 2014 by ASNA. All rights reserved.

Web Developer plugin for Chrome and FireFox• Web Developer provides a rich set of features

• Works with both Chrome and FireFirefox

• You should also have this for at least one of these browsers

Page 8: Browser tools

We bring IBM i RPG assets forward 8© 2014 by ASNA. All rights reserved.

WebDev documentation and articles

• Chrome Developer Tools

• Firefox Developer Tools

• IE Developer Tools

• A Peek at Internet Developer Tools

• Wait, Chrome Dev Tools can do that? (video)

• There are tons of others on YouTube for all three browsers