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?
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.
@Colin Same pain here 
Maybe there are more ideas out there?
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 
(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.
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.
1 Like
@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.
1 Like
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.
// 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
}
},
1 Like
@Steve-Mcl
No misunderstanding!
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!
Oh well. For me, in chrome, simply having the dev tools open when a debugger statement is hit is enough.
In Firefox Devtools / Debugger .. you may need to have an option enabled
there is also Vue.js devtools browser addon for Firefox if you find it useful .. it allows you to see whats in Vue variables
1 Like
unfortunately, unless you are running from dashboard source, this is disabled (and all the code is mangled)
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.
@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?
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.
1 Like
