Is it possible to find out which javascript files are NOT used on a web page without having to add console logs or debug or removing them to see if things break?
I'm looking for a tool, or a command line script or firefox plugin etc.
For example, let's say I have these included in the header:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/something.js"></script>
On the page, calls are only made to functions in functions.js, validation.js and jquery.js. How can I know that something.js is not used and therefore can be safely removed from the header?
I've tried rooting through things like FireBug, chrome's console, yslow and server logs, but these all tell me which scripts have been loaded, i.e. all of them, not which ones have been used.
AFAIK there is no simple "this file is in use / not in use" detection mechanism, because there are so many ways to call, extend and reference things in JavaScript.
There are dozens of ways to call a function, e.g. in the click event of an element, eval() statements... You could be extending the prototype of an existing class in a script file... etc. Also, you could be fetching new markup through AJAX than in turn references functions from a certain include, something impossible to test for automatically without fetching the content.
Unless somebody comes up with a tool that tackles exactly this (I'm not saying it's impossible, just that it is horribly hard) I'd say working this out manually with a good IDE and search function is the best way to go about it.
In answer to my own question getting on for 7 years later, Chrome dev tools now has exactly this feature! https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Only took 7 years :) Also wanted to point out that you can automate this with Navalia: https://github.com/joelgriffith/navalia.
Here's a quick example:
import { Chrome } from 'navalia';
const chrome = new Chrome();
async function checkCoverage() {
await chrome.goto('http://joelgriffith.net/', { coverage: true });
const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js');
console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 }
chrome.done();
}
checkCoverage();
More here https://joelgriffith.github.io/navalia/Chrome/coverage/.
Coming at this from a different direction, you could look into using (lazy) loading javascript libraries. I couldn't say how appropriate this would be in your situation, but I have seen mention of these two in the last week, but haven't used either of them:
http://plugins.jquery.com/project/lazy (only for lazy loading of jQuery plugins?)
http://labjs.com/ (not sure if this does lazy loading?)
Related
I'm having a problem getting Firebug (and Chrome) to list the javascript files/modules that I've defined and included. I've recently switched from Dojo 1.5 to Dojo 1.9.1 AMD and am including the javascript modules through the require protocol as designed. This had been working fine until just recently when I changed the Dojo configuration's "async:true" to "async:false" in order to support some legacy code that still needs the "dojo.require" to be recognized and supported. Changing the Dojo configuration to "async:false" allowed the "dojo.require" calls to work, but somehow broke the ability of Firebug and Chrome to "see" the loaded javascript modules. I just temporarily switched the config back to "async:true" to verify that Firebug successfully listed the javascript modules so it is definitely the cause of the effect.
The functionality of the JSP pages still appear to behave as expected - so the javascript modules are being included as needed, but when I try to view them and set breakpoints in them from Firebug - they are not listed. If I search for a particular string that appears in one of them, then Firebug will successfully find the javascript code but shows that it is "located" under the heading of something like:
/dojo/1.9.1/dojo/dojo.js.uncompressed.js line 328 > Function line 1 > eval (2)
instead of the actual file/module name. I'm unable to set breakpoints from this view, but if I add a "debugger;" line into the javascript file then Firebug will stop at that location during execution - not an ideal workaround.
Any idea why switching from "async:true" to "async:false" would cause this behavior in Firebug?
Thanks. Any help is appreciated.
You have to add has:{'dojo-firebug': true } to your dojoConfig like this:
<script type="text/javascript">
var dojoConfig = {
has: {
'dojo-firebug': true
}
};
</script>
You can also add it in like this:
<script type="text/javascript"
src="your_dojo_src_path_here"
data-dojo-config="has:{'dojo-firebug':true}">
</script>
I'm trying to embed some JavaScript into the output of a Google Apps Script that is running as a web app, but I can't find any evidence of my script tags or jQuery loading in the output, so I think it is getting stripped out, I assume, by Caja.
I'm adding the JavaScript by creating an HTMLOutputObject from a file, like this:
app.add(app.createHTML(HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent()));
Maybe it is worth mentioning here that the javascript is added this way in a serverHandler attached to a listBox change event - NOT in the initial doGet() function - I'm not sure if that makes a difference.
The content of the order_form_javascript.html file is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
alert ("function ran");
$('.order_table tr:hidden').show();
});
</script>
The H3 tags are in the output, but no script tags appear, no alert boxes pop up and jQuery is undefined.
I tried this code on the Caja playground and it seems to work. So I think that I must be inserting the javascript incorrectly, or missing something obvious.
Thanks, in advance, for any suggestions you can offer.
I'm not deeply familiar with Apps Script, but it looks like you are trying to mix Ui Service (add, createHTML) and Html Service in the same page. This is not supported — you must choose one or the other for the entire page.
A side note on troubleshooting: Caja never inserts the script you write in the DOM (doing so would break the sandbox). In NATIVE sandbox mode you may see <script> elements with empty or stub contents, though. So, the absence of scripts does not itself indicate a problem.
Following Kevin Reids tips that Caja wouldn't likely show script tags anyway, as this would break sandboxing, and also that HtmlService and UiService may be incompatible in the same script, I updated my code to the following:
var js = HtmlService.createHtmlOutputFromFile("order_form_javascript").getContent();
Logger.log(js); //check that HtmlService generates the script properly.
app.add(app.createHTML(js));
Looking in the logs, I can clearly see that HtmlService is returning my HTML file's content verbatim:
[13-07-24 10:02:28:879 BST] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h3>Javascript!</h3>
<script type="text/javascript">
alert ("script ran");
$(function() {
alert ("function ran");
$('.order_table tr:hidden').show();
});
</script>
Which makes me think that maybe I could use this method to output arbitrary HTML without writing it all in code, but I digress.
This lead me to the app.createHTML([String]) method and, according to the documentation here, HTML widgets can't actually contain <script> tags. So that's where they are being stripped out. It turns out I should have read the manual. How embarrassing.
The two possible solutions I can think of are;
Re-write my web app using HtmlService instead of UiService, which I think would allow more arbitrary html and scripts from HTML files in the project.
Since my JavaScript is going to be event driven and very simple, I could also use a clientHandler to perform the necessary actions and continue using the UiService for my web app.
I'm going to start with the clientHandler approach.
Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!
jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.
Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)
I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.
I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.
download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>
My issue is that multiple websites are going to include my JS file and when calling something like this:
<script src="..."></script>
hello.say("yay");
there going to be a race issue so sometimes it could make it sometimes not. i know that i can solve that easily by putting every function in a window.onload but that wouldn't be clean as i've seen other websites magically solve that like google analytics:
.. Calling google analytics JS..
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x"); <-- this an object !
pageTracker._trackPageview();
} catch(err) {}
</script>
How to do that?
Google Analytics uses a trick that's a perfect example of something that can only be done in duck typed languages. The main object is an array if the GA-script hasn't loaded, but if it has it changes behaviour. Let's see if I can explain it.
I pulled this piece from the source here at stackoverflow:
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-5620270-1']);
_gaq.push(['_trackPageview']);
It looks like an array with some values being pushed to it. In fact, if _gaq is falsy when this code is run (as it is if no other analytics-JavaScript has run yet), it as an array. Then, when the main analytics script (included with a script-tag anywhere on the page) loads it examines this array and performs some task based on the contents of the array.
So, if this happens in opposite order (the main script is loaded first, and then the snippet above) the main script set _gaq to an object with a push-method that does whatever google wants it to do. Later, when the code above runs, _gaq.push doesn't just add values to an array; it actually executes arbitrary code (and doesn't push to an array at all).
Hence, regardless of which script runs first, the end result will be the same when both have finished.
If you include your file in the header part of the html page, it will be loaded before any other javascript in the page is run.
UPD: Also, I think even files included in the text of thml are downloaded before the processing of the rest of javascripts. Are you sure that is your problem in the first place?
You will need to delay the execution of any javascript code that depends on the external javascript until after the page has been fully loaded and you can do that by attaching the execution to the window.onload event.
window.onload = function() {
hello.say('yay');
}
But this has the disadvantage of only working for one function and will override any functions that have been initially attached to that event. You would want to read Simon Wilson's post and the comments for solutions on how to handle this situation.
http://simonwillison.net/2004/May/26/addLoadEvent/
I'm a bit unsure as to what you think the race issue is here.
Browsers always* execute script tags in the order they see them. If this were not true, a good portion of the internet would break - as well as pretty much every common JavaScript library in existence.
So, as long as users load your script earlier in the document than when they call its APIs, you should have no problem. The only potential exception to this I can think of is if your script's initialization relies on asynchronous logic, in which case you should think about providing a standard callback mechanism of your own for users to write their code in.
If users might load your script AFTER the point they use its APIs, then the trick Jakob alludes to in his answer would work. But I'm not even sure you're aiming for that level of complexity.
*edit: I should note, to be perfectly honest, there are specific exceptions to this, but not so long as you're simply dealing with standard non-deferred usage of <script> tags within an HTML document.
I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?
So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.
Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.
The page
<!--
Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>console me</title>
<style type="text/css">
#import "../dojoroot/dojo/resources/dojo.css";
#import "../dojoroot/dijit/themes/tundra/tundra.css";
#import "edf.css";
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js">
</script>
<script type="text/javascript" >
dojo.registerModulePath("mytest", "../../mytest");
dojo.require("mytest.example");
dojo.addOnLoad(function(){
mytest.example.greet();
});
</script>
</head>
<body class="tundra">
<div id="bulletin">
<p>Just Testing</p>
</div>
</body>
</html>
<!-- END: snip1 -->
The java script I'd like to debug
dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");
/**
* define module
*/
(function(){
//define the main program functions...
var example= mytest.example;
example.greet= function(args) {
var bulletin = dojo.byId("bulletin");
console.log("bulletin:" + bulletin);
if ( bulletin) {
var content = new dijit.layout.ContentPane({
id: "dummy",
region: "center"
});
content.setContent('Greetings!');
dojo._destroyElement(bulletin);
dojo.place(content.domNode, dojo.body(), "first");
console.log("greeting done");
} else {
console.error("no bulletin board");
}
}
})();
(Answering this myself because it seems like a common problem whose solution is not well known.)
It seems that one can nicely debug eval-ed code in FireBug provided that dojo does a little cooperating. The trick is to configure dojo to enable such debugging using debugAtAllCosts
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>
This is described on dojo campus under debugging, which also notes that this setting is not recommended in production for performance reasons and suggests an approach using server-side conditionality to control whether such debugging is enabled.
Also, if you are using a version of Firebug less than 1.7a10 also verify that you have the "Decompile for eval() source" on the scripts drop-down disabled (extensions.firebug.decompileEvals in about:config). When enabled I think this causes Firebug to overwrite the source with its own decompiled version and somehow lose the filename along the way as well.
#peller, This could be why your answer wasn't working for us.
It's disabled by default, but I turned it on at some point and didn't realize it.
It's also being removed completely in 1.7a10 as part of Firebug issue http://code.google.com/p/fbug/issues/detail?id=4035. Also related discussion at https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion and https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion.
Here's a solution I found for the inability to recurse into dojo.require mudules from reading the NGs.
Change
<script src="dojoroot/dojo/dojo.js" type="text/javascript">
to
<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">
This fixes the less than helpful
undefineddojo._scopeArgs = [undefined];
error that one sees otherwise.
The pattern is essentially xhr+eval... really it's the eval that's the problem... Firefox in particular has no way to track code from an eval back to its original source and instead points at the eval call site, plus whatever line offset there is in the eval buffer. Firebug has implemented a clever scheme to workaround this problem, and added an optional hint which loaders like Dojo can use to embed the original file path in a comment. Webkit now supports this scheme also. It's not perfect, but debugger; and other breakpoints ought to bring you into the correct buffer.
I'm not sure why none of this would be working for you. Which version of Firebug are you using?
djna's debugAtAllCosts solution works for me, for the reasons described at http://dojotdg.zaffra.com/tag/dojorequire/.
However, note that using debugAtAllCosts causes dojo.require to become asynchronous because it uses script inserts rather than xhr+eval. This can cause problems with code that expects dojo.require to be synchronous that isn't brought in using require itself (as described at http://kennethfranqueiro.com/2010/08/dojo-required-reading/). In my case it was testing code I had being run by unit test framework. So the following failed saying that EntityInfo was not defined
var e1 = new EntityInfo();
until I changed it to
dojo.addOnLoad(function() {
var e1 = new EntityInfo();
}
#peller, For me FireBug 1.6.1 will take me to the right eval block but not the right file and line numbers (because its an eval string rather than the original file)..
I'll add one more alternative, use Chrome. It's great for debugging evals (seems to catch some things Firebug doesn't). Do be aware of its issue with caching JS files - http://code.google.com/p/chromium/issues/detail?id=8742.
Personally Firebug is still my main environment, but I am now also using Chrome when things get tricky with evals to get a second view at the problem. Chrome helped me twice yesterday with undefined function/variable issues with the dojo loader that Firebug skipped right past).