Develop Reference

Is there an HTA-like solution for modern web apps?

I have been developing an app using HTML, CSS, and JS, using the App Mode command line argument for Google Chrome. It works nice, but I would like some ability to use the local file system without manual input from the user. That is, if I want a file accessed directly, I want it automatically done, not requiring the user to load the file in.
One option is to disable web security, which I'm not doing because there is a need to use Google Chrome normally. I haven't been able to use a command line argument to create a separate instance of Chrome, either.
I tried working on an HTA, but any attempt to port the code to HTA ends in headaches. Also, it doesn't seem to enjoy the perks that Blink/Webkit grants.
I looked into Electron and other similar platforms, and it requires installing a handful of things, which is a no-go due to the computer setup.
Are there any solutions with a sort of portable app, that can be dropped in a folder with the HTML document (say, labeled index.html or main.html), and upon opening the browser it directly opens that file without having to configure anything? A sort of barebones chromium-based browser that only opens a single file, allowing use of HTML, JS, CSS, along with local file access? Kind of like HTA but modern?

The good news, is that it does exist, but it's not as "out-of-the-box" as HTA.
My team has migrated from HTA to WebView2.
The overall approach is to build a program with the WebView2 browser (you're basically building your own HTA like browser). Your javascript code can communicate back and forth with the program, which in turn has full access to local resources.
WebView2 is the Microsoft Edge Chromium browser, so you're getting the latest web tech and layouts (a big pain for HTA dev.). The program that contains the WebView2 control has full access to local files, scales, printers (without a pop-up dialog).
The approach has all the benefits of HTA (html / javascript programming, local file access, web based deployment, etc.), plus all layout and other benefits of a modern browser.
The program you'll build is very small, especially compared with the HUGE runtime of similar solutions, like Electron.
Rick Strahl has an excellent article on WebView2, and tips for building the program I'm describing. He has great advice on how to build an installer for it, including "Evergreen", which keeps the WebView2 up-to-date with the latest browser tech.
Microsoft's introduction to the technology here.
https://learn.microsoft.com/en-us/microsoft-edge/webview2/

Debugger not working in visual studio

My debugger stopped working as expected in Visual Studio Community 2015 (Update 1).
The solution I'm working on has the following architecture:
"Query" project - written with angularjs 1.4
"Login" project - written with angularjs 1.4
More back-end projects - written with c#/web-api
I run the Query project, it checks for session and redirect to Login. After the login is successful it makes another redirect back to the Query url.
Until yesterday I had no issues debugging the whole solution from VS directly.
Now the behavior is that the first time I run the "Query" project, my breakpoints get hit. After coming back from Login, no breakpoint is hit.
Both client-side projects are hosted using IIS Express.
Things I tried until now:
clean, build, rebuild the solution;
attaching to process from VS. I attached to all IIS Express processes but with no luck;
closing VS and deleting my bin and obj folders from all projects;
restarting the machine;
Also good to mention that I have set in web.config:
<compilation debug="true"></compilation>
Any hint or idea is highly appreciated.

After trying more different solutions, the only thing that worked in my case was to unload/reload the project.
Also, now the breakpoints that I set before the application runs are no longer getting hit, but if I set them after the application started then they work fine.

I can suggest some Stack Overflow answers related to this issue, maybe it helps:
New project and just importing the files into it: Upgrade to Visual Sudio 2015 and now can't hit break points in debuging
Manual check of the Symbol Load Information: Fixing "The breakpoint will not currently be hit. No symbols have been loaded for this document."
Incorrect configuration selected in the debug menu: Visual Studio breakpoints not being hit

In my case (Vs2019) the Microsoft Symbol server was causing the issue.
It was not being able to attach Local IIS.
Enabling only the NuGet Symbol server and disabling the Microsoft worked for me

Breakpoints not hit in javascript files in Visual Studio

I am experiencing some weird behaviors when debugging my MVC Web Application. Some days I experience these issues, but other days everything works fine.
The breakpoints in my javascript files are not getting hit. I get the dreaded "The breakpoint will not currently be hit. No symbols have been loaded for this document." error.
The debugger will detach from the process without me clicking the Stop Debugging button.
I have tried everything I can think of including:
Refreshing the page in IE to force the browser to get the latest version of the javascript files.
Clean / Rebuild the application in Visual Studio
Close / Reopen Visual Studio
Delete all files from bin and obj folders and rebuild
Cleaned up all old sites from my IIS Express applicationhost.config file
Installed VS2013 Update 4
Deleted / Reinstalled VS2013
Removed / Added IE11
Installed VS2015. Same behavior as VS2013
Deleted all local project files and performed a "Get Latest" from TFS
I can manually attach the debugger to an iexplore process and then I'm able to debug that specific file, but it seems like there is a different iexplore instance for each javascript file. I end up having to guess which one to use for each javascript file. To top it off, the debugger keeps detaching in the middle of me trying to find the right process to attach to. It is nearly impossible, and definitely not feasible to try and debug this way.
Our solution is in TFS, we're using IS Express and the three other developers on our team have none of the problems I have. We all have the exact same hardware.
Another clue that might help is that we are using the OWIN functionality to connect to ACS for security. If I bypass authentication through OWIN / ACS I can step into the javascript. This, however, creates other problems since the code is expecting me to be authenticated. This is not an acceptable workaround and, again, the other developers on the team are using OWIN/ACS and do not have any problems.
I'm extremely frustrated and at a loss for how to go about figuring our what is wrong with my environment. Any help will be greatly appreciated.

The JavaScript language service has encountered an error and has been shut down

Suddenly I receive this error message:
The JavaScript language service has encountered an error and has been shut down.
There is no intellisense in javascript!
What to do?

In my case I have:
Latest VS 2013 Upd.3
Latest Web Essential 2013
Latest ReSharper 8.2.1
Sometimes I see this errors on opening first JS-file after running the solution. I have spent about 2 days on it. Removing Web Essentials helps (also clean the AppData\Local\Microsoft\VisualStudio\12.0\Extensions folder:
extensions.en-US.cache
extensionSdks.en-US.cache
"WebEssentials" folder - it will contain file WebEssentials2013.pkgdef
Then I have tried reset all VS settings and it helped. For a month) Today I have updated solution from the GIT via VS Git Tools (commit contained a lot of JS and CSS changes) and have seen it AGAIN!!!
New solution steps:
Export VS settings.
Reset VS settings
Restart VS.
Check if now it has no any errors.
Import all VS settings EXCEPT Options => TextEditor.
Turn on line numbers for all languages (and if you have some other custom settings - them too)
I don't know who is to blame but I have the fresh Windows 8.1 + fresh VS 2013.
The newest solution steps:
Open the CurrentSettings.vssettings file.
Remove
C:\Users\USERNAME\JsDocComments.js|C:\Users\USERNAME\Modern.Intellisense.js
string from the file
The latest solution steps:
Since I have the laptop with the new clean system w\o this issue I have done the following:
Backed up the PC level ReSharper settings and reset all of them
Reset VS settings with export current one
Restored the PC level ReSharpe settings
Restored the VS exported settings except Options => TextEditor => JS and JS Specific
I have restarted the VS several times and don't see the error now.

Try this solution:
"I was able to fix it: Uninstalling Snippet Designer and deleting the Code Snippets folder on C:\Users\USER\Documents\Visual Studio 2012"
Taken from:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/d62506a1-4f5f-4013-bcaa-0f827325e424/javascript-language-service-has-encountered-an-error-and-has-been-shut-down

I got this after accidentally copy-pasting a large chunk of HTML into a JavaScript file. Removing said HTML & restarting VS resolved the problem.

In my case, I have Visual Studio 2013 and a Node.js project which is weirdly set up. I just created an empty one and then copied angular-seed into it. So things are not as expected by VS, I guess. I was getting the same error as in the question.
I did not want to uninstal the snippet designer, so I did two things:
I made sure all the snippets in JavaScript folder had shortcuts defined (manually modified xml files) (it was mentioned on the same page Andrea provided link for) - this alone did not help.
I noticed that JavaScript Language Service output widow had a message in it complaining about missing _references.js file. I added the file manually and added only one line to it:
/// <autosync enabled="false" />
Visual Studio stopped complaining about the service failing then. I don't know if fix 2 alone does solve the issue.
ps: I decided to add this info here because this question comes first on Google search for the error. I know it is an old one...

I encountered this issue when I opened a solitary html file.
My workaround is to first open a Solution that contains a web project and then to open a JS file within it. After this, my solitary html file opens without error.

Remove Developer Assistant extension. Work for me

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