Finding out JavaScript error on Visualforce page

 Hi All, In this post I am going to explain you all how we can able to find out the JavaScript code error which we written on visulforce page.we may use different JavaScript methods or codes for different functionality in visualforce page, while saving that visualforce page we will get only compiler error on apex tag but not on JavaScript code or other codes which we used on the pages.

To give demo I have created the page called 'JavaScriptErrorDemo' .

Below is the page:

 

CODES:

Page Code:

<apex:page sidebar="false" controller="JavaScriptErrorDemoContExt">
      <apex:form id="frm">
              <apex:pageblock title="Finding out javascript error!!" id="pgblk">
                         <apex:pageblocksection id="pgblksec">
                            <apex:inputtext label="Enter your name" value="{!pagetext}" id="text">
                         </apex:inputtext></apex:pageblocksection>
                         <apex:pageblockbuttons location="bottom">
                              <apex:commandbutton value="Execute" onclick="javascriptfunction()">
                          </apex:commandbutton></apex:pageblockbuttons>
              </apex:pageblock>
      </apex:form>
       
       
      <script>
          function javascriptfunction(){
                  var val=document.getElementById('{!$Component.frm.pgblk.pgblksec.text}).value;
                  alert(val);
          }
      </script>
</apex:page>

Controller code:

public with sharing class JavaScriptErrorDemoContExt {
     
    public String pagetext{get;set;}
      
    public JavaScriptErrorDemoContExt() {
 
    }
 
}

Page Functionality:
            After entered your name on the text field if you click execute button it will execute the java script method called'javascriptfunction' and this method will populate the text that you entered.Finding out the java script error the option will differ based on browser below I will take you to find error in all most used browsers in day today life.

Firefox: 
         Be on same visualforce page and click the browser menu options in below manner. 
                   Tools--->Web Developer--->Web Console 
         Then you can see the console footer on the visualforce page like below screen.

You can see in console there is four option
             1.Next    --->To find out logging info and error.
             2.CSS   ---->To find out CSS code error.
             3.JS      ---->To find out java script error.
             4.Logging-->To find out logging filters.

             In this four option we going to use only the JS so,select that option. if you are getting any warring message leave that. Now you not got any error so there is no syntax error on the code.But there may be any error apart from the syntax to find we need to execute the java script to execute the java script we need to click on the 'execute' button after entered the name.After clicked on the execute button you can't see any error on the console. 

             To check whether the console will throw error? we need to modify our page code.So, open our 'JavaScriptErrorDemo'visualforce page in another tab in edit mode and change the below code.

<apex:page  sidebar="false" controller="JavaScriptErrorDemoContExt">
      <apex:form id="frm">
              <apex:pageBlock title="Finding out JavaScript error!!" id="pgblk">
                         <apex:pageBlockSection id="pgblksec" >
                            <apex:inputText label="Enter your name" value="{!pagetext}" id="text"/>
                         </apex:pageBlockSection>
                         <apex:pageBlockButtons location="bottom">
                              <apex:commandButton value="Execute" onclick="javascriptfunction()"/>
                          </apex:pageBlockButtons>
              </apex:pageBlock>
      </apex:form>
     
     
      <script>
          function javascriptfunction(){
                  var val=document.getElementById('{!$Component.frm.pgblk.pgblksec.text}).value;
                  //I removed the single quotes from end of getElementById 
                  alert(val);
          }
      </script>

</apex:page>

 

 Click on save and refresh the page that you already opened with the web console now you can see the error on the console,this is syntax error so its will captured  when is get loading but some error will occur only on execution of JavaScript .You can see the error on below screen.

I think now you all are clear about finding out JavaScript error on firefox browser.The procedure will not differ for each browser but the option to went to console will differ below is the different browser option.

Chrome: 
           Tools--->JavaScript Console--->Console

IE :
            Click F12--->Console  

Safari:
           For safari first we need to enable the 'Develop menu' in menu bar.To enable fallow below steps
                Edit--->Preferences--->Advanced--->check show develop menu in menu bar
    
           Now you can see develop menu in menu bar. To view console
                Develop---> Show Error console--->Console 

I hope you all are clear about finding out JavaScript error on visualforce page.

Rating: 
No votes yet