Enable the javascript debugger in the Page Inspector - javascript

Visual Studio 2012 comes with the very nice Page Inspector. I like it! Problem though, I haven't found how (if?) I can turn on JavaScript debugging. Could someone point me in the right direction?

In IE9 (only one time): Tools > Internet Options > Advanced tab > In Browsing category > Clear "Disable script debugging" check boxes (both) > restart IE.
In VS 2012: Run the Page Inspector ( when javascript error box opens, click No ! )
Choose from VS menu: DEBUG > Attach to process...
Select "WebBrowserServer.exe" and click Attach
In Page Inspector window click the Refresh icon.
Debugging works pretty well, but it's one condition. Don't insert any breakpoints in your code (or clear them before - DEBUG > Delete All Breakpoints). There can cause a lot of problems - from hanging and frozing to entirely crashing your VS.

Until this week, I was able to carry debugging of JavaScript in Visual Studio 2012 merely by entering "debugger" in the JavaScript function which acted as a breakpoint, and was able to step through the JavaScript code in the Visual Studio window just the same as the C# code. I did this for the past 11 months until 1 week ago. I made no changes to the default installed settings.
This was the solution suggested in the Asp.Net Forums by Rion Williams. http://forums.asp.net/t/1984115.aspx?Debugging+Javascript+in+MVC And as stated it has allowed me to properly step through my code for the last 11 months.

Related

Is it possible to change browser tab on button click in JS or TS?

I have an AngularJS web app installed on a terminal and running in full-screen mode.
Customer asked to have 2 tabs opened at the same time on 2 different views - the 2 tabs won't be active at the same time, one will be active and focused, while the other will run in background. The users need to be able to change the active tab when pressing a button in the view - like you do with CTRL+TAB on Windows. Like i said, the web app is running in full-screen so they are not seeing the tabs on top of the browser so they can't change tabs this way.
The solution must work on the latest Chrome/Edge Chromium in addition to IE11, so extensions are out of the talk.
I spent the last hours doing researches until i found this answer which says:
It is not possible - due to security concerns.
But it was posted on april 2010, so i'm hoping something has changed.
I also saw the comment that says that there might be a way to do it with the ServiceWorker API but currently we don't have it installed in our solution and i'd like to not change the structure of the project - anyway, if it is the only possible solution i could make a proposal for that.

Why did IE JavaScript breakpoints stop working from Visual Studio 2013?

Until two weeks ago I was able to set a breakpoint in JavaScript code by adding a debugger; statement. For Internet Explorer, when this statement was hit, this would cause me to automatically go back to the Visual Studio debugger.
I could optionally toggle a breakpoint for the line in Visual Studio, but this wasn't necessary, and it wouldn't set a breakpoint on its own without the debugger; statement. When a breakpoint was set in this way, it would show a red filled in circle on the line of JavaScript code.
On April 4th this stopped working.
Now if I add a debugger; statement nothing happens. If I try to toggle a breakpoint in Visual Studio, I get a red open circle. Hovering over the circle gives me the error that "The breakpoint will not currently be hit. No symbols have been loaded for this document."
I've searched for that error message, but what I have found has been about C#, not JavaScript.
I thought the problem might be something we did to our source code, so I checked out a much older version, but I still had the same problem. Our other developer started having the same problem on his main machine at the same time I did. But he has a laptop he uses less often that didn't see the problem. It was a bit behind our source control and he ran it forward one commit at a time until the present version and never saw the problem.
How do we get our breakpoints to work again? How do we get Visual Studio to load the JavaScript symbols? (or is that even really the problem?)
I've been relying on Firebug for two weeks, but I need to go back to IE because of the VS integration.
Stuff I've already looked at:
In Visual Studio, Tools -> Options -> Debugging -> Just-In-Time, Script is already checked.
In IE Tools -> Internet Options, Advanced tab, Browsing section, Disable script debugging is not checked, either for Internet Explorer or for Other.
In VS, Properties menu after right-clicking on the solution, Common Properties -> Startup project, selected Multiple startup projects, set start action on the project with our JS code. The result of this was my "Internet Explorer" button turned into a Start button that couldn't run the project - it just gave the error message "The debugger cannot continue running the process. Unable to start debugging."
Right click on the project, select Properties, go to Web -> Debuggers. The options I get are ASP.NET, Native Code, SQL Server, and Silverlight. Only ASP.NET is checked. Enabled all of the others, but nothing changed.
Cleaned and rebuilt the whole solution.
Project properties -> Build: Define DEBUG constant and Define TRACE constant are checked. On the Advanced dialog, Debug info is set to full. Not sure if that even has anything to do with JavaScript.
Debug -> Options and Settings -> Debugging -> General: uncheck Enable Just My Code
In the end after a lot of changes, I saw this error message "Ignored debugger statement in eval code at line 2600. To stop at this statement, disable Just My Code."
I had already tried the Just My Code fix, but I tried it again, and my breakpoints came back:
Debug -> Options and Settings -> Debugging -> General: uncheck Enable Just My Code
When breakpoints are triggered they show up in a special eval'ed code window that includes a copy of the code where I put the debugger statement. I think that's how it was working before. Apparently there are a few places in our code where breakpoints work no matter what - those didn't need this fix, and they don't show up in the special eval window.
I rolled back all the other changes I had made today one by one, and in the end it looks like disabling Just My Code fixes it. I had even messed with creating a _references.js because I was seeing an error from JavaScript Language Service about it, but that doesn't seem to be necessary.
Thank you to those who pitched in with suggestions, including those who posted answers and deleted them because you realized I'd already tried it. Obviously trying things more than once can sometimes be a good idea.

