How to View and Edit Visualforce Pages in Salesforce

Want to learn how to View and Edit Visualforce Pages?, if yes then this article is for you.

From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages and click the name of a Visualforce page to view its details, including when it was created, when it was last modified, and the Visualforce markup associated with the page.

From the detail page, you can do any of the following:

  • Click Edit to edit existing page markup.
  • Click Delete to delete the page.
  • Click Clone to create a copy of the page. You must specify a new name for the new page.
  • Click Where is this used? to view a list of all references to the page in your organization.
  • Click Show Dependencies to display the items, such as fields, objects, or other classes, that must exist for this class to be valid.
  • Click Preview to open the page in a new window.

Note: If the Visualforce page is contained in an installed managed package, you can only view the page. You can’t edit, delete or clone it.

Now lets see how can we view and edit Visualforce Pages with development mode. Now lets see how can we enable development mode in salesforce.

How to enable Development Mode in Salesforce?

To enable Visualforce development mode:

  1. From your personal settings, enter Advanced User Details in the Quick Find box, then select Advanced User DetailsNo results? Enter Personal Information in the Quick Find box, then select Personal Information.
  2. Click Edit.
  3. Select the Development Mode checkbox.
  4. Optionally, select the Show View State in Development Mode checkbox to enable the View State tab on the development footer. This tab is useful for monitoring the performance of your Visualforce pages.
  5. Click Save.

We have successfully learnt How to enable Development Mode in Salesforce. Now let’s see what we can do with it.

Viewing and Editing Visualforce Pages with Development Mode Enabled

When development mode is enabled, we can view and edit the content of a Visualforce Page by navigating to the URL of the page. For example, if a page is named vfpages, and your Salesforce URL is, enter in your browser’s address bar.

when we add apex/vfpages we are able to create new Visualforce Pages if it does not exist, or else we can edit the Visualforce Pages if it exist.

After enabling development mode, all Visualforce pages display with the development mode footer at the bottom of the browser:

  • Click the tab with the name of the page to open the page editor to view and edit the associated Visualforce markup without having to return to the Setup area. Changes display immediately after you save the page.
  • If the page uses a custom controller, the name of the controller class is available as a tab. Click the tab to edit the associated Apex class.
  • If the page uses any controller extensions, the names of each extension are available as tabs. Clicking on the tab lets you edit the associated Apex class.
  • If enabled in Setup, the View State tab displays information about the items contributing to the view state of the Visualforce page.
  • Click Save (just above the edit pane) to save your changes and refresh the content of the page.
  • Click Component Reference to view the documentation for all supported Visualforce components.
  • Click Where is this used? to view a list of all items in Salesforce that reference the page, such as custom tabs, controllers, or other pages.
  • Click the Collapse button (Collapse icon) to collapse the development mode footer panel. Click the Expand button (Expand icon) to toggle it back open.
  • Click the Disable Development Mode button (Disable development mode icon) to turn off development mode entirely. Development mode remains off until you enable it again from your personal information page in your personal settings.


We have learnt how to view and edit Visualforce Pages and How to enable Development Mode in salesforce. In next post we are cover how can we design our salesforce with the help of Visualforce Pages.

Salesforce Related:

Leave a Comment

10 + ten =