Easier way of testing and adding Javascript to a page in Firefox? - javascript

I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.

Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.

just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script

You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.

Related

debugging jQuery snippet

I was trying to take a working jQuery snippet (it's an example to another SO answer) and improve it.
The original snippet can show a good and a bad way of doing something, by having to comment/un-comment some code. I tried to modify the HTML and the JS so that both examples can be run independently, without modifying JS code (by basically cloning sample HTML into a copy with different IDs).
Original JSFiddle worked fine: http://jsfiddle.net/thangchung/LVAaV/
My "improved" version doesn't seem to work at all: http://jsfiddle.net/dvkdvk/C2YBE/19/
(doesn't work means that when you push any button, nothing happens).
I don't know how to debug it with jQuery (with regular JS I would just sprinkle alert() everywhere). I ran "JSHint" on JSFiddle and it was OK.
Your new fiddle did not select a library. Select it from the left side of the form and click Run.
I found this by using Firebug's script debugger in Firefox. Turn on script debugging with the developer tools in your browser of choice. Otherwise, Javascript fails silently. You can then set breakpoints, look at variables, etc. That is much more efficient than using Alerts and console logs (although they do have their place).
Your main problem is with your JSFIDDLE setup. On the left hand side of the page, make sure you include the jQuery library and select onDomReady from the frameworks and extensions panel.
I tried running this script in FireFox, Firebug. The scrips runs fine here with me. Kindly see the environment in which you are trying to run this script.

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation

My javascript file is displayed as a single line of text in the chrome debugger. Why?

I seem to run into this randomly. It usually displays the file normally, but sometimes it's all scrunched onto one line. I can't figure out what's causing it.
N.B.: In the current version of Chrome, this is actually done by clicking on the {} icon ("pretty print") on the lower left of the developer tools pane.
Ah, figured it out. The line endings on the problem file got set to Mac format somehow, while the rest of the files were Windows format. Not sure how the format swapped but it's easy to convert back (in Notepad++ just go Edit -> EOL Conversion).
You already answered your own question, but this is a good place to note that Chrome (as of v12, currently in dev channel) has a built-in pretty-print function that can make quick work of the typical one-line JavaScript files that all well-behaved websites generate. In Web Inspector's Scripts tab, select a file via the usual dropdown, and right click on the source code. Selecting "De-obsfucate Source" will format the file in a reasonable way, and even allow you to set breakpoints inside the newly reformated code. It's quite helpful.

JavaScript file not updating no matter what I do

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()

Firebug doesn't load JavaScript files or stop execution on breakpoints

I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)
A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.

Categories

Resources