Develop Reference

Debug JavaScript file with variable names

I call my JavaScript files like this:
jsfilename.js?v=1234
And on each request I change the v parameter. Second request:
jsfilename.js?v=4567
Is that a way to debug on Chrome DevTools with this variable name?
Because now, every time I create a breakpoint and refresh the page, my breakpoint looses reference.

Use statement debugger in your JS code.
Don't forget to remove it after all ;-)

I would use console.log() to report back the variable name every time I need it. This should be able to show you the exact point where your script fails.

You can also disable cache while DevTool is open. Go to settings (click the 3 dots on the right and select settings) In this way you should refresh the page and not keep cache.
Errors are as mentioned in the other answer generally shown iin the console:-)

usually, you put ?v=xyz so that you can bypass browser cache [if the parameter is different, the browser gets the file from the server and not the cache].
this is used mostly whan you have to deal with CDN.
For debugging purposes, the Javascript debugger has an option to disable cache [open debug, go to settings; is the first checkbox in the "General" panel]
of course you can have problems in breakpoint persistence if the filename is diffeerent; so, as long as you're debugging, just disable cache, and, of course, don't place js file on CDN unless they're in their stable release;

Vaadin #Javascript : clear cache for updated JS file

I have a #JavaScript annotation in my application to load a .js file from the classpath.
Now I've made an update to the file and redeployed (locally), but I always get the old version back. I've tried reloading everything (ctrl+R, ctrl+F5) but that doesn't work and also I wouldn't want the users to have to do that.
A trick I used in the past (without Vaadin) was to append a request parameter with the version (e.g. ?version=1) and update that so that the URL changes. But apparently that isn't allowed for the #JavaScript annotation (Vaadin doesn't even try to load the file).

I have overcome this by utilizing the resourceCacheTime parameter of the Vaadin servlet configuration:
#VaadinServletConfiguration(ui = MyUI.class, resourceCacheTime = 0)
Although it has its limitation as described in my answer to another question here.

This is browser feature to localy cache JS files, nothing to do with Vaadin.
As you figure it out yourself: If you want to make sure users have latest version of JS file, you should rename JS file name to: script_buildNumber.js.

Use the Chrome's incognito feature (and not use it when visiting spicy/unpleasant websites).
Just open your browser in Incognito mode https://support.google.com/chrome/answer/95464?hl=en and the browser will cache nothing.
Other browsers have this feature as well (Opera, IE, Firefox, Safari).

As I noted in my comment on the question on January 12th, renaming the file worked. This seems to be currently the only way, although it's far from ideal.

When accessing site from external network using IE JS/CSS(YUI) based UI is not working correctly

We have ASP.NET application in which we have used the YUI to generated the popup for user interface. Now when I amd testing the locally isntalled site the popups are comming correctctly withoug any error and also getting displayed correctly on all the browwsers (including IE 7/8/9).
However when the site is exposed on the server and i tried to test it from the outside network the YUI popup's are not getting genrated correclty like if some Javascript or CSS are not getting loaded or are cached. Generally Ctr+F5 does the trick to flush local cache and to fix the issue we have added query parameters xyz.css?v=10 trick. But its not working. Now this issue is showing only on the IE(6/7/8/9) and other browsers are working correctly. To check the issue i again logged into the production box and found that popup is appearing correctly on IE also.
Now i am not having clue how it could possibly happen. Does any one has came across anything like this? What could be the cause of the issue and how to fix it ?
Thanks

As far as I know, IE caches GET responses.
The xyz.css?v=10 trick is used when you want it to use cached CSS but only as long as it is the same version. Whenever you change something in the css you need to change the url (ie xyz.css?v=20).
If you want IE to NEVER use the cached css, you need the URL to look different everytime. you can do that by adding some timestamp to the url.
something like:
xyz.css?v=201201180600123
(201201180600123 is a timestamp)

View js files in firefox

Everytime I try to navigate to a JS file on Firefox I get a save-as dialog. I would like to just be able to view the source in the actual browser and not have to download and open the file in another editor.
Is there any way I can force Firefox to view the files?
EDIT here's a snapshot:

In Firefox, You can use the view-source: psuedo protocol.
Enter into the URL address bar:
view-source:http://server/whatever/your/url/is.js
See also:
How can I convince IE to simply display application/json rather than offer to download it?

I would try the excellent Open in Browser add-on, which is worth having as part of your standard Firefox install.
Have you ever been annoyed when you wanted to see a document and the download popup appears which forces you to select an external application to view it?
This extension allows you to open the document directly in browser. You can also change the MIME type of a document being viewed.
This extension is necessary due to a 9 year old bug in Firefox. When given Content-disposition: attachment by the server, Firefox will only offer to open the resource with an external application or to save it to disk. "Open here, now, in this Firefox" should also be an option for MIME-Types it handles, but currently isn't.
I agree with the last comment, from just 8 days ago:
not allowing content types that Firefox can handle (text/plain, image/png,
etc) is to be viewed directly is a clear-out bug. Dancing through hoops like
saving the file to some random place then opening it manually is a ridiculous
workaround.

There are three places that Firefox looks for the MIME type of a .js file. (There is a fourth place for some files, such as .html files.)
The first is in a file in your profile called mimeTypes.rdf; if you have ever clicked on a link to a .js file with an unrecognised MIME type then when you save it Firefox will associate that MIME type with .js files. See Mozilla bug 332690 which describes the equivalent bug for .svg files.
The second possibility is that your registry entry HKEY_CLASSES_ROOT\.js\Content Type may have been set to an incompatible value. If present it should be set to one of the values application/x-javascript, application/javascript or text/javascript.
Only if these locations are not set then Firefox will use its internal default which I believe is application/x-javascript.

There is a nice JSView extension that should help you: https://addons.mozilla.org/en-US/firefox/addon/jsview/

If you view the source of a website in Firefox, you can navigate into the javascript files from there also by just clicking on the link in the src="" property.
(This could potentially be influenced by Firebug that I have installed)

Using the devtools it looks like this Ctrl+Shift+K > Debugger > Sources:

Not able to register preferences on mozilla using registerFactoryLocation

I m XPCOM component for registering the preferences on mozilla firefox but it is not getting reflected in prefs.js file.
Anything more i need to use apart from registerFactoryLocation code....
Thanks in advance :)
ya sure,I have developed an XPI,in that in comonents folder I have added a mymanager.js file. In that I have creted a component using the code like.......... http://kb.mozillazine.org/Implementing_XPCOM_components_in_JavaScript but this code does not able to add the _prority preferece to mozilla firefox preferences(prefs.js) file. I need to do anything more to register the preference...

Although your extension can register preferences, prefs.js only contains changed preferences, so they won't automatically appear there.