How to debug JavaScript in the browser dev tools

Let's say I want to debug some JavaScript in the browser by setting a breakpoint and stepping through the code.  I'm using Chrome, in my case.  Where can I find that JavaScript to set the breakpoints if it is included from:

  • Module
  • Screen Action
  • Web block
  • Expression

Or anywhere else that you think is relevant?  I've looked through the various JS files in the Sources tab of the Chrome dev tools, and I've looked at the code in the script tags on the Elements tab of the dev tools.

How do I step through JavaScript code in the browser with an OutSystems application?

Hi Scott,


You should see on the training the front end course, it should help you with that.

Hugo Duarte wrote:

Hi Scott,


You should see on the training the front end course, it should help you with that.


I've been through it and through the JS masterclass.  I don't remember seeing it.  Rather than go through hours of training trying to find the right 30 seconds or minute, would you mind letting me know how it's done?

Hi 

I'm looking for the exact same information. Do you have any updates on this?

Hi,


I usually put the javascript on jsfiddle, then test it, debug it, fix it from there.

After it run smoothly, then I put it on the Outsystems.


Thanks


Hi Scott,

As you are probably aware, OutSystems generates a normal web application, so javascript debugging is no different than a normal web application.

For finding out where the javascript or css for a block is, open Chrome Dev tools and view the "Sources" tab, and the "Page" tab beneath.

The files for OutSystems components are nicely arranged in folders (see the below image of the sample for the FilePondUpload plugin).  You should be able to identify the correct script by following the folder names.

Here is a great start to using Chrome Dev tools, though I hope it is not too basic for you. 

https://www.youtube.com/watch?v=H0XScE08hy8

I hope this helps!

Kind regards,

Stuart

Thanks for your feedback.


@Stuart

I'm using Java Script inside of an expression (custom highchart). 

In this case there is no folder structure I could follow :/ 

@Toto 

That's what I'm doing currently, I was hoping for a more comfortable way... 

Markus Feuerstein wrote:

Thanks for your feedback.


@Stuart

I'm using Java Script inside of an expression (custom highchart). 

In this case there is no folder structure I could follow :/ 

@Toto 

That's what I'm doing currently, I was hoping for a more comfortable way... 


Hi Markus,


Ok great.  For javascript for configuring something like Highcharts..

Expression javascript appears in the page, you can still debug it. You have to use the "Elements" rather than the "Sources" tab.

On the Elements tab, it can be difficult to locate the script though.  However, CTRL+F will open a search panel. I usually search for a variable of function name in the script.


What I normally do when the expression gets complex enough to need debugging is put most of the javascript in the module's javascript.

Sometimes, especially when I want to use it in multiple places, I place the javascript in a separate web block's javascript section.  The javascript only webblock needs to be dropped on the page where it is used.  It will render nothing, but will include the javascript on the page.

Be careful to consider if the script has been loaded yet in your expression.  You may need to use jQuery's document ready.. $(document).ready(function() { ... });

So the expresstion becomes something like
"<script>
MyJavascriptModule.configure('#" + NamedContainer.Id + "', " + JSONSerializedData.JSON + ");
</script>"


And the main javascript like this

MyJavascriptModule = (function() {
  function configure(id, configObject) {
    // Configure stuff...
    $(id)... // do stuff to the named container
    configObject.data.map(...); // use the configObject..

    helperFunction();
  }

  // other private helper functions...
  function helperFunction() {
    ...
  }

  // expose an object with functions
  return {
    configure: configure
  };
})();

Then you are able to more easily locate and debug the javascript.

For bonus points look into "source overrides" where you can make temporary changes to the javascript in Chrome that remain even when you refresh the page.  Be careful to remove the source override when done though.

I hope this helps!

Kind regards,

Stuart