I am new to JavaScript (coming from c++) and asking myself whether it is possible to compile and debug JavaScript code. I tried to use VisualStudio2012 and SublimeText2 with Node.js, but in both cases, I got a compile error when I tryed to use a library (3djs).
In SublimeText2 the error message is "ReferenceError: d3 is not defined".
I got that error trying to compile this d3js example: http://bl.ocks.org/mbostock/3828981
Strangely the example worked perfectly when I opened it in some browsers..
Can anyone tell me what I am doing wrong or whether it is even possible to compile or debug JavaScript code?
(Sorry, this seems to be a very beginner question but I did not find the answer searching for some hours...)
Best regards!
node.js also doesn't compile the JavaScript (not in the C++ sense; JavaScript interpreters often Just-in-Time compilation). The main difference between node.js and a browser is that node.js doesn't try to hide errors from you.
So the first question is whether you correctly included the library in your project. For this, we need to see the source code that you use to load / import it.
If you're sure that the library has loaded correctly, then you might be triggering a bug in the JavaScript interpreter. Try to install the latest version or the lastest stable version or the version before that.
[EDIT] In HTML, you use a <script> element to include scripts in the context of the page. When using node.js, then you have to use require():
var d3 = require('./d3.js')
That said, D3.js is a client framework. It expects the standard browser environment like a DOM. It will not work inside of node.js. node.js expects modules (= stuff that you can import using require) to have a certain format.
So the simple answer is: You can't "compile" and debug JavaScript code in your IDE. You always need to create a HTML page and open that in a browser. All modern browsers have consoles, plus tools to debug and examine JavaScript, CSS, HTML and the DOM.
Related
I started up learning some basic HTML, CSS and JS and reached the point where I should be able to connect them. But when I'm trying to access the document object it just says that the document is not defined
I've tried changing the IDE, done some research on the internet and I found that it might be NodeJS, since it's more server based and not browser based, but even so how can I fix this ?
You need to open the html document directly in the browser and not run it via Webstorm, cause Webstrom thinks you are writing node and in node document is not defined.
Here's a link to the JetBrains Docs for information on how to debug vanilla js code: Docs
So. Dumb question.
I am using developer tools on chrome as essentially my IDE in the source tab. I have a JS file writing a program with no associated html/css files. Is there anyway for me to utilize the debugger for my JS file? Specifically I want to step into a function
In developer mode, select Sources tab, then navigate to your JS files in the left side. In the right panel, you can add a breakpoint to any line by pressing the line number which has a real js statement. Then you can run your application again to debug your js scripts.
The picture below is an example(Line 33 of assert.js is selected).
There are a number of different ways to debug/test your JS code, Chrome is only one of them.
QUOKKA
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
Runkit notebook
RunKit notebooks completely remove the friction of trying new ideas. With one click you’ll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding.
Hopa
Hopa is a zero config JavaScript/TypeScript runner right in your terminal.
JSComplete playground
This is a playground for JavaScript and React. You can use it to test simple code or prototype ideas. It requires a modern browser that understands ES2015 (ES6).
VSCode extensions Javascript REPL
Javascript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc.
I am attempting to inject a piece of JavaScript into a Mac application using Chromium Embedded Framework internally. I have tried using the command line options mentioned in the CEF documentation (load-extension), but I have not much success at getting any JavaScript running.
Is --load-extension supposed to load any browser extension when used with a CEF build? Or are there other things that need to be present for this to work? Are there limitations to what can be loaded here? I have yet to find a good example of using --load-extension in the wild.
This question already has answers here:
Can I use jQuery with Node.js?
(21 answers)
Closed 6 years ago.
I'm an R developer by day and I'm trying to learn to do stuff with Javascript at night. I'm very used to the REPL type environment where I can run code in the IDE where I'm working. The code I'm writing is for a web application, but I'm still in the learning stage with Javascript so I want to do exploration, practice, etc. and I'd like to do it in a REPL environment so I can try something, fail, try something else, etc.
I have installed node.js and configured Sublime Text to "build" my Javascript files via node in the CLI. However, I'd like to try using some things from jQuery. Is there a way for me to load jQuery into the node.js execution environment so my standalone script can use the necessary features?
To be clear, I'm not talking about use node.js on a server, as a webserver, any of that. I'm just using node.js as an execution environment on my PC to execute vanilla and, hopefully, slightly french bean vanilla code.
I've read that you can't source in other Javascript files but obviously a web browser loads in code from multiple sources and co-mingles them so it seems like I should be able to do something similar when executing on my local machine.
If you just want to try jQuery in a REPL environment, you can do that from the dev tool from your browser (major browsers has it called 'console' under F12 usually), no need for nodejs here, JS engines are implemented in browsers.
But if you want to use the same core functionality and syntax of jQuery, you might want to try cheerio package https://cheerio.js.org it's a:
Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
Are there any command-line Linux tools that can catch basic syntax errors and compile time errors in my Javascript files, even if said Javascript files are written for use in a web browser?
I typically code my Javascript at the same time I'm coding my server side code in say Ruby or Perl. It would save me significant time if I could partially test my client side Javascript the same way I test my server side Ruby and Perl -- on the command line, typically from within emacs. I'm not expecting to catch run time JavaScript errors on the server, just basic things like a mistyped variable name or an extra bracket somewhere or a runaway string, things that could be found before actually attempting to execute the code.
What I do now to test/debug Javascript is the usual cycle of "visit web app in browser; check Firebug or other console; back to emacs to fix errors; repeat." Doing that is certainly unavoidable for more complex types of errors (e.g. involving user and network interaction) but a garden variety syntax error could be caught and dealt with more quickly on the command line without loading up the browser.
I've looked a bit into some server side platforms like node.js, but they all seemed geared toward writing and executing server side code (so all of the client side specific bits in my code would presumably make it barf). I also found an emacs mode for javascript REPL but it doesn't seemed designed to do just basic compile checks - it basically loads the whole page via an external graphical browser and lets you monkey with it, which is precisely what I'm trying to avoid.
Things like YUICompressor effectively do a syntax check too.
This isn't a direct answer to your question as it is a GUI tool, but I'm a big fan of Aptana. It uses SpiderMonkey to compile your code in the background and give you red squigglies for syntax errors as you type. (It also does the same for HTML.) It also tries to give you intellisense for JS, but it is hit-or-miss. It is nice when it works.
Since I probably haven't convinced you to change your development environment, let's answer your question directly. Why not use the SpiderMonkey engine to throw together a command-line app that does what you're looking for? It looks easy enough to plug in. You won't even have to worry about the fact that you're guaranteed to get runtime exceptions (there will be no DOM objects in your environment) — you don't have to actually execute the script. Just call JS_CompileScript and check for success. (And then destroy the JSScript object, of course.)
Or, if you're lazy, you could try Rhino Shell, which is a command-line Java tool which executes JavaScript.
I find JSHint, + its vim plugin are very useful. Light weight of vim and still be able to track the syntax errors of the javascript. JSHint can also be used as a command line tool.
https://github.com/walm/jshint.vim
Javascript debugger with a console in chrome:
The Chrome browser has a javascript debugger can find JavaScript errors:
In Chrome click Tools -> JavaScript Console:
This is examining a JavaScript page with the following code:
var error(){
}
And it tells me what is wrong with it, unexpected '('.
Telling me I can't define a function like that on line 14 of my javascript file.
If you click on the link next to the error, it will take you to and highlight the line that has the error/warning.
I wrote quick-lint-js for this purpose. It points out syntax errors, among other things.
quick-lint-js integrates with several code editors, such as Vim and Visual Studio Code. It also has a UNIX-style command-line utility if you prefer.