46

This question is intended to complement How do I start to debug my own Apex code? as sometimes questions are asked here that could most easily sorted out by the questioner using their browser's "Developer Tools" (to use the Chrome term).

I'd put "Inspect Element", "View Page Source", the "Network" view (where requests and responses including re-rendering can be examined) and the "JavaScript Console" (for anyone adding their own JavaScript) at the top of the list. But whatever you think, please focus on what would help inexperienced web developers.

(Little of this is unique to Salesforce; if a great answer exists elsewhere then add a link to that before closing the question.)

46

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:

Image1

Firebug for Mozilla Firefox:

Image2

  • what about the case when we need to debug the Custom controllers defined for a visualforce page? What is the best way to go for it. – user10727 Aug 1 '14 at 23:28
  • 2
    @user10727 Follow the link in the first sentence of the question. Controllers are written in Apex. – Keith C Aug 1 '14 at 23:50

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.