Develop Reference

How to save changes to modifications of external site JS Code

I have recently been trying to mess around with JS code of different websites to explore the programming language further. I have been able to successfully modify the scripts of the websites but I cannot find a way to save the changes and they do not take effect. I am using the newer Microsoft Edge (Version 92.0.878.0 (Official build) dev (64-bit)).
It shows that "changes to this file were not saved to the system", how do I go about this?
(please note: this website is external and I have tried downloading the HTML and modifying it but then the site does not function)

This is the default behavior if you don't add the files to workspace. If you want to save the changes to file system, you need to use Filesystem-> Workspace.
You can refer to Edit files with Workspaces about the detailed steps of using Workspace. After Step 1: Set up, you can directly go to Step 4: Save a JavaScript change to disk.
Besides, there's another workaround to test the changed js code without saving to file system. You can refer to this answer about how to achieve this.

Windows file system is preventing chrome from saving file with special chars. Chrome is using filenames to match files on your local version with ones on the webpage.
Because of windows replacing special chars ("?") With escaped ones ("%3"), chrome is unable to match them and shows that error.
I don't know the perfect solution for that, but one of the workarounds would be to remove cache canceling string with question mark. Very nasty bug of local overrides.

Quirk while debugging Javascript app in Webstorm 8

I'm trying to debug an AngularJS app in Chrome (with the Jetbrains extension) within Webstorm 8. It's working just fine, but the only naggy thing is that the actual file that has breakpoints in it doesn't get debugged, but a readonly copy that reads as the full url of the file is (see screenshot). It works, but I cannot edit the readonly file while moving from line to line.
edit: plus, the IDE usually shows an outdated version of my JS file and I have to manually refresh it to see the correct one.
The Webstorm Run/Debug config for Javascript is really straight forward, basically just the URL to the app.
Does anyone knows how to avoid this?
Cheers

The short answer is: you can't
The longer answer is, the computer is not running the code that you see on the screen, that's just what the debugger is showing you. The computer is actually running optimized, non-human-readable Javascript bytecode, which is created when you start your JS program, after syntax is checked, namespaces are created and memory is allocated for variables etc. You can't edit that bytecode by writing JS code directly, at least not with any debugger I know of (and I'm fairly certain you can't with Webstorm specifically; I use PHPStorm and its Javascript debugger).

Such problems usually mean that remote files are not correctly mapped to local ('remote URL' not correctly set for local files in Run configuration), so the debugger can't map the files being executed to your actual sources. I'm not sure what your application looks like... But, as Angular apps structure is more or less standard, I can suggest mapping the 'app' folder to 'http://localhost:9000' in javascript debug run configuration you are using to debug your angular code

How to debug JavaScript code with Netbeans?

I am not experienced in developing web apps with NetBeans.
I created an HTML5 project with existing sources (some HTML, JS and CSS files), the import seems to be OK, but I didn't manage to debug JavaScript code, because the "Debug project", "Debug file" and "Debug test file" menu items are always disabled.
What have I missed?
PS.: I downloaded a fresh version in November 2013.

HTML5 project is always debugging and running at the same time if you run it in any browser with NetBeans connector (check the browser switcher in toolbar). So once you run project/file, if some breakpoint should be hit, it will be. Therefore debug action is not enabled for HTML5 project, because it is the same as Run action.
Basically it means you can debug JS in Chrome with NetBeans Connector, Embedded browser in IDE, Chrome on Android, Safari on iOS...

I also ran into issues when trying to debug JavaScript in a PHP project. I was using Chrome as my browser and had confirmed that the Netbeans Connector extension was installed and working in Chrome.
I could debug PHP without any issues. I could create a separate HTML5/JavaScript project and debug JavaScript without any problem. However, when I tried to set breakpoints on JavaScript code that was embedded in tags within the PHP file, I would get the little 'broken' breakpoints that everyone else references. When I selected the option to debug project, I could debug the PHP code, but the JavaScript breakpoints were never hit.
The change that I made that finally (for me) caused the JavaScript breakpoints to be hit so I could step through code using the Netbeans debugger was to remove the Javascript from the file containing the PHP/HTML code and place the JavaScript in a separate file that only contained JavaScript via a within the PHP file. Magically, I could debug both JavaScript and PHP within the same debugging session without any extra setup.
Of course, one alternative is to use the debugger within the browser, such as Chrome developer tools, but I really wanted to be able to debug everything from within the same Netbeans environment. Works like a charm now.

Never used the JavaScript debugger myself but you find here a tutorial if it has to be the Netbeans debugger. As an alternative I can recommend the JavaScript debugger from Firebug.

Use the Chrome debugger once the page is loaded in the browser.

When you end up solving cross browser compatibility you'll have to use particular browser console/debugger implementation (which may not be fancy). Before that enjoy in ChromeDevTools or FireBug :)

How can I debug a minified JS in firebug?

I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.
Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery

Beautify your script
Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
Host the beautified version and everything that you need on said web server
Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.

Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)

This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)

This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.
Get Fiddler (it's a web debugging proxy), install it, run it.
http://www.fiddler2.com/fiddler2/
(Restart browser after install to get the Fiddler extension)
If you debug an HTTPS website, check this first:
http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
If not, check this : Fiddler not displaying sessions
Find the file you want to debug in the list (Ctrl+F works)
Click on the file. Then either:
get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
or have access to a file which contains the source code (ex: from your source control)
Go to AutoResponder tab (top left pane).
Select "Enable automatic responses" checkbox.
Select "Unmatched requests passthrough" checkbox.
Drag your file from left pane to right pane (prefills rule editor at the bottom)
Set the other field with the path of your local file
Click the Save button
Reload the page and enjoy your debugging session.
Fiddler can do many more things, but this use-case answers the initial question.

Consider a Change!
Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.
Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources
Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.
One of the most extremely powerful feature,
Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that.
Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
Try It!

Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.
I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.
Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).
Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.
Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.

Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
Opera will automatically prettify minified JavaScript. Source

JavaScript debugging issue with vs2005

I encountered a strange problem today. Whenever i put a breakpoint in one of my js files, the breakpoint is not hit.
I use Visual Studio 2005 in combination with TFS.
In ie the disable script options are both disabled.
The only thing that changed is that I installed Visual Basic 6 for an old project, but I don't see how that would impact debugging via Visual Studio 2005.
Did anyone had this problem before, or better does anyone know a solution?
thx.

In order for Javascript debugging to work the Visual Studio needs to be attached as a debugger to the IE process and it needs to be able to resolve the phyiscal path of the javascript file with the URL of the same script loaded in IE.
Have you checked that when you start debugging in VS that it actually attaches to the IE process that gets spun up?
Customizer your toolbar, on the commands tab select the debug category then find the "Script Explorer" command, drag it to a tool bar. Close the dialog.
Using script explorer you should be able to find the script that ought to have the break point on. Ordinarily VS is able to combine the root path it specifies for the developer web server with the physical JS file path in order to determine what its URL would look like from the browsers perspective, it can then novate the break point from the physical file to the script loaded in the browser.

you can also use a debugger; statement in your js. IE will then prompt you to debug the script file and should give you the option to debug in Visual studio 2005/2008 if you have them.
Explained here

A collegue found the issue: the Just in time debugger was only set to handle Managed and native code, and no scripting.
I just had to re-set it in the visual studio options pane.