Using Chrome to Debug Client Side Errors

[chuck_warner]

Often times, when viewing a record in the instance that is not behaving as expected, the issue may be related to client side issues. For example, you may have an incident where your client scripts and/or UI policies do not seem to be processed correctly. A good give away that the issue is a client side issue, is that it will involve things like buttons not working, or the right click menus no longer appearing, or the form does not completely render.

If a client side scripting is processed as a form is loading and there are errors in the script then it can break all subsequent client side processing. Since UI policies are processed after client scripts this can break all UI policies. Checking the browser console for client side errors can be very helpful in diagnosing why UI policies are not working as expected.

For this walk through let's assume that an OnLoad client script had been created for incidents called "Test Script" with the following code:

function onLoad() {
//Type appropriate comment here, and begin script below
var myMessage = test;
alert(myMessage);
}

In this case the myMessage variable is not defined correctly so it will throw an error in the java script window causing the client processing to fail including the UI scripts. Use the example below to find out why.

Example of Debugging a Client Side Error

This example assumes that you are using the Chrome browser but the other browsers have java script consoles. I recommend you use Chrome when it comes to debugging and troubleshooting as it is pretty simple and easy to use.

1) In Chrome, bring up the record that is not showing the UI policy changes you expected

2) Go to Tools > Javascript console in the Chrome menu. Depending on which version of Chrome you are on, it may be in a different location but usually clicking the wrench icon in the upper right will get you to this option.

3) Right click inside the console tab that opens and choose "Clear Console" so that you have a fresh start

4) Reload the record that is having the issue. You can use Reload Form from the record header menu or right click on white space inside the record and choose "Reload Frame" from the Chrome menu.

5) Check for any red messages in the console. For the script example I provided above we would see the following:

6) Click on the link that is directly across from the red error. In this case the link is incident.do:1313 in the screenshot.

7) This will take you to the line of Java Script that failed. where you will see the failing line directly above a red highlighted error as shown below:

😎 Take a look at the script below the end of the current function:

addRenderEventLogged(onLoad_75d0114d47e1750067638d90f70935ab, 'onLoad Test Script');function onLoad_b5d0114d47e1750067638d90f70935ab() {

From this you can see that this was an onload script called "Test Script." You could now go to that client script and correct any errors found there. If you were not able to find the script name in the script window (perhaps due to a really long script) then you can also do a client script search where script contains the offending text. So in this case the client script filter would look like:

script contains myMessage

Client side scripts could also be coming from UI scripts or the script sections in UI policies so if you do not find the code from the error in the client scripts check those other places as well. The bottom line here is that when you have a form that is not behaving as you expect, take a moment to check the browser console. Often times it can provide clues to help you resolve your client side errors.