{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2859,"path":"application-development/ui-builder/now-code-editor.md","title":"Edit code with the Now Code Editor \\(advanced feature\\)","bundle":null,"doc_type":null,"release":"australia","body":"\n# Edit code with the Now Code Editor \\(advanced feature\\)\n\nNow Code Editor is a rich-text editor like interface that supports Cascading Style Sheets \\(CSS\\), Hypertext Markup Language \\(HTML\\), JavaScript, Extensible Markup Language \\(XML\\), and JavaScript Object Notation \\(JSON\\). Use Now Code Editor to modify UI configuration, data resource configuration, styles, events, client-side and server-side scripts in Next Experience UI Builder components.\n\nNow Code Editor supports the following features:\n\n- Basic editing\n- Debugging\n- Command palette\n- Code formatting\n- Syntax checking and highlighting\n- Auto-suggestions\n- Script macros for common code\n\n## Basic editing\n\n\n
\n\nAction\n\n\n\nDescription\n\n
\n\nFormat code \\[Omitted image \"nce\\_format\\_code.png\"\\] Alt text:\n\n\n\nApplies proper indentation to the script.Keyboard shortcut:\n\n- Windows: Shift+Alt+F\n- Mac: Shift+Option+F\n\n
\n\nHighlight syntax\n\n\n\nHighlights the syntax of the code.\n\n
\n\nCheck syntax \\[Omitted image \"nce\\_syntax\\_check.png\"\\] Alt text: syntax check icon\n\n\n\nChecks for formatting errors and highlights syntax errors.- Windows: Shift+Alt+C\n- Mac: Shit+Option+C\n\n
\n\nShow suggestions\n\n\n\nDisplays a list of valid elements at the insertion point such as:- Class names\n- Function names\n- Object names\n- Variable names\n\nSelect and click an entry to add it to the script.Keyboard shortcut:\n\n- Windows: Control+Space\n- Mac: Control+Space\n\nYou can also enable or turn off **Syntax highlighting** from the **Settings** menu.\n\n
\n\nToggle comments \\[Omitted image \"nce\\_toggle\\_comments.png\"\\] Alt text: toggle comments icon\n\n\n\nComments one or more lines of code with two consecutive forward-slashes //.Keyboard shortcut:\n\n- Windows: Control+/\n- Mac: Command+/\n\n
\n\nShow minimap\n\n\n\nDisplays the minimap of the code snippet. You can display or hide the minimap option, from the **Settings** menu.\n\n
\n\nEnable word wrap\n\n\n\nEnables word wrap function in the editor area.You can toggle the **Enable word wrap** option from the **Settings** menu.\n\n
\n\nShow command palette\n\n\n\nDisplays a list of available commands for the common operations. You can execute editor commands, find and replace text, fold and unfold code blocks, toggle comments and many more tasks using the same interactive window. Keyboard shortcut\n\n- Windows: F1\n- Mac: F1\n\n
\n\nExpand editor \\[Omitted image \"nce\\_exp\\_editor.png\"\\] Alt text: expand editor icon or collapse editor \\[Omitted image \"nce\\_coll\\_editor.png\"\\] Alt text: collapse editor icon\n\n\n\nExpands or collapses the editor.Keyboard shortcut\n\n- Windows: Control+M\n- Mac: Control+M\n\n
## Debugging\n\nTo launch Script Debugger, click the Script Debugger icon \\[Omitted image \"nce\\_script\\_debugger.png\"\\] Alt text: Script Debugger icon in the toolbar.\n\n**Note:** You can add a breakpoint, conditional breakpoint, or logpoint, only when debugging is enabled and selected language is JavaScript.\n\n\n
\n\nTask\n\n\n\nDo this\n\n
\n\nAdd breakpoint\n\n\n\nRight-click beside a line number in the ruler area and select **Add breakpoint**.\n\n
\n\nAdd conditional breakpoint\n\n\n\n1. Right-click beside a line number in the ruler area and select **Add conditional breakpoint**.\n2. Enter a break condition in the editor.\n\n
\n\nAdd logpoint\n\n\n\nRight-click beside a line number in the ruler area and select **Add logpoint**.\n\n
\n\nCompare text in Diff mode\n\n\n\nUse the side-by-side view icon \\[Omitted image \"nce\\_side\\_by\\_side\\_view.png\"\\] Alt text: now code editor side by side view and inline view icon \\[Omitted image \"nce\\_inline\\_view.png\"\\] Alt text: Now code editor inline view to toggle between views.\n\n
## Code editor macros\n\n- **for**\n - Description: Inserts a standard for loop with an example array.\n - Output:\n\n ```\n for (var i=0; i< myArray.length; i++) {\n //myArray[i];\n \n }\n ```\n\n- **method**\n - Description: Inserts an empty JavaScript function template.\n - Output:\n\n ```\n /*_________________________________________________________________\n * Description:\n * Parameters:\n * Returns:\n ________________________________________________________________*/\n : function() {\n \n },\n ```\n\n- **info**\n - Description: Inserts a GlideSystem information message.\n - Output:\n\n ```\n gs.addInfoMessage(gs.getMessage(\"\"));\n ```\n\n- **doc**\n - Description: Inserts a comment block for describing a function or parameters.\n - Output:\n\n ```\n /**\n \n * Description: \n \n * Parameters: \n \n * Returns:\n */\n ```\n\n- **vargror**\n - Description: Inserts a GlideRecord query for two values with an OR condition.\n - Output:\n\n ```\n var gr = new GlideRecord('');\n \n var qc = gr.addQuery('field', 'value1');\n \n qc.addOrCondition('field', 'value2');\n gr.query();\n \n while (gr.next()) {\n \n \n }\n \n ```\n\n- **vargr**\n - Description: Inserts a standard GlideRecord query for a single value.\n - Output:\n\n ```\n var gr = new GlideRecord(\"\");\n gr.addQuery(\"name\", \"value\");\n gr.query();\n if (gr.next()) {\n \n }\n \n ```\n\n\n**Parent Topic:**[Advanced UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/advanced-uib.md)\n\n"}}