Learn how to use Chrome web developer tools to debug client script

12/19/2022
Jaime Requena
0

Introduction

This article will give basic instructions on how to use the tools to debug and write snippets. I will also show how to make use of the SuiteScript 1.0 API in the Console.

Debugging Client Script

Step 1: Create a client script which acts on the save of the record (below) and deploy it to the sales order record

/**
 *@NApiVersion 2.1
 *@NScriptType ClientScript
 */

define([],
    () => {

        saveRecord = (context) => {
            const currentRecord = context.currentRecord;

            let memo = 'Testing';
            let poNumber = 'PO Number'

            currentRecord.setValue('memo', memo);
            currentRecord.setValue('otherrefnum', poNumber);

            return true;
        }

        return {
            saveRecord: saveRecord
        };
    });

Step 2: Open the Chrome Developer tools

Edit any sales order record (make sure you are in Edit mode and not View mode)
Right click anywhere on the record and select “Inspect”:

The web developer tools will open on the right section of the browser:

Step 3: View your script using the tools

Click on the “Sources” tab. If you can’t see the “Sources” tab, then drag the center divider to the left.
Then on the left pane, open the “app” folder and then open “common/scripting”. You will see your script there. Click on it to open it:

Click on the line numbers where you want execution to pause:

Step 5: Save the Sales Order

The execution will stop at the first breakpoint.
Click the play button to stop at the next breakpoint.

You can use the buttons on the top right to continue execution. The current value of the variable is shown in gray text:

You can also click the “Console” tab and enter the names of variables to see their value:

Writing Snippets

For various reasons you may want to write a one-off client script and run it in the browser. One reason could be to quickly update a group of records without having to deploy a script in the environment. Here’s how:

Step 1: Create the Snippet

With the Chrome Developer Tools open, click the “Snippets” tab on the left side.
Click “New snippet”

The code for a snippet is different from a normal 2.x SuiteScript. You use require instead of define:

require(['N/record'], function(record){

});

Here is an example which simply performs an update on a sales order. Paste this code into your snippet and Save (Ctrl-S).

require(['N/record'], function(record){
	record.submitFields({
		type: record.Type.SALES_ORDER,
		id: 15135,
		values: {
			memo: 'ABC'
		}
	});
});

You can right click on your snippet file to give it a name.

Run your snippet by right clicking on the snippet file and select “Run”.

Reload the associated sales order to see the record has been updated.

SuiteScript 1.0 API Available in the Console

You can make use of SuiteScript 1.0 API in the console. For instance, you can load, update and save records. Here’s an example:

Conclusion

Do you need help with NetSuite development? Please contact us here to set up a consultation.

If you liked this article, please sign up for my newsletter to get these delivered to your inbox here.

Follow on

Jaime Requena Chief Executive Officer

Jaime Requena is a seasoned NetSuite Consultant and Solutions Architect, known for delivering WHITE GLOVE service to businesses. With 15+ years of experience and 3x certifications in ERP, Developer, and Admin, Jaime specializes in highly customized NetSuite accounts, transforming operations for 200+ satisfied customers all across the globe.

Learn how to use Chrome web developer tools to debug client script