Displaying a HTML page in Visual Studio - javascript

I am using Visual Studio 2012 and am writing some HTML and JavaScript code.
My question is this: Is it possible to display the code I write in a browser, rather than having to open up a browser and then browse to the HTML file that I have written?
Is there native support for this? Do I need an extension or something similar?
Thanks in advance

Yes, go to DEBUG-->Start Without Debugging, and it will run it and auto-open the html page in a browser for you. Or you can press Ctrl+F5

If the project you are working on is a web application, then you can press Ctrl+F5 to 'Start Without Debugging' as mentioned in JClark4321's answer.
If you are working on something that is not a web application then you can press Ctrl+Shift+W to open the file in the browser or you can just right click the file in the Solution Explorer and click 'View in Browser'. This also prevents Visual Studio from compiling the project just to view a HTML file.
Another thing you can do is simply open the HTML file and switch to Design or Split view (bottom left corner of Visual Studio when editing a HTML file).

Related

Live Edit using Webstorm 9.0

I have went through this link https://confluence.jetbrains.com/display/WI/Live+Edit as well as this question thread Webstorm LiveEdit for chrome not working and I still cannot get my Webstorm live edit to work.
I have the live edit plugin enabled, the auto reload setting on (300ms) and the jetbrains chrome extension installed. When I activate debug mode the project opens up fine in the browser but the page does not actively reload when I adjust the content or save the file. One thing I have noticed (and the above links recommend) is to make sure that Live Edit is clicked in the view menu dropdown but I do not have that option in regular run or debug mode.
Any idea how I can get this to work properly? If you need more information to solve this issue please let me know.
I also have the same problem but one alternative if you need live edit is:
Try right click on the html file (suppose index.html) and then choose the option debug index.html. Then this will generate an option at the top. So every time you click on the bug icon it will open Chrome and every change that you make on index.html will appear immediately on Chrome.
Also if you select some code in WebStorm it will appear in yellow on Chrome.
I ran into the same problem today. I'm utilizing WebStorm 2016.2.2. In addition the extension for chrome did want to connect. The following steps solved my issue:
Verify that your configuration in your IDE matched with the extension in your browser.
Copy the URL path up to 63342. Now lets go to the browser. Right click the JB extension icon.
Make sure that your extension set up matches IDE configuration like so.
Hope this helps for newer versions of WS!!!

View generated source in IE 10

I'm trying to find a way to view the generated source using IE 10. With the Chrome dev tools and Firebug I can see the HTML source post JavaScript/AJAX operations but in IE 10 the view source command and dev tools both only show the downloaded source.
I'm building a single page javascript web app and am running into an issue in the generated source that only happens in IE. Using something like ChromeFrame or punting on the issue is not an option. I need to find and fix the root issue that is causing it in IE.
Do you all know of a different set of dev tools or a toolbar that is produced for IE 10 that will allow me to inspect this elusive generated html?
Thanks!
Just press F12. If the DOM was manipulated via AJAX, you'll need to use the blue refresh button per the comments below.
I use alert(document.documentElement.outerHTML) to achieve this

Open HTML file in Mac's Text Edit from a web browser

I'd like to use Javascript (or perhaps some more suitable script?) to open an HTML file in Text Edit (I'm on a mac)
I have a local web page made using Text Edit with different tabs that link to more Text Edit files on the page.
I'd like some way of quickly opening the tabs in Text Edit from my browser, then I could edit the HTML files easily in Text Edit and when I refresh the browser it will display my newly edited tab.
Pretty sure this should be simple but I'm a total beginner at Javascript and apart from going through the W3Schools tutorials, I have no knowledge of JScript per se.
Thank you for any help with this in advance.
I don't think TextEdit has a web listener of that sort, like Twitter for Mac has for Safari. I think you would need AppleScript to be able to do this, and that would only be on your local machine.
...wat? Just get a good text editor. I recommend Sublime Text 2 or Espresso.

Changes to Javascript files don't take effect in VS

I have a web site being opened in Web Developer. Whenever I make a change to a JS file that is a part of the site and run the site in WebDev, the changes do not take effect.
Using the IE tools, you can see the JS file does not have the changes made to it. Closing and re-opening VS or refeshing the page the in IE does not work.
Any ideas? I'm stuck and it seems a rather silly thing.

"No symbols loaded for the current document" while debugging JavaScript in Visual Studio

