Visualforce pages work like this. The browser makes a request and Salesforce uses Visualforce tags to generate HTML/CSS/JavaScript that is sent back to the browser. Most communication is in a simple text format so can be looked at. The browser builds a DOM (Document Object Model - an in-memory tree) from the response and renders that onto the screen guided by the CSS (for colors, positioning, size etc). Any JavaScript included can then respond to user actions such as mouse clicks to modify the DOM or call back to Salesforce (e.g. to get more data).
If you do not add your own JavaScript or CSS, then you are in safe territory because Salesforce tests their features well and across many browsers, and you should not need to do your own debugging. (An exception is partial page refreshes - via rerender attributes - that can be awkward to get working.) If you add your own CSS, then what matters is the combination (and priority) of your CSS and Salesforce's and that can take debugging work to get right. If you add your own JavaScript, then that needs to rely on the HTML that Visualforce generates and fit in with the JavaScript that Visualforce generates. Your Javascript also needs to be valid. Debugging is usually necessary for this case.
(A good first check on your JavaScript is to copy and paste it into http://jshint.com/. That will flag syntax errors and poor coding practices. Note that it doesn't know what JavaScript libraries you have added so results like "One undefined variable: jQuery" are to be expected for valid code.)
These instructions relate to Chrome; other browsers have the same features available but typically named a bit differently - Google. The first few debugging techniques to use are:
- When you right-click over a point in a page and select Inspect Element, you get the DOM Element shown and the CSS styles that apply shown. This lets you see what HTML/CSS/JavaScript has resulted from your Visualforce.
- If you then click on the Network tab, and click on a link or button in the current page, you will see the list of requests made to build the new page. If you click on any one of the listed requests, you will see details of the request and response header and body text. This is helpful when debugging
rerender problems.
- If you then click on the Console tab, and click on a link or button in the current page, you will see any errors in the execution of any JavaScript. If the new page has JavaScript that responds to user interactions such as clicks, when you do the click you will see any errors in that click handling JavaScript. You can add debug statements to your JavaScript that appear in this console with e.g.
console.log('index is ' + i). If you are adding your own JavaScript, this tab is a huge help.
The full set of debugging features in current browsers is very powerful and includes things like JavaScript breakpoints. So if your page doesn't work there is a lot you can do to get hold of the information you need to figure out the problem.
Google Chrome Developer Tools:
Firebug for Mozilla Firefox:
