ASNApalooza 2014 Session: Debug JS/CSS in real time:Using browser developer tools

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

2. 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
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 2

3. 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
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 3

4. How bad is
IE6’s
reputation?
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 4

5. IE rendering modes
• IE does do one thing that is helpful--it can, finally
change rendering modes
• A drop-down on the right-hand side
of the IE DevTools lets you select
various rendering engines
• IE 6 is missing—who cares!
• Presents a helpful,
albeit generally disappointing, view
• You didn’t really expect that to work
in older version of IE, did you?
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 5

6. 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
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 6

7. 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
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 7

8. 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
We bring IBM i RPG assets forward © 2014 by ASNA. All rights reserved. 8