Accessing the JavaScript Console in various browsers


Description

 

Description


It may come about, either due to a request by the Developer team or during routine troubleshooting, that the need may arise to run scripting commands or functions directly on the ServiceNow form displayed on screen.  This is usually done through the JavaConsole which is part of the Developer Tools in most popularly used browsers.  The following article will show how to access the JavaScript console within the Developer Tools in four of the major browsers as used as well as access the main form which will most often contain the forms and fields you may want to check or manipulate through the JavaScript console.

Procedure


The following details the steps needed to access the Developer tools for the four most popular browsers as used by TSE's and other users.

Google Chrome

To open the JavaScript console in Google Chrome and access the main frame as used in the ServiceNow platform, use these steps:

  1. Click the View menu at the top of the Chrome menu.
  2. Select the Developer option which should be found in this View menu.
  3. In the Developer sub-menu that appears, select the JavaScript Console option.
  4. This should open the JavaScript Console as necessary.
  5. Click the Clear console button to clear out the unneeded, previous messages in the console.

This should then display the JavaScript Console in the browser window in which direct commands and JavaScript functions can be issued to the current frame.

To submit commands directly to the main frame used by most forms in the ServiceNow system, you will probably need to perform one additional step:    

  1. From the frame selector pull down field (to the right of the clear console button), select the option titled gsft_main.

This should then set the current frame to the gsft_main frame which is the main ServiceNow frame used in most record types.

 Javascript console in Google Chrome

Firefox

To access the Developer tools in the current version of the Firefox browser the following steps can be performed:

  1. Ensure the form is currently displayed in the browser for the field you want to test.
  2. Click the Tools menu.
  3. Select Web Developer from the pop-up menu that appears.
  4. From the sub-menu that displays, select Web Console.
  5. The console should appear, but by default, if you intend to paste the script (rather than type the script) into the instance, you will need to type the string allow pasting into the console text field and press Enter.

As with most other browsers, you may need to change the active frame in which commands are submitted to the gsft_main frame which, for most forms in the ServiceNow system, contains the data and objects of a record.  To change the active frame, perform this additional step:

  1. To change to the gsft_main frame, type the following in the browser window: 
    cd("#gsft_main");

 Javascript console in Firefox

Internet Explorer

To access the Developer tools in the Internet Explorer browser, follow these steps:

  1.  Ensure the form which you want to manipulate or issue commands to is found in the active browser window.
  2.  Select the Developer Tools menu in the browser window.
  3.  Select the Script tab in the Developer Tools menu.
  4.  On the options to the right, select the Console option.

Internet Explorer 11 Console Window

You will most probably also need to change the current active frame such that it is associated with the gift_main frame which is the anchor frame used by most ServiceNow record types.  To do this, the following additional step should be followed:

  1. Once the Console is open, type the following command in the text input area to set the frame to be the main data frame usually used in most ServiceNow forms:
           cd(["gsft_main"])
 

Microsoft Edge

To access the Developer tools in the Microsoft Edge browser, follow these steps:

  1. Ensure you have the browser tab open showing the form you want to manipulate or issue commands to.
  2. Tap the F12 key on the keyboard.  This should cause the Developer Tools window to appear.
  3. Click the Console tab to open the console.

To set the frame to the main_gsft frame which is the main root frame used by most ServiceNow forms, perform the following additional step:

  1. To select the specific frame you want to work with, click the Target pulldown menu and select the option for gsft_main.

 

Safari

To access the Developer tools in Safari, you will first need to ensure you have the Developer tools in your application menu.  If you do not find a Developer menu that can be selected in the menu bar, first perform these steps to allow access to that menu.

  1. Click the Safari menu option in the browser's menu.
  2. Select the Preferences menu.
  3. A Preferences dialog box should appear.
  4. Select the Advanced tab in the Preferences dialog box.
  5. Click the checkbox labeled Show Develop menu in menu bar.
  6. Close the Preferences dialog box.

After ensuring you have access to the Developer menu, perform these steps to open the JavaScript console:

  1. Click the Develop menu in the browser window.
  2. Select the option Show JavaScript Console from the menu that appears.

To change to the main frame which is usually required when working with forms displaying data in the ServiceNow platform, perform the following additional step:

  1. Click the selector on the far right side of the input area of the console which by default will read Main Frame.  From the pull-down menu, select the option gsft_main to set the active frame to be the main data frame for most record types.

Javascript console in Safari

Additional Information


Each of the major browser types includes articles and links providing detailed information about the features.  The following are links to the general pages for each of these major browsers:

Google Chrome

https://developers.google.com/web/tools/chrome-devtools/

Microsoft Edge

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide

Internet Explorer

https://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Firefox

https://developer.mozilla.org/en-US/docs/Tools

Safari

https://developer.apple.com/safari/tools/