Debug JavaScript in IntelliJ IDEA - javascript

How can I debug JavaScript for my website in IntelliJ IDEA without changing my build configuration?
I am able to debug the JavaScript in Chrome Console but it does not work very well.
Answer. It is really easy:

Create a new JavaScript Debug Run configuration and specify the WAMP address you normally use to open your application in browser as URL there. See https://www.jetbrains.com/help/webstorm/2017.2/debugging-javascript-in-chrome.html#d45520e154 and linked topics.
You might also need to configure URL mappings in your configuration - https://www.jetbrains.com/help/webstorm/2017.2/debugging-javascript-deployed-to-a-remote-server.html#d46122e202

First you need to add intellij plugin for chrom and install it on chrom, then on configuration debug
you need to choose run with javascript.
I can show you screenshot if you want

It is worth noting that you should have linked separate .js files for debugging. I was trying to debug JavaScript code which was within an .html file but the breakpoints were never hit. I looked later under the resources in Chrome Inspector and found out that the lines were not synchronized between the files, because for the debugger the first line was the first JavaScript line, but for the html file it was the first line of the file (DOCTYPE)

Related

I Can Only Add Breakpoints to Certain JavaScript Files in Visual Studio?

I'm having an issue where I have multiple JavaScript files, but only some of them allow me to add breakpoints within Visual Studio 2022. Files where I can't give the message "Breakpoint will not be hit. Breakpoint set but not yet bound".
I believe the issue to be that only Javascript files with methods that are called by events in the Cshtml allow breakpoints, but JS files with method only called by JavaScript don't allow for breakpoints.
Any guidance or help to understand this would be greatly appreciated. I've attached a couple of pictures.
Breakpoint able to be set, file A.
Breakpoint not able to be set, file B.
According to the following link, you can see that “For ASP.NET and ASP.NET Core, debugging embedded scripts in CSHTML files is not supported. JavaScript code must be in separate files to enable debugging.”.
Link: https://learn.microsoft.com/en-us/visualstudio/javascript/debug-nodejs?view=vs-2022
You can follow the steps in the link above to debug a JavaScript in Visual Stuido.
You might also use Chrome Developer Tools or F12 Tools for Microsoft Edge instead. See this.

Local JS files not loading/running on Heroku

I'm running a nodejs application on Heroku. For simplicity's sake, I went through Heroku's example application steps. Once the application was up and running, I created a public/js/test.js file which contained a simple alert( 'testing' ); command.
I then came back to the view/partials/header.ejs file and included the new test.js file appropriately. Obviously, all of this works as intended locally - but when I push it to Heroku I get no alert. When I check source using developer's tools I see that it found the js file, but clicking on it reveals an empty file.
I assume that Heroku must require some sort of build step for this - but I haven't been able to find a specific path to getting it working. Any help would be appreciated!
So, it turns out that the Brave browser was interfering with the javascript file. I've never known Brave to cause a problem like this (and locally Brave did not break it). The issue must have something to do with how Heroku loads some of the static files.
Hopefully posting this answer will help someone else encountering the same issue.

Chrome sources not showing a file that was generated from Typescript and has a source map

I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.
My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.
I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.
I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.
As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.
The map file itself works in Internet Explorer, but I can't really see myself developing with that.
Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?
I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk.com/TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.
It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.
For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).
Just open devTools and reset the browser.
Make sure your Angular app is up.
If your Angular app is not up, then you can't see the .ts file in Chrome. So you need to first run the Angular app.

JavaScript standalone IDE without browser?

So I have been looking for an IDE that allows me to run JavaScript just like Eclipse/VS would allow me to write Java/C#. I want to write some code and see the output on the console (possibly within the IDE itself), without having to open the browser. I know you can run JS programs from command line using node file.js. But I'm trying to avoid having to do that every time. I want to press a run button and see the results on the console. Is there something already out there. Can I configure my IDE in certain way to achieve that? Thanks in advance.
Take a look at Atom https://atom.io/ for the editor with embedded console and excellent JavaScript support (actually it's a browser inside).
Try Visual Studio Code, it is open source and free.
https://code.visualstudio.com/docs/runtimes/nodejs
Try this:
Is there a javaScript engine where I can run my code without being forced to use a browser?
A lot of alternatives of command-line and engines to try js without the need of a browser.
You can debug browser js with any jetbrains IDE, however I find chrome to be much better for debugging browser code than the jetbrains plugin. You can easily debug node by editting your debug configurations in any jetbrains IDE. Just download the node plugin https://www.jetbrains.com/help/idea/2016.1/running-and-debugging-node-js.html

How to substitute a content of certain javascript reference with local script for debugging?

I need to debug jasvascript loaded by page. Loaded page are not locally placed.
Loaded js is packed. I want to substitute it with unpacked version.
Is there any tricks or browser options to make it?
It looks like Fiddler's AutoResponder tab will do this for you.
You say you want to replace the JS with the "unpacked" version--if you just want to insert line breaks so you can step through in a debugger, the Venkman debugger has a "Pretty Print" button which does that.
It sounds like you are asking for after the application is already deployed somewhere so this might not be as helpful.
If your application already goes through a regular build script or process for debug or at least for release then you could do it there. You could leave the Javascript files as the un-minified/optimized scripts and when building for debug it just copies them over, but for release it runs them through your minifier/optimizer first before copying them over.
I know that jQuery uses a Google Compiler to package the framework up, but there are other tools that just minify the code. Also it gives you a chance to run any kind of quality checking tools (such as JSLint) on your Javascript when you already have it as part of your build process.
Other then that the AutoResponder idea from above sounds promising.
You could use Charles Web Debugging Proxy to map the requested JS file to a local unpacked JS file (or any other location). It costs money, but you can use the trial for 30 minute periods.
Firebug is a really good Firefox extension that lets you manipulate the DOM and you can see the changes as they happen. This will let you insert <script> tags to the page.
Just Edit the <head> piece of html through Firebug and insert the <script src="http://site.com/unpacked.js"></script> somewhere in the page.

Categories