I have the problem that the chrome debugger for JS doesn't stop every time I execute one certain function. I tried debugger; and also setting breakpoints where I want the code to stop by putting a blue tag on the gutter next to the line on the left.
any ideas why this happens?
Without a clear reproduction plan, it is very hard to tell why your breakpoints are not hitting.
But, one surest way of stopping on a line is writing:
debugger;
to the location where you want to stop. Without any blue signs on the gutter, the debugger will halt.
NOTE: Be sure to clear all the debugger; when you are done with it.
More info is here
What I found worked was to set my breakpoints using the suggestions above, then in the extension's console run:
location.reload(true);
This re-opens the extensions, set off my breakpoints and allowed me to debug!
It appears that the problem is related to the debugger loading after the extension, thus not capturing the breakpoints. Hope that helps!
I had an issue with breakpoints being hit that I just resolved.
Breakpoints within javascript in the html were not being hit, although I could set and hit breakpoints in included Javascript files.
I found that the problem was that the source file was included twice. The base html page (not dynamically included) has the sourceURL tag in it. This caused the same javascript to exist twice in the source pane, causing the issue.
I removed the "sourceURL" tag from the base html page, and breakpoint resumed working
For me this appears to be a bug in chrome - nothing would cause a breakpoint to be hit, not even debugger. I had to close and re-open Chrome, and then my breakpoints worked.
Also, it's possible that breakpoints are disabled. You can toggle this in the debugger or by pressing Ctrl + F8
Maybe you add your target file to blackbox, so debugger could not be triggered on it.
solve:
ref: https://developer.chrome.com/devtools/docs/blackboxing
Had you add folder to workspace accidentally?
If yes, your devTool breakPoint would stop work on this file.
After I remove folder from workspace, breakpoint feature is back!
With client solutions like angular js, the modules and controllers are picked up independent of the file name. Most probably you would have created a backup/copy of file in the same folder as the actual file you are debugging. This might be the js file getting called instead of one you intended. You can delete that file and it should work fine.
I found that code referenced by a tag with the async property inside of it don't stop at breakpoints in developer mode.
This may sound dumb... but it worked for me... Simply closing and re-opening the browser restored JS debugging functionality.
to test your function debug point you can call that function right from console.. it will call and hit your breakpoint
Check if your function is called properly. For me, I resolved the problem by conceptualising the flow of my program and found out that the function calling had some errors. After figuring that out, it was easy to continue.
I had the same problem and it turned out that reason was that I had enabled bundle, i.e.
in the BundleConfig.cs I had BundleTable.EnableOptimizations = true;
When I changed it to BundleTable.EnableOptimizations = false; it worked.......
If you are using the VS, check if configuration is DEBUG. When is Release the MVC minify the JS.
Related
When debugging JavaScript code using Chrome Developer Tools the debugger pauses on code where breakpoints are not set. I don't have the Pause on exceptions feature enabled, and there definitely are not breakpoints set (see attached image).
I asked a similar question before which was helpful but didn't quite solve this issue (previously I had the Pause on exceptions enabled). In the example below I swapped out the minified version of kendo.all.min.js for the unminified version, which allows me to see where the script execution is being paused, but I don't know why it is being paused. This happens a lot with jquery.min.js too.
I fixed my breakpoints problem by clicking the "Restore defaults and reload" button located in the “Settings” section. To find the button: In Developer Tools click the cogged wheel next to the top right three vertical dots. (Note: If using older versions of Google Chrome, click on the top right three vertical dots and then select “Settings F1”). The button “Restore defaults and reload” is at the bottom right.
Also note that it really restores defaults - you lose all previously saved breakpoints and any files you have open in Developer Tools will be closed.
I got this solution from: Chrome javascript debugger breakpoints don't do anything?
Accepted answer to Import/export Chrome devtools breakpoints & settings between computers reminded me to check "devtools-on-devtools" and in the DevTools' inner Application Local Storage remove the faulty element(s) of the JSON list value for key breakpoints to fix my same issue without resetting everything.
Later it happened again, so I wrote this console snippet:
((stores, matchKey, removeMatchingRegExp, dryRun)=>{for(let store of stores){
let r = JSON.parse(localStorage[store]), l = r.length;
r = r.filter(b=>!b[matchKey].match(removeMatchingRegExp));
if(!dryRun) localStorage[store] = JSON.stringify(r);
console.log(`${dryRun ? 'Would' : 'Did'} remove ${l - r.length} entries from ${store}:`, r)}; return 'OK'})
(['breakpoints', 'domBreakpoints'], 'url',
new RegExp('^https?://example.com/script.js$'), true)
Note:
Provided without warranty: Use at own risk. Backup your data.
Edit it - at least the RegExp argument - to suite your needs.
The last-most boolean should be false to disable dryRun.
Outer DevTools must be reopened for effect.
I was able to resolve this by updating Chrome. I don't think the version matters, just the process of updating resets all of the breakpoints that have been stored in the cache.
F8 has two functionalitys. 1. Skip ot next Breakpoint, 2.stop wherever the Browser is executing code. This works even if you have no breakpoint set. For example spamming F8 when you forgot to deactivate breakpoints might cause the browser to stop anywhere.
When you go to the debugger shortcuts you can see that F8 has the functionality to Pause / Continue. But it sadly seems like you can't split them on two different keybinds.
Since I know this feature I never ran into this "bug" anymore.
I'm posting this answer in case it will help someone who, like me, missed an important clue as to the cause of the phantom breakpoint behavior. In my case, it was "user error" --mine. The root cause was a forgotten "debugger;" statement in a JavaScript file that was itself generated from TypeScript. I had removed the debugger; statement from TypeScript locally, run and tested without issue from localhost. But I had pushed the version with the statement to remote and it built and released to our dev site with the statement present. The dev site build excludes the TypeScript source files. When the debugger statement was hit, Chrome tried to load the .ts source and displayed "Could not load content..." I just assumed it was at a breakpoint (I'd set many during testing). And when I saw "No breakpoint" I assumed Chrome was experiencing the issue addressed in this thread. If I'd bothered to look in the Call Stack trace, I would have seen the source code line in the .ts file and pretty quickly figured it out. Here's a screenshot:
just disable the cache and reload the page, the breakpoints will show up again
My Firefox automatically updated today to version 15. There is now a built in javascript debugger.
Can somebody point me to a useful page that explains how to get to it and optionally how to use it?
I have firebug installed - does that override it?
I have found something that says CTRL-SHIFT-S is the short cut key for it, but this seemingly does nothing.
If, like firebug, I need to set a breakpoint, how do I do this?
look here at the bottom of the page at the unresolved issues... Page reload does not start the debugger...
You can go to Tools / Web Developer and the Debugger for example.
Yes firebug seems to remove the source editor, try disabling it shortly then view the source and you should be able to add breakpoints.
I'm wondering if it is possible to step through HTML and JavaScript Code in VS2010 ? I have a project in which I have an HTML file with Javascript inside it...I can't set a breakpoint on the HTML and although I can set a breakpoint on the Javascript it will not pause when I run the project.
Thanks
you can't debug HTML. If you want to debug javascript code that is embedded in the HTML, add a line
debugger;
inside the script tag. The browser will stop and let you debug it from there
As far as i know, you can't set breakpoints in/on HTML code, why would you. You can step through JavaScript code in IE, if you allow debugging of client scripts in the internet options of IE. For any other browser you will need some other JavaScript-debugger, something like Firebug.
If you are sure you have the javascript debugger attached, you can put a simple debugger; statement in your js which will cause it to break. You will have to have script debugging turned on an VS attached to your IE process. You could also use the IE Dev Tools JS debugger.
I've been using Firebug to debug some javascript I have on one of my pages. Recently it has started hitting non-existent "break points" at seemingly random spots in my javascript. It seems like most of these points are in third party libraries like jQuery, but it also stops on custom javascript.
I'm not seeing any errors at these lines and I definitely don't have break points there. Can anyone think of why Firebug would be stopping here? It's getting to the point where I have to hit the "Continue" button about 20 times to get the page to finish Javascript execution...
I had this problem and fixed it like so:
Uninstall firebug in the firefox add-ons manager
Close firefox
rm -rf profile_folder/firebug
Delete all firebug-related lines from profile_folder/prefs.js
Reinstall firebug
Hope this helps!
There is nothing wrong with firefox, this is happening because you might have enabled auto breakpoints. Check here http://getfirebug.com/wiki/index.php/Script_Panel for more details about what i am talking about. Disable them on console and script panel and everything will be solved.
This question is old, but it is also the top result for searches: like firebug random breakpoints.
In my experience, assuming this is not due to break on exception or other settings, every time this happens to me there is some collision with jQuery, or another library. Sometimes even name spacing does not keep you safe, and this is very hard to debug.
Most recently I had a function named: name_space1.nestedns.focusCursor(). Something was messing with my focusCursor function.. didn’t figure out what, just changed the name.
Farther in the past I had a function or var named ns.companyabreviationToolTip... and there was collision and breaking on this as well. Changed ToolTip to something obscure, and everything was happy. Maybe firebug has a secret break on collision setting. If this is a bug, I hope it does not get fixed… it seems useful.
I have an external JavaScript file and whether in FireFox or Chrome, whether all browsing data is cleared, it will NOT update no matter what. I believe something happened when I made a backup of my file, which I simply added "_thedate" to the end of the name. Then Save As back to the original name.
Now I cannot seem to get rid of the old JS no matter what unless I change the name of the file, which I really don't want to do, or add the script to the PHP page, which crowds it.
Anyone know the solution to this?
You are sure you are linking to the same file and then editing that same file?
On some browser, you can use CTRL F5 to force a refresh (on the PC). On the Mac, it is Cmd Shift R
Firebug also has a net tab with "Disable Browser Cache".
But I want to give a warning here: even if you can hard refresh, how do you know your customers are getting the latest version? So you need to check, rather than just making sure you and your program manager can do a hard refresh and just go home and take the paycheck next month. If you want to do a job that change the world for the better, or leave the world a little bit better than you found it, you need to investigate more to make sure it works for your customers too (or else, sometimes the customer may call tech support, and tech support may read the script of "clear out the cookies and it will work", which is what happens to me sometimes). Some methods down at the bottom of this post can ensure the customers get the latest version.
Update 2020:
If you are using Chrome and the DevTools is open, you can click and hold the Refresh icon in front of the address bar, and a box will pop up, and you can choose to "Hard Reload" or even "Empty Cache and Hard Reload":
Update 2017:
If you use the Google Chrome debugger, it is the same, you can go to the Network section and make sure the "Disable cache (while DevTools is open)" is checked, in the Settings of the debugger panel.
Also, when you link the JavaScript file, use
<script src="my-js-file.js?v=1"></script>
or v=2, and so forth, when you definitely want to refresh the file. Or you can go to the console and do a Date.now() and get a timestamp, such as 1491313943549, and use
<script src="my-js-file.js?t=1491313943549"></script>
Some building tools will do that automatically for you, or can be configured to do that, making it something like:
<script src="main.742a4952.js"></script>
which essentially will bust the cache.
Note that when you use the v=2 or t=1491313943549, or main.742a4952.js, you also have the advantage that for your users, they definitely will get the newer version as well.
How about adding a '?2' to the tag?
<script src="a.js?2"></script>
The server should return the same file with or without the '?2', but the browser should see it as a different file and redownload. You can just change this query string whenever the file is changed.
adapted from: http://blog.httpwatch.com/2007/12/10/two-simple-rules-for-http-caching/
I've had this problem before, it's very frustrating but I found a work around. Type in the full address of the js file (i.e. yourhost.com/javascript.js) and load it. You will probably see the old version load. Then hit f5 to refresh that page and you should see the new version load. The js file will now be updated in your cache and the code should run as you expect.
The solution I use is.
Using firefox
1. using web developer --> Web Console
2. open the java-script file in new tab.
3. Refresh the new tab you should see your new code.
4. Refresh the original page
5. You should see your changes.
I had this problem and solved in Chrome by just disabling Cache:
- Click F12;
- Go at Network tab;
- Click on "Disable Cache".
A little late to the party, but if you put this in your html, it will keep your website from updating the cache. It takes the website a little longer to load, but for debugging purposes i like it. Taken from this answer: How to programmatically empty browser cache?
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Rename your js file to something else temporarily. This is the only thing that worked for me.
The best way around browsercaches is to append a random number to the path of the js file.
Example in pseudo code:
// generate a random number
int i = Random.Next();
echo "<script src='a.js?'" + i + "></script>";
This will make sure your browser always reloads the file, because it thinks it's a different file because of the random number in the url.
The server will always return the file and ignore what comes after the '?'.
In both Firefox and Chrome, that is really annoying, but because of their default settings which can be changed the following way and then they work. I tried in Chrome and Firefox both with same order of steps.
Press F12 (Open Inspector)
Click Network, and then click Disable Cache
Now click Clear icon. In Firefox, it shows as a trash bin icon on left corner, in Chrome it is the second left icon, in between 'stop recording' and 'Filter'.
Now press F5 or refresh the page
They do update the resources with their fresh copy as they re-download them.
In Asp.netcore we can use asp-append-version taghelper
<script src="~/js/site.js" asp-append-version="true"></script>
Are you 100% sure your browser is even loading the script? Go to your page in Firefox and use the console in Firebug to check if the script has been loaded or not.
I have the same problem for awhile, and manage to figure out... And my case was because I have 2 javascript with the same function name.
1.Clear browser cache in browser developer tools
2.Under Network tab – select Disable cache option
3.Restarted browser
4.Force reload Js file command+shift+R in mac
Make sure the fresh war is deployed properly on the Server side
I was going insane trying to get my js files to refresh and I tried everything. Then I did a header check and remembered I was using Cloudflare!
In Cloudflare you can use dev mode to disable proxy.
Don't forget to check any errors in webpack compilation. Sometimes the application.js in app/javascript/packs/ doesn't reload due to webpack compilation error.
When I run into this issue I try this sequence of steps:
Hard refresh the page.
Clear cache + cookies.
Add a static version to my script.
src="my-script-name.js?v=1"
If the above does not help, add a dynamic version to my script:
src="my-script-name.js?v=" + Date.now() + Math.random()