Get rid of [dynamic] JavaScript views in Visual Studio

Since I installed Visual Studio 2010 from scratch about 2 months ago, it behaves slightly different when debugging JavaScript code being run in IE.
When I set a breakpoint, it opens a duplicate of the view with the term "[dynamic]" in the header and marks the breakpoint in there.
When a JavaScript error happens during execution, it does the same before it marks the line of code that threw the error.
This "dynamic" view is editable but edits have no effect - they are not saved to the file.
I find this behavior pretty uncomfortable. Everytime I notice an error in the code during debugging, I happen to fix it in the dynamic view. I hit save. VS does not complain. Next I refresh the page in IE, and - bang - the changes are lost, it loads the untouched old version again.
I haven't been able to find out how I can turn these views off. Before I re-installed Visual Studio it did not do that. It would only create "dynamic" views for script found in inline script tags in HTML files.
Try this
IE > Internet Options > Settings (under browsing history) > Check for new version of stored pages : Every time I visit the webpage.
This works for me in IE10.
Other option is to open Developer tools and select cache option Always Refresh from Server as show in the image below
Try hitting CTRL+F5 on the web page. That did the trick for me.
The problem was that I had opened other IE windows from a previous debugging session, so the dynamic javascript files were still cached.
Having developer tools open - F12 - should also cause the cache files for the page to be cleared on each refresh.
Changing the encoding of the JS file in question, from a Windows codepage to UTF-8, fixes this for me.
Narrowing it down, it appears that OEM Extended ASCII characters in the file (e.g. ALT-254 which I use for a bullet) trigger the problem with the Windows codepage files.
(Visual Studio 2013 Update 5, IE11)
For Google Chrome:
Open developer tools(F12)
Open Network Conditions Tool
Select Disable Cache
I had the same problem of not being able to hit a break point in new code. And breakpoints on old code in the same page will bring up the [dynamic] version. The edited page is not reloaded. This just started for me a week ago in both VS2012 and VS2013. Using refresh page and/or Ctl-F5 did not work for me. BUT, reading this thread pointed me to using F12 to open Developer tools. Leaving that window open, while hitting refresh does the trick. Thanks guys.
1) Run the page Without Debugging (Debug-->Start Without Debugging)
2) While the web page is open in Internet Explorer, press Ctrl-F5 so
that the IE cache is cleared. Ensure IE has the focus.
3) Close IE and re-run the page with Debugging (Debug-->Start
Debugging).
This fixed the issue for me.

See what methods/events being called in JS

Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?
In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.
Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.
#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example

Dropdown is staying on the screen when I hit breakpoints in JavaScript files. Why?

I'm using Visual Studio 2008 Professional Edition SP1 & IE8. When I hit a breakpoint in a JavaScript file that's triggered when an item in a dropdown is selected the dev environment takes focus, but the dropdown list is still visible, hovering over the code. This makes it very unreadable! Does anyone have any idea what's causing this? Or how it can be fixed?
When you pause IE in the Javascript debugger, the entire process is paused.
Therefore, it cannot handle Windows messages and hide the dropdown (which is a topmost borderless window).
You can solve this by running the code (and pausing IE) after the dropdown is closed.
To do that, you can wrap your code in setTimeout(function() { ... }, 10);.
Note that that may change the behavior of the code.
The best solution is to get a second monitor and put IE on one monitor and the debugger in the other monitor.
Every developer should have (at least) two monitors.

Categories

Resources