Syntax Highlighter For JavaScript Stack Traces - jsStack.js

jsStack.js is a jQuery based syntax highlighter for JavaScript stack traces that enable you to highlight the column, line number and file name with your own styles.

See also:

• Highlight .NET Stack Trace In Exception - jQuery stacktrace.js

How to use it:

1. Download and put the jsStack.js after the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jsStack.js"></script>

2. Wrap the JavaScript stack traces in the pre or code tag.

<pre id="example" class="stacktrace">
jsStack.js:93 Uncaught ReferenceError: jQuery is not defined
    at jsStack.js:93
index.html:26 Uncaught ReferenceError: $ is not defined
    at index.html:26
</pre>

3. Initialize the jQuery jsStack.js pluglin.

$('.stacktrace').jsStack();

4. Apply your own styles to the JavaScript stack traces.

pre {
  padding: 20px 10px;
  background-color: #333;
  color: #ffffff;
}

.st-methodName {
  color: #70c9ba;
  font-weight: bolder;
}

.st-column {
  color: #f8b068;
}

.st-lineNumber {
  color: #ff4f68;
}

.st-fileName {
  color: #85dbff;
}

5. You can change the default CSS selectors by overriding the options on init.

$('.stacktrace').jsStack({
  method: 'st-methodName',
  file: 'st-fileName',
  line: 'st-lineNumber',
  column: 'st-column'
});

Changelog:

2020-02-24

• XSS Fix

2018-08-23

• Update jsStack.js

---

This awesome jQuery plugin is developed by elmahio. For more Advanced Usages, please check the demo page or visit the official website.