# Dashboard2 - template node - debugging

**URL:** <https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686>\
**Category:** Dashboard\
**Tags:** debugging, dashboard-2, ui-template\
**Created:** [27 February 2025 00:04 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686 "2025-02-27T00:04:00Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 00:04 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/1 "2025-02-27T00:04:01Z")

</div>

Need advice, what is the best way to write and debug HTML/JS code in “template node”.  
Firefox DevTools only partially helps, the generated debug links don't point to the code.  
Can version control be used?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [27 February 2025 14:50 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/2 "2025-02-27T14:50:18Z")

</div>

I presume you are talking about a ui-template node.

I take the simple way out and add `console.log()` statements to the js code. So far it has got me there ok, but it can obviously be tedious. No doubt there are better ways.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 16:32 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/3 "2025-02-27T16:32:12Z")

</div>

@Colin Same pain here 😟  
Maybe there are more ideas out there?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [27 February 2025 16:46 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/4 "2025-02-27T16:46:54Z")

</div>

Can't you simply put a `debugger` statement in the js code and open the developer tools in your browser (so that the debugger stops when your code is executed)? I have not tested it...

Although I am wondering if it works, if all code is being evualuated at once. Just try it. The proof of the pudding is in the eating 😋

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 17:56 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/5 "2025-02-27T17:56:01Z")

</div>

(so that the debugger stops when your code is executed)? But it doesn't seem to work very well. Without inserting a console.log in connection with the debug location, the debug location cannot be found in the Developer Tools. The DEbugger statement must be activated there (blue arrow at the edge) so that the JS execution is interrupted.  
But that's not really peppy. Good pudding tastes better.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 February 2025 18:10 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/6 "2025-02-27T18:10:33Z")

</div>

> [@gNeandr](#):
>
> But it doesn't seem to work very well. Without inserting a console.log in connection with the debug location, the debug location cannot be found in the Developer Tools.

Barts suggestion was to enter the text **`debugger`** in your code, where you want it to stop. Then you open devtools, trigger the template (or click the button etc) and the debugger will hit the `debugger` statement and stop.

NOTE: due to how the templates are compiled, you will only see the block scope of code.

I find it best to add `console.log('method name')` to every method or computed property i want to debug. clicking the entries in the console should take you to that particular block of code.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 18:29 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/7 "2025-02-27T18:29:31Z")

</div>

@Steve-Mcl@BartButenaers  
Bart's suggestion and also your advice with the console.log is OK.  
But the JS code only stops at the debugger point after activating the line “debugger;” as described.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 February 2025 18:33 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/8 "2025-02-27T18:33:34Z")

</div>

There should be no activating of anything!

just in case we are not understanding each other - did you actually write the word debugger in your template and press deploy AND refresh the page?

e.g.

```js
// example vue template JS code
data () {
  return {
  }
},
methods: {
   myButtonClicked() {
       debugger // <<<Write the word debugger in your code! devtools debugger should stop here when this method is called!
       // existing code
   }
},

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 18:55 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/9 "2025-02-27T18:55:58Z")

</div>

@Steve-Mcl  
No misunderstanding!

> [@](#):
>
> did you actually write the word debugger in your template and press deploy AND refresh the page?

**Yes** for the word _debugger;_ and **Yes** for deploy and **Yes** for reload the page and **Yes** having the DeveloperTools open all the time!  
_And (my) JS isn't stopped._  
And to display the code block of interest I add the console.log. That is printed on the DevTool console with a link. That link can be used to show the code block, and the debugger statement is there!

 ![Screenshot_2025-02-27_19-55-14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/4730fe8baa6e469ff5140f9cab20f51b5102ae31.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 February 2025 19:02 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/10 "2025-02-27T19:02:26Z")

</div>

Oh well. For me, in chrome, simply having the dev tools open when a debugger statement is hit is enough.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 February 2025 19:24 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/11 "2025-02-27T19:24:56Z")

</div>

In Firefox Devtools / Debugger .. you may need to have an option enabled

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91316c0d79cf4761e9516ea4316ff4bcf7c06300.png)

* * *

there is also Vue.js devtools browser addon for Firefox if you find it useful .. it allows you to see whats in Vue variables

> **[Vue.js devtools – Get this Extension for 🦊 Firefox (en-US)](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)**
>
> Download Vue.js devtools for Firefox. DevTools extension for debugging Vue.js applications.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 February 2025 20:07 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/12 "2025-02-27T20:07:33Z")

</div>

> [@UnborN](#):
>
> there is also Vue.js devtools browser addon for Firefox if you find it useful .. it allows you to see whats in Vue variables

unfortunately, unless you are running from dashboard source, this is disabled (and all the code is mangled)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 February 2025 20:23 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/13 "2025-02-27T20:23:28Z")

</div>

true yes .. i had to install an additional extension in my browser that forces vue to work in development in order to get Vue.js devtools to work.

> **[GitHub - hzmming/vue-force-dev: A tool forces Vue to run in development](https://github.com/hzmming/vue-force-dev)**
>
> A tool forces Vue to run in development

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [27 February 2025 20:49 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/14 "2025-02-27T20:49:11Z")

</div>

@UnborN Yes, the options help here to automatically make the "debugger;" statement working.

As Steve mentioned ` (and all the code is mangled)`, this is another problem. If you added a console.log to the block of under question, in some cases you can open the source, but it will not point to the problematic code position, the position of the error producing the interrupt.  
Would the Vue tools/addons help here?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 February 2025 21:14 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/15 "2025-02-27T21:14:57Z")

</div>

> [@gNeandr](#):
>
> Would the Vue tools/addons help here?

if its a syntax error in the component (ui-template code) and the page is not even loading then Vue Devtools is not going to help in this case and its not going to show you the unmangled source code .. its just a browser addon that helps you see what's in vue data and computed variables.

Here is an Example of Table created in ui-template and in the addon you can see the vue data expand them and even edit them.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/2272d084c5815406124fc1bff647d209fdb1c649.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 March 2025 21:15 UTC](https://discourse.nodered.org/t/dashboard2-template-node-debugging/95686/16 "2025-03-29T21:15:17Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.