Introducing Syntax Highlighting for the Edit Step page in Google Chrome

At Electric Cloud we have a history of using what we produce. This means I get to use ElectricCommander on a daily basis and find myself frequently creating and editing steps within the Commander Web UI. A recurring problem that comes up is how to debug a script defined in Commander that has an error. How many times have you seen an error like this:

Global symbol “$j” requires explicit package name at C:UsersnvazeAppDataLocalTempecmdrAgent/agent.QXEM7ALX703PCTRY.run-4030-27875.cmd line 14.
Execution of C:UsersnvazeAppDataLocalTempecmdrAgent/agent.QXEM7ALX703PCTRY.run-4030-27875.cmd aborted due to compilation errors.

Let’s take a look at the current UI and see if we can spot the error.

Screenshot of current Edit Step page in the ElectricCommander Web UI.

Screenshot of current Edit Step page in the ElectricCommander Web UI.

Hmm, it is pretty hard to count line numbers and reserved words do not show up in different colors. There had to be a better way, so I wrote a quick Chrome extension to use the CodeMirror project to provide syntax highlighting.

After you install the Chrome extension this is what you should see:

Screenshot of syntax highlighted edit step page.

Screenshot of syntax highlighted edit step page.

Notice how the text area now has line numbers and reserved words pop out. Line 14 is now very easy to pick out. As a daily Commander user this makes my life easier when viewing arbitrary steps.

Installation Instructions:
To enable syntax highlighting, install the Chrome extension from the Chrome web store and visit the Edit Step page for any step in your favorite procedure. Syntax highlighting will turn on automatically and defaults to the Perl language. There is a dropdown selector which allows users to change between various programming languages. Currently, the extension supports these languages: Perl, Shell, JavaScript, Python, Ruby and TCL.

Notes
1. The extension is only available for Google Chrome.
2. There is no compile time checking to show mistakes in real time.
3. The extension will only be active on web pages that match “commander*editStep*” (i.e. Commander Edit Step pages).
4. The extension will only work for ElectricCommander v4.2 and later.
5. For now the extension is in beta and is a side project of mine but I’m very interested in feedback!

Download the Google Chrome extension here.

Chrome is a trademark of Google Inc.

Nikhil Vaze

Nikhil Vaze is a Staff Software Engineer on the Electric Cloud engineering team. He is a full stack engineer and loves to hack on things. You can also find him on github and ask.electric-cloud.com. Nikhil holds a Bachelor of Science in Computer Engineering and Master of Science in Security Informatics from Johns Hopkins University.

By continuing to browse or by dismissing this alert you agree to the storing of first- and third-party cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. See privacy policy.