debug javascript in MVC 3 View - javascript

Can we set a breakpoint in javascript(jquery) code in a asp.net MVC 3 view?
I want to debug it because I have to.
I used F12 in IE 9 but no clue.

Visual Studio doesn't play very nicely with javascript debugging, and neither does IE.
Try using Firefox's Script tab in FireBug, you can set breakpoints there and then refresh or reload the page to hit the breakpoint. It allows step by step execution.
Or in chrome, try going to sources, then with the small icon in the top left of the tab, select the script you want to debug. Clicking on one of the line numbers will set a breakpoint for that item. You will notice that when clicking refresh after doing this there are a few options. Any will do, but a normal refresh works to hit the breakpoint.

You can use developer tools of your browser.... just press F12 (chrome, ie)
must set the break points on the js source... and play with your page.
I use chrome... Chrome developer tools tutorial

Related

Chrome disabled javascript and doesn't allow to enable it

I am not able to enable javascript in Chrome. Under Chrome javascript setting the default option for "sites can use javascript" is grayed out. Even if I add website manually under "Allowed to use javascript" the website is not loading, screenshot below.
This happened while I was trying to find a solution for another issue and followed solution from this page (the top answer), so I went to Chrome Devtools > Sources and clicked on the pause button since then the javascript has got disabled. Paused in debugger in chrome?
Note: Javascript is working fine in other Chrome Profiles. The issue is with this particular Chrome Profile.
Try right-clicking the "Sites can use Javascript" option, and inspect element:
Then, remove the disabled or disabled="" attribute from whatever element the console brings you to.
The option should be enabled. Click it and try reloading your site again.
If this doesn't work, you can try reporting any problems for whatever chrome has (I use Mozilla Firefox and I know they have a help center).
Or try re-installing the browser, because some files may be corrupt (don't worry, if you have an account you can sign-in after the reinstallation and everything should be synced).

Chrome debugger not showing Javascript in aspx files

Chrome (and Canary) used to be able to show javascript source which was embedded in aspx files.
Typically, I would add a debugger; statement, save, and then load my web page in Chrome with the developer tools window open. When Chrome hit the debugger; statement, it would stop and then show the javascript source, so that I could inspect variable or step through code.
A recent change has changed this so that now, when the debugger; statement is executed, Chrome dutifully stops execution but it is unable to show the source.
Does anyone know what has changed; if there are any configuration settings which would re-enable the previous behavior; or how to make this work correctly?
Chrome version: 50.0.2661.102 m (on Windows).
I'm also seeing this in version 53.0.2763.0 canary (64-bit)
I suspect this applies to any kind of embedded script, not just aspx.
I had the same problem. When I clicked on the aspx page, under the Sources tab, I got a blank page.
What worked for me was refreshing the page in Chrome.
After that, the aspx code showed up in Developer Tools, and I was able to see , debug and search the code. This seems to be a Chrome bug.
Chrome Developer tool: html script is blank (in source) debugging tutorial

Chrome DevTools script blackboxing not working

I am trying to use the new feature of chrome devtools "blackboxing a script".
This Chrome Devtools article lists script blackboxing functionality
What happens when you blackbox a script?
Exceptions thrown from library code will not pause (if Pause on
exceptions is enabled)
Stepping into/out/over bypasses the library code
Event listener breakpoints don't break in library code
The debugger will not pause on any breakpoints set in library code.
The end result is you are debugging your application code instead of third party resources.
I have tried to blackbox the file directly by right clicking the file from source tab and everything goes right the yellow notification shows at the top of file "This script is blackboxed in debugger". Strangely none of the above listed points work, debugger goes through blackboxed script also event listeners reference the blackboxed script. I have also enabled Developer Tools experiments at chrome://flags/
With these options set i thought i would have been ok, i also have the latest chrome at this time 39.0 beta,i have no idea what i'm missing. Did anybody go through this?
Thnx!
I had the same issue. One quick and easy way is to look at your Call Stack. As a for instance, Right-Click on one of the 'jquery' functions and select 'black box' from the menu. Nothing else needed. In this example jquery.js will be step-over from that point on.
In your screenshot, I can see a breakpoint.
If you put a breakpoint, it will always break (except if you deactivate it, of course), even with blackboxing being active.
Had the same issue and used good old
have you tried turning it off and on again?
Go to developer tools settings -> Blackboxing -> Remove all entries one by one + disable Blackbox content scripts
Blackboxed again and after that this works fine.

Webstorm not refreshing modified JavaScript files

My HTML page references a few JavaScript files like:
<script type="text/javascript" src="MyClass.js"></script>
I am debugging with WebStorm using a Python SimpleHTTPServer in Windows with Chrome. I can set breakpoints in my JavaScript and WebStorm stops at them as expected.
However, sometimes when I make changes to my JavaScript and relaunch the debugger, it runs the old code, not the updated code. If I place a breakpoint, the line it stops at is out-of-sync with where I've placed the breakpoint.
How can I force a refresh?
The problem was Chrome (and Firefox) caching JavaScript - maybe this is beyond WebStorm's control. It is solved as follows:
Chrome
F12 to open the developer panel, then right-click Refresh in toolbar -> "Empty cache and hard reload"
or; F12 to open the developer panel, Settings icon bottom right, check "Disable cache"
Firefox
Install Web Developer toolbar, Disable -> "Disable Entire Cache"
or; see this accepted answer

How to modify javascript code at run time?

Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.

Categories