如何检查网络应用程序中使用了哪些图像/ css / javascript？

Question

The other day I found this little piece of software - WARI. It stands for Web Application REsource Inspector. Apparently it checks dependencies between css, html, js and images and reports unused and duplicated css styles, javascript functions and images.

Link: WARI is released!

What do you use? Any alternatives?

Answer 1

Conceptually such a tool would be very handy as it is typically a very awkward task to find stray files and safely remove them.

I'm not sure if this is the case... but from the wording of this question it looks like this might be a self-promotion question which isn't an endorsed activity. If you wanted to follow up to the generic question "what tools are out there to do x,y, & z" with your own answer that would be fine.

For the record, I use 2 tools called CheckWeb and Xenu that will follow all links and report back what was found.

This finds me any 404's, and I then compare the list of referenced files against my directory listing to see what files were not used. (Its rough, but works)

Answer 2

As Stat1124 has mentioned Firebug is invaluable. The net panel is great for this purpose as it shows the time required to load all the assets associated with a page - and if a resource is unavailable it also shows the HTTP response code.

When trying to optimise a site, yslow ( http://developer.yahoo.com/yslow/ ) is a great addition to firebug - as it provides specific implementation tips to achieve a more responsive page load.

There's also a great utility called smush.it ( http://developer.yahoo.com/yslow/smushit/ ) - which has recently been added to the yslow tool-kit - which produces optimisations to reduce image size.

Answer 3

You can try Google´s page speed

With that you can check all relevant things about your website. Which CSS are unused, Google page speed minifies your JS files and so on. Check it out, you will be impressed. :-)

Answer 4

If you are a Firefox fan, I happen to use Firebug add-on that serves a jack of all trades web development kit. I might exaggerate a little bit however I find it very useful. Here is a quick blurb: Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

If you want to know more info, you can check out their homepage here: Firebug

Answer 5

If your goal is to speed up your page-loading time, WARI seems like it would certainly help you reduce the data required to load your page.

However, I suggest that you go a step further -- take Yahoo!'s advice and minimize the number of HTTP requests :

• Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
• CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
• Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.