How can I make my own debug using Visualforce page / javascript in salesforce?

Hi Mohit,

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).

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.