Web client side development tips

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.

Tips:

  • 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
  • As mentioned before, use server side logic to detect the browser (if possible) and deliver appropriate HTML and javascript. A good example is plugin player code. The objective is to only send the code for the browser in use to the client
  • 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