I'm working on a .NET 3.5 website, with three projects under one solution. I'm using jQuery in this project. I'd like to use the Visual Studio JavaScript debugger to step through my JavaScript code. If I set a breakpoint in any of the .js files I get a warning that says:
The breakpoint will not currently be hit. No symbols have been loaded for this document.
How do I fix this? I'm guessing that Visual Studio is having some trouble parsing through some of the jQuery code. I will try to replace the minimized version of jQuery.js with the expanded version, but I don't think that will fix it.
I was experiencing the same behavior in Visual Studio 2008, and after spending several minutes trying to get the symbols to load I ended up using a workaround - adding a line with the "debugger;" command in my JavaScript file.
After adding debugger; when you then reload the script in Internet Explorer it'll let you bring up a new instance of the script debugger, and it'll stop on your debugger command let you debug from there.
In this scenario I was already debugging the JavaScript in Firebug, but I wanted to debug against Internet Explorer as well.
Make sure you turn on script debugging in your internet options. And if you think it's on, double check it.
I had the same issue, but I solved it by changing my browser settings in Internet Explorer. Go to menu Tools -> Internet Options, select the Advanced tab, then make sure that both "Disable Script Debugging (Internet Explorer)" and "Disable Script Debugging (Other)" are unchecked.
Also, I needed to set Internet Explorer as my default browser, which is normally set as Firefox. To do that, in Visual Studio just right click on any browseable file in Solution Explorer and select "Browse With..." Select Internet Explorer and click "Set as Default".
I'm not sure if there's a way to get debugging running with other browsers, but it wouldn't surprise me if Visual Studio only plays nice with Internet Explorer.
Also, you may need to do "Attach to process" and add IExplorer.exe to get the debugger to start.
I would suggest using FireBug for JavaScript debugging. Give it a spin :)
I finally found the answer to this I think.
When you attach your debugger to the iexplore.exe process, you need to make sure you select "Script" as one of the debugging choices.
It's the button in a red box here: Screenshot of Select Button in Attach to Process Window
Then on the next screen, choose Script: Screenshot of Select Code Type window
This will warn you that you cannot debug Managed and Script at the same time, but that should be fine because your managed code is your server code and you attach to the web process (aspnet or w3wp) instead.
You'll know you did it right because VS 2008 will load ALL the script documents pertaining to that page (inline stuff, eval stuff, etc.) in Solution Explorer.
You'll have full access to the DOM, the immediate window will work, etc. It's pretty slick.
One other thing you might look for is a syntax error in your JavaScript code. That is what happened to me today. No symbols would load because I had one too many parentheses in my code. The IntelliSense barely registered the error. Once I fixed the syntax error, everything worked normally.
All of these answers are correct, but there is one more thing to check. Until yesterday I was always able to debug my JavaScript code from inside of Visual Studio (2012). I had added a Silverlight project to the solution, which turned on the Silverlight Debugger. This was my problem.
On the property page for the web application -> Start Options -> at the bottom of the page be sure that "Silverlight" is unchecked. Actually, I have only ASP.NET checked and now the debugger goes through Visual Studio.
Unchecking it and now the debugger stops on the "initialize" function as I wanted.
The solution for me was to update the IE from version 9 to 11. Hope it helps to someone. Peace!
You have to wait for the IDE to parse the JavaScript code. Just wait a while and you should see the JavaScript code change color. You will then be able to add breakpoints.
I had the same annoying issues on Visual Studio 2013, and JavaScript development without a debugger is just suicide.
All I did to fix it was to right click the break point red dot -> Disable Breakpoint and then right click again -> Enable Breakpoint.
This made the debugger work on JavaScript like a charm again.
This can also happen when your solution has multiple web projects, even if they're being served from a different ASP.NET Development Server (WebDev.WebServer40.exe) instance on different ports.
If running two or more web projects within your solution and you have multiple script files with the same name at the same place in different webs, the development web-servers may serve up the wrong file, causing this problem.
In my case, deleting the extra copies resolved the problem.
I sometimes have this problem with external JavaScript files - it is caused by the browser cache holding onto an old copy of the file. Forcing a refresh of the page linking to the JavaScript code solves the issue in this case.
Of course, make sure your debugger is attached to the correct browser process. ;)
This is perhaps glaringly obvious, but I stumbled over this for a second, so perhaps others will too. I didn't have Internet Explorer set up to handle HTML/HTTP, and hence it was not launched when I pressed the run button in Visual Studio.
Instead, I was starting Firefox. I went to Start Button | Default Programs, set all the defaults for Internet Explorer, and then debugging started working in Visual Studio for me without any other fuss.

Categories