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
Related
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
When I am debugging javascript in Firefox Developer Edition DevTools, and I refresh /reload the page, it just closes the file I had open and starts blank. This is a waste of time.
1) How can I make it perform like Chrome DevTools which preserves the file and exact line location in the file even after reloading?
2) Where are file tabs in firefox debugger tools? It seems there's only a list of ALL files loaded on the page, and I have to hunt down the files one by one after each page reload. Chrome has file tabs in the debugger which persist after reload. Where are tabs in firefox's debugger?
That the wrong file is selected after a page reload is obviously a bug in the Firefox DevTools - which only happens in some cases, btw. - so I've filed this as bug 1283792 .
Support for having multiple files open at the same time is not implemented yet. It is requested (by one of the main DevTools developers) in bug 1097706.
Update:
Opening multiple files at the same time is supported in the reworked debugger UI currently available by setting devtools.debugger.new-debugger-frontend in about:config to true (and enabled by default in Firefox Developer Edition and Nightly).
have script in a frame:
now I move "debugger" from line 2207 to 2209, save and reload the frame.
Chrome debugger stopped on 2209, but shown source code is outdated.
'Disable cache' on DevTools is checked.
Helps only reloading whole page.
How do I get chrome Dev tools to show the js source correctly??
On top right of DevTools, click the "3 dots" menu and select "Settings". There you may wanna check "Disable cache(while DevTools is open)".
Also, on MacOS you can use at any moment (even with DevTools closed)the shortcut "Command + Shift + R" to force a full refresh of the page.
I often use this to debug JavaScript in IE (fiddle):
if (confirm("Debug from here?"))
debugger;
If I choose "yes", I see the prompt to start Visual Studio just-in-time debugger, which I proceed with to debug the script in Visual Studio.
Now I want to use IE built-in debugger instead of Visual Studio. I use this workaround:
if (confirm("Debug from here?"))
throw "debug";
It works, but I have to check "Continue after exception" in IE built-in debugger every time I hit throw. Also, throw is different from debugger (which just continues execution if debugging is disabled in IE options).
Is there a way to make debugger keyword to break into into IE built-in debugger (F12) rather than Visual Studio debugger?
Setting breakpoints in IE F12 tools, then refreshing the page with F5 is not an option, because the page is a postback.
EDITED. Chrome browser actually gives me the desired behavior. To see what I mean, open Chrome, hit F12 to open Dev tools, then navigate to http://jsfiddle.net/jTwsh. Click [OK] upon confirm and you should get into debugger right on the debugger line.
Suggest to disable the Just-In-Time debugger for Script; if you do not want to use it for.
See the below reference on how to enable/disable JIT Debugger:
Enable/Disable Just-In-Time Debugging
I am using IE8, there i need to start the script debugging by pressing 'Start Debugging' button or F5 under 'Script' tab in Developer Tools.
See the attached screenshot:
Don't run the website in debug. It is possible to run website in 'normal' runtime:
Right-Click on any page => View in browser
or ctrl+f5
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