I don´t know how is this called but I would like to be able to use this in Visual Code. Basically, what I am looking is to be able to see the flow of a function, for example: how a value changes in every “for” iteration and stuff like that. It helps me to understand better.
I tried installing some extensions but I am struggling with them. Struggling to understand what they do or how to use them.
I don´t know if I have been clear as I don´t know what is the name of this thing in Chrome and I don´t know where to start looking for something similar for the code editor.
Visual code does have a debugger if that is what you are asking? To use it, you set a breakpoint in the code . You see the numbered lines in the code editor? If you click just to the left of that it will usually add a red circle by that number. That is your break point in the code. Then if you select “run” which is going to be at the top in your visual studio editor it will give you an option to start debugging. It will run through the code, and stop at the break point you set so you can view the code
You can then use the tools “step into” which will go through that line of code at the break point, or you can select “step over” which it will move on to the next line of code in the debugger. Both options are under the “run” option as well
function sym() {
var args = [];
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
function symDiff(arrayOne, arrayTwo) {
var result = [];
arrayOne.forEach(function(item) {
if (arrayTwo.indexOf(item) < 0 && result.indexOf(item) < 0) {
result.push(item);
}
});
arrayTwo.forEach(function(item) {
if (arrayOne.indexOf(item) < 0 && result.indexOf(item) < 0) {
result.push(item);
}
});
return result;
}
return args.reduce(symDiff);
}
sym([1, 2, 3], [5, 2, 1, 4]);
What I did was put this code in a new javascript file and save it somewhere. And then click “run and debug”. But I have to choose between some options: Attach to Chrome, launch Chrome against localhost and Node.js. I chose the first one. As soon as I run this, a toggle appears in the middle top with the options I would see in the Chrome debugger, such as pause, step over next function, etc. But apart from the restart and stop buttons, they are all unclickable (grey instead of colour) and after a few seconds the toggle disappears.
If it’s pure JS code (no web APIs) then using Node.js for the debugger is the easiest.
As an aside, I would also suggest checking out the Quokka extension. It isn’t the same as using a debugger but it can be quite handy for quickly testing code. The free version does have some limitations but I still use it all the time.
I don´t know what does that mean. I just thought that because is simple on Chrome, wouldn´t be too much hassle in VS Code. I have literally one javascript file in my desktop and all I want to check is the flow of the function(s) inside.
