The document discusses debugging JavaScript and CSS in browser developer tools. It explains that Chrome, Firefox, and Internet Explorer all provide built-in developer tools that can be accessed with keyboard shortcuts or from the browser menu. It recommends using Firefox and Chrome's additional plugins like Firebug and Web Developer to augment the debugging experience. Internet Explorer is considered the weakest of the three browsers for development.

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