This guide shows you how to diagnose JavaScript issues in your browser.

JavaScript Error Example

Uncaught TypeError: $(...).not(...).draggable is not a function
at HTMLDocument. (lightbox.js:45)
at HTMLDocument.dispatch (jquery.js:4665)
at HTMLDocument.elemData.handle (jquery.js:4333)
at Object.trigger (jquery.js:4574)
at HTMLElement. (jquery.js:5284)
at Function.each (jquery.js:384)
at jQuery.fn.init.each (jquery.js:136)
at jQuery.fn.init.trigger (jquery.js:5283)

Steps

  1. Open the page in Chrome Browser to the page that has error.

  2. In the address bar in the end of the URL, before any URL anchor, add this query string parameter "debugClientLibs=true".
    For example:
    http://localhost:4502/siteadmin?debugClientLibs=true#/content/geometrixx

  3. In Chrome browser (on the top right-side), go to Tools =>More Tools =>Developer Tools

  4.  Click "Console" of the "Developer Tools" panel.

  5. The JavaScript error should be listed.  On the right of the error is a link with the file and line number where the JavaScript code is failing.  Click the file link.

  6. Now you should be on the "Sources" tab on the line where the code failed.  Set a breakpoint in the code by right clicking the line number and selecting "Add breakpoint".

  7. Refresh the page and you can start debugging the JavaScript.

Debugging Tip:
If the error or issue is in Touch UI related to a clickable button, then it might help to see all the event handlers tied to that element on the page.  Right click the button, image, link, etc and select "Inspect". In the bottom panel, you see the HTML element selected. On the bottom-right panel, you see tabs. Select the "Event Listeners" tab to see event listeners tied to the element.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy