Run jQuery in VSCode debug console?

Hello,

tl;dr: is there a way of running javascript code that includes jQuery in the debug console of VSCode, for syntax debugging purposes?

This might be a stupid question, as I have mainly worked in the Codecademy courses and I am just starting making my own projects.

I use Visual Studio Code. I am making a project composed of 3 files, .html, .js and .css.
In my project I am using some jQuery, it is properly referenced in the .html file, and if I run the project in the browser everything works (including the jQuery code).

However if I run the javascript file in the debug console of VS Code, I get the following error:

ReferenceError: $ is not defined

I imagine this is because jQuery does not get referenced in the .js itself, and because of that VS Code has no idea what I am saying. Is this correct?
Is there something I can do, or some extra package I can install, that allows me to run the code in debug console?
The reason I would like to do this is that the console gives me exact line+description of the error, which makes fixing syntax errors and typos a breeze.

1 Like

does the debugger use nodeJS? Your assumption sounds reasonable, so then the first thing i would do is google:

https://stackoverflow.com/questions/48457867/referenceerror-is-not-defined-when-debug?rq=1

1 Like

Ok, venturing off the Codecademy environment into real-life code editors is hard :’(

Thanks for the help! I followed your advice, and following that and other posts I ran an “npm install jQuery” (I already had Node.js v8.10.0 installed because I have been dabbling to make some Alexa skills).
Now I can run code through the console and it will not report jQuery syntax as errors, YAY!

BUT. I cannot import and export modules anymore. A quick google seems to say Node.js is not compatible with ES6 modules.

New question: how do I choose whether I use Node.js for a project or not? I honestly have some trouble understanding what node exactly is, which is why I have no idea how to use it or not use it once installed.
I do not have a computer science background, so I am having trouble because I do not understand the problem enough to look for information and a solution.
Even just an indication of what sort of topic I should look for to get a better understanding of all this would be immensely helpful.

In short: when I start a project, how can I decide whether to use node or not, in order to be able to use ES6 features that are not usable in node yet? Does jQuery require node?

1 Like

And I do not think I changed anything, and it’s back to reporting
ReferenceError: $ is not defined
:sob:
I have witnesses to the fact it had stopped doing it. So now I cnanot debug jQuery AND I cannot use modules. :tada:

1 Like

Did you also associate $ with Jquery? As mentioned in the stackoverflow answer

if you can’t use es6, why not use es5 for the moment? You can use require it seems:

https://nodejs.org/api/modules.html#modules_require

which is also mentioned in the stackoverflow question, so you should be able to use that for import

There isn’t a simple answer to that question. nodeJS is one of many options for back-end web development, some people dislike it while other people like it. What is your project?

i can understand it feels like drowning when going on your own after codecademy, all these tools and complicated setups, it takes time and persistence to go through it.

freecodecamp has an understandable explanation of what nodeJS is:

Node.js came into existence when the original developers of JavaScript extended it from something you could only run in the browser to something you could run on your machine as a standalone application.

source

javascript used to be able to run only in the browser (how that happened is a different story altogether), until someone wrote code (an engine), to run javascript outside the browser. Each browser also has its own JS engine. (js engine = term we used to indicate what you need to run JS code)

as for jquery, its unrelated to node. Given Jquery runs inside the browser, its just a library to make interaction with the web page easier (in pure JS, its more tricky)

The problem you then run into is when you have to debug jquery code with something that is power by node.

1 Like

nodejs is your javascript interpreter
I imagine your debugger is nodejs, and what you’re seeing is some fluffy graphical in-between thingymajig.
If you’re running javascript outside a browser then you’re probably running it with nodejs.

Your editor is just that. An editor. Writes text. Doesn’t run code. Your editor is not your whole environment. To run it, you feed it to nodejs.

Syntax errors are when your code can’t be read. Doesn’t match the patterns that the language defines as valid code. That means it doesn’t run at all, you can’t use a debugger for this. Syntax errors are generally trivial, it’s like bad spelling.

To use es6 your code first needs to be translated to something nodejs can read. There are separate programs that do this, look into babel.

Oh and if you’re writing code for the browser then run it in the browser instead of in nodejs, in which case your question is moot because you just wouldn’t.

1 Like

I understand a bit better now, thanks a lot to both!

I definitely had not grasped the concept that it is not the editor running the code, but node.js
And yes, my project will be run inside a browser, so I was going at it the wrong way.

As soon as the codecademy kiddie-pool is removed and one tries doing things “for realsies”, swimming suddenly gets a lot harder!!! (but more fun, too. If you like being frustrated)

1 Like

You can set breakpoints (or whatever it is people do with debuggers) in chrome/firefox/probably some others too, probably no different from what you were looking for.
You still need to transpile to an older javascript version - especially if anyone other than you is to view/run it. Or, if your code runs as-is and you’re the only one then I suppose there’s no reason to care.

1 Like