With development mode enabled, you can view
and edit the content of a page by navigating to the URL of the page.
For example, if a page is named HelloWorld, and your Salesforce instance is na3.salesforce.com, enter https://na3.salesforce.com/apex/HelloWorld in your browser's
address bar. Development mode also provides you with a special development
footer to edit your Visualforce pages and custom controllers, as well as monitor Visualforce performance.
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 (
) to collapse the development mode footer
panel. Click the Expand button (
) to toggle it back open.
- Click the Disable Development Mode button (
) to turn off development mode entirely. Development mode
remains off until you enable it again from your personal information
page in your personal settings.
About the View State Tab
The
view state of a web page is composed
of all the data that's necessary to maintain the state of the controller
during server requests (like sending or receiving data). Since the
view state contributes to the overall size of your page, performance
of a page can depend on efficiently managing the view state. The View
State tab in the development mode footer provides information about
the view state of your
Visualforce page as it interacts with
Salesforce.
To enable the View State tab:
- From your personal settings, enter Advanced User
Details in the Quick Find box, then select
Advanced User Details. No
results? Enter Personal Information in the Quick
Find box, then select Personal
Information.
- Click Edit.
- Select the Development Mode checkbox if it isn't selected.
- Select the Show View State in Development Mode checkbox.
- Click Save.
The View State tab is composed of folder nodes. If you click any folder, a pie chart with a
Content tab appears. This chart displays the folder's child Visualforce custom controllers, Apex objects, or fields. You can
see which elements contribute to the parent's overall size by hovering over pieces of the graph.
This is the same information as the individual text nodes. The chart requires Flash version 6 or
greater enabled on your browser.
Salesforce allows
Visualforce pages to have a maximum view
state size of
135 KB. The View State tab shows you which elements
on your page are taking up that space. A smaller view state size generally means quicker load
times. To minimize your pages' view state, you can optimize your
Apex controller code and remove
any superfluous
Visualforce components
used. For example:
-
If you notice that a large percentage of your view state
comes from objects used in controllers or controller extensions, consider refining your SOQL
calls to return only data that's relevant to the Visualforce page.
-
If your view state is affected by a large component
tree, try reducing the number of components your page depends on.
For more information on how to improve
Visualforce using the View State tab, see
Best Practices for Improving Visualforce Performance.
The View State tab contains the following columns
(in alphabetical order):
% of Parent |
The percent of the overall size that the custom controller, Apex object, or field contributes to the parent. |
Name |
The name of the custom controller, Apex object, or field. |
Size |
The view state size of the custom controller, Apex object, or field. |
Type |
The type of custom controller, Apex object, or field. |
Value |
The value of the field. |
The
Name column contains nodes
defining the various parts of your
Visualforce page. They are (in alphabetical order):
Component Tree |
This represents the overall structure of your page. Its size
is affected by the number of components you have on the page. Generally,
fewer components means a smaller component tree, which could result
in faster load times. You can see how much of your view state size
is made up from the component tree by clicking the View
State folder. |
Internal |
This represents the internal Salesforce data
used by your Visualforce page. This can't be controlled by developers. You can see how much
of your view state size is made up from internal elements by clicking
the State folder. |
Expressions |
This represents the data used by formula expressions defined
in your Visualforce page. |
State |
This folder contains all the Visualforce custom controllers, Apex objects, or fields. By expanding the child Controller and Controller
Extension folders, you can see each object that's on the page, its
fields, and the value of those fields. Generally, these are dependent
on your Apex controller logic. |
View State |
This folder contains all the nodes. By clicking on it, you
can find overall information about your Visualforce page's view state. The Capacity tab tells you how much of your allotted
view state size is being used. If you exceed that amount, the graph
will also tell you how many kilobytes you've gone over. |