As web pages become increasingly complex, more logic is running on the client side, which requires debugging and resolution of browser compatiblity issues. Even with a great tool like dojo, a page may be processed differently and require fixing.
FireFox is my favorite browser for developing web applications. Get the FireBug plugin as well, and YSlow.
- console.debug(variable/expression/string) - allows you to monitor the state of the code as it executes
- Breakpoints are okay, but it is often faster to let the code run and track it with console.debug
- alert(variable/expression/string) - can be used as a break point. It is a great way to stop the code and then restart it to isolate problems
- Comment out code to isolate problems
- Use the FireBug console to evaluate code and expressions
- Use the FireBug console to navigate through objects, probing to find properties and methods. Get the commands to work on the console, then add them into the code
- Use FireBug, under FireFox, to solve problems with IE, once you have identified them
- Send extra values back in JSON to debug server side logic under AJAX
- Inspect the POST data to see what was passed down
- Use a single function to handle all AJAX errors, and then an alert and echo to display text from the server. Include code to disable this for security
- Create browser specific CSS files from the start, and use server-side logic to deliver them. Use these files to override the other CSS files for browser issues
- Set padding and margins to zero
- Keep things simple
- Use background colors and the layout area of FireBug to solve layout issues. Keep CSS as lean as possible.
- Clear the cache/temporary Internet files for CSS updates and JS changes that in separate files