I love YSlow for Firebug/Firefox, but I've hit a situation where I want to profile an HTTPS site, that doesn't physically work outside of IE6/7 (e.g. no IE8, no Firefox, no Chrome)
Fixing the site to work in all browsers is officially Step #1, but to do some analysis and benchmark the existing site (which will help in reporting overall goal achievement) I really need to be able to profile the existing site.
In particular the info I'm looking for is:
Overall page speed
Static content (what images, css, js files) are cached, minimized, gzipped
Counts/locations of slow CSS (e.g. usage of CSS Expressions)
Cookie info
Image sizes
Duplicate scripts/css
File sizes
etc.
Without a specific do-all tool, are there specific tools that will help me solve part(s) of the puzzle.
e.g.
I have Fiddler2 set up... which will give me HTTP(S) sessions, headers, requests, filesizes, gzipping, etc.
I have a bookmarklet or two that will tally up duplicate scripts/css
I have the IE7 developer tools installed so that I can view the HTML and inspect things
Using the above I can extract most of the info and then tally up my own "score"/checklist of things that need attention however it is a fair amount of work. :-(
Does anyone have some better tools for this?
Is there a YSlow-like tool for IE7??
You Can Run Yslow In Internet Explorer
All You Need To Do Is:
Click Here (Using IE)
Scroll Down To 'Desktop Bookmarklet Installation Instructions'
Right Click The Blue Rectangle Reading 'YSlow' & Then Add To Favourites
Now You Have YSlow In Your Favourites, Go To The Webpage You Want To Test &
Click YSlow From Your Favourites Menu To Run The Test.
UPDATE: The YSLOW Bookmarklet has not been updated by the YSLOW team and as of June 2016 does not work in IE11
I just came accross MSFAST, a new addon from MySpace Performance team
http://msfast.myspace.com/
It does performance analysis and there is a YSLOW quotation system.
Have a look at dynaTrace AJAX. Works with IE and should give you most of the info you're wanting.
I am not sure, but Firebug Lite can run on IE .. ?
Well I am afraid there is none.However you can use HTTP Watch to profile.Just give a look & see if it helps.Good Luck
Charles Web Proxy has a yslow like feature built in. It works with IE. It is shareware and costs $50 to purchase.
http://www.charlesproxy.com/
I had similar question and this is the best thing that I found for IE. Hope this helps!
Related
I have searched a lot for some tools that can help me measure how long it takes to load a website's resources. For example, how long does it take to load all CSS files, also all JS files, requests etc.
I'd like to measure these type of resources individually, so after doing site optimizations, I can do a before/after and check whether loadtime has decreased (and on what types of resources had it decreased).
Also, this website requires authentication, so it needs to be a browser plugin, or some kind of internal tool.
EDIT: Firebug, Chrome Developer tools, Google Pagespeed dp not help, because I cannot get the entire load time of all the CSS files, or of all the JS files, unless I calculate them manually :) Each css file, individually.
Any help would be sooo appreciated!
Thanks
Do the following step
step 1
View your application in Mozila
step 2
Right click any where in you app then go 'inspect element with firebug'
Note-install firebug if not available in your Mozila Firefox Browser.
Step 3
you will see selection tag on bottom window
step 4
select 'Net' click on this 'enable' it if not
step 5
Reload your webpage and see .
maybe this is your Answer
there are some online website that testing speed of Website and Other... . if you have a good website the first step is testing your code with w3c validator and after that solving the problems and test it on gtmatrix
and other way is downloading firebug for firefox on firebug net tab you can see the speed of your code and ...
and read about see searchengineland.com
How do I take a deeper look at what's going on in the network level of my web browser than the developer tools network panel will provide? For example, I'm trying to debug an issue on a page right now in Firefox (18.0.1) where the loading "spinner" keeps going continuously long after the page has finished loading.
The firebug net panel shows all resources loaded ("200 OK") but the loading icon on the tab is still spinning and the text on the bottom of the window still shows "Transferring data..". How would I take a closer look and see what is supposedly still transferring? Note that this only seems to happen with Firefox and only on a fresh load (not when resources are cached).
After checking your link with Wireshark and with HTTPScoup (a different tool), my conclusion from both was that all the data arrives successfully and no connection remains open with your server's IP. The problem in FF I think is related to something else
Google reveals that in some cases, it is possible to confuse FF into this state. It doesn't have to be related to open network connections.
Take a look at this questions for example:
FireFox sits on "Transferring data from..." or "Read...."
The issue there was unclosed tags in the HTML body.. so try to find problems like this one too. You can try fixing some validation errors by running a validator such as this one. Since you have about 200 validation errors, I suggest you start by deleting half your HTML code until the problem goes away and this way zero-in on the problem location. Then go in and fix the tag mess.. looking a little in the HTML source gave me a headache :)
I would use a tool like Fiddler or Wireshark to do this. Both of these tools provide more low level packet information.
I would start with Fiddler. Fiddler is meant for http traffic analysis whereas Wireshark is a full-fledged packet sniffing tool for all layers of network traffic.
Another advantage to both of these tools is that you can use them with any browser. One disadvantage to fiddler is I believe it is only available for Windows.
I would recommend a very nice Firefox extension called HttpFox which is a bit easier to use than wireshark and friends
It lets you see the HTTP calls made by the page in much greater detail, and also the flow between pages (fast redirects and such). Here is what it looks like:
As brilliant as Firebug is, I would consider switching my JavaScript debugging to Chrome if I could figure out how to get it to always re-download styles and images on every visit to the page?
When I'm testing a page in Firefox, it always gets the latest version.
But in Chrome I often end up scratching my head over something that turns out to be a simple issue of the browser caching some earlier styles or images.
Is there a way to configure Chrome to cache less while you're developing?
I often use private browsing mode for this - it prevents caching of the stylesheets or scripts.
EDIT:
Another really easy way to do this in Chrome now is to go into the Chrome Developer Tools, click the settings gear (bottom right), and then check "Disable cache." See https://stackoverflow.com/a/7000899/4570.
A bit late to the party, but just for people who may pick up this page on a search, new versions of Chrome have a developers tools setting to disable the cache. Show developer tools (spanner->tools->developer tools) and on the bottom right is a tiny little gear. click that and a few settings appear in the developer tools window, one of which is to disable the browser cache. If you can't see it you may have to upgrade to a newer version of chrome.
Ian
According to Chrome help pages, Ctrl+F5, Shift+F5, Ctrl+R and Shift+R should force refresh. I haven't had problems with javascript and css but refreshing frames is another story. The caching can also be on your web server. The server can obviously be configured to cache css and javascript files.
Your best bet is to clear the cache between each load. With the latest version of Chrome, the hotkey is the same as firefox (on Mac, it's Shift-Command-Del). However, they haven't focused the "Clear Browsing Data" button, so you have to use your mouse to click that button -- which is a total PIA when compared to Firefox (Shift-Command-Del + Return), or Safari (Option-Command-E + Return).
the 2.5 ways i do it are not "automatic" but they're very quick, and i don't have to remember to switch back from private browsing -
a) install Mouse Gestures and use (this is a great extension anyways, but even more so now that I know about) Up, Down, Up - this is a cacheless reload. You can get it here
b) ctrl+shift+r is [supposed to be] a cacheless reload. Even the help pages admit this isn't perfect
c) the .5 is a kind of a hack - but if you are working with CSS files, open a new tab and type in the address to the CSS file itself - you can see what changes are there, as well as make sure that you've gotten the latest one by refreshing this file before your other file. a bit of a pain, i know, but always works.
Not sure about your system but on this WinXP machine holding SHIFT while clicking refresh always forces a complete download.
That's what I do when doing CSS and image tweaks.
That Chrome needs to have must-revalidate in the Cache-Control` header in order to re-check files to see if they need to be re-fetched the way that the other browsers do by default.
Recommend the following response header:
Cache-Control: must-validate
This tells Chrome to check with the server, and see if there is a newer file. IF there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.
If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.
Here is a blog post that discusses the issue further.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
What firefox plugins could you not live without, as relates to webdev?
My list would be:
DBGBar
Dom Inspector
Firebug
Firecookie
Google toolbar (useful for seo)
Live HTTP
ReloadEvery
TamperData
Web Developer
I am always on the lookout for new ones though, so I wonder if anyone knows of any great ones that I may have missed?
Firebug is the main one I use.
Web Developer is quite useful (firebug Andrew mentions is no doubt #1)
IETab is a nice to have (IE in a Firefox Tab)
No mention of Greasemonkey or Mason?
Live HTTP headers, in addition to some already mentioned.
NoScript. Not just for blocking spam - it's a lot quicker than flipping the script setting on and off manually, and lets you simulate third-party servers going down.
You can also get a lot of useful info just from Firefox's built in error console (in the Tools menu) - among other things it'll point out broken CSS code.
YSlow - analyzes web pages and tells you why they're slow.
MeasureIt - Draw out a ruler to get the pixel width and height of any elements on a webpage. Even better is the Xray bookmarklet.
Hackbar Simple security audit / Penetration test tool.
FirePHP is a Firebug extension for AJAX Development
ColorZilla 2.0 is an advanced eyedropper, colorpicker, page zoomer and some other things.
TestGen4Web - Just like your VCR - for Firefox. It records what you do, stores it, and plays it back on demand.
the HTML Validator plugin is priceless, especially when you're working on stuff written by someone else who may not be so careful with standards compliance...
Firebug, Web Developer toolbar and YSlow for Firebug are some of my picks.
ff-activex - allows to use active-x plug-ins in Firefox
I (ab)use Stylish to experiment with/prototype css changes. Yes you can do it in Firebug but it's not easy to keep track of all the edits you've made and it's not easy to copy & paste those edits back into your css file. Also, if you hit F5 you lose all changes made in Firebug.
Stylish survives page refresh and since it's just text you can simply select all to copy & paste your changes. Of course, it doesn't provide a css inspector or a DOM tree view but that's what Firebug is for.
Web Developer
Firebug
Delicious
Might also add Page Validator
Firebug is the greatest.
Also, not a dev tool but I have found it very useful and easy to use, Foxmarks bookmark manager.
Two other ones that I use are ...
Search Status (SEO related) http://www.quirk.biz/searchstatus/
Ad Block Plus (Blocks Ads) http://adblockplus.org/en/
Many of my favourites have been mentioned. To these I'd add:
Adblock Plus: removes ads
Add-Art: replaces ads with art
Auto Copy: copies to clipboard on select
Tree-Style Tab: shows tabs like a tree
Some of my favorites among others which already mentioned ,
TabKit - Shows tabs in separate panel
, closes the tabs in groups ,
grouping of tabs.
Morning Coffee - restore the tabs
those are saved to view them
later.
Undo closed tabs. This is what I miss from IE8.
FEBE, for backing up the settings of Mozilla.
In addition to already mentioned addins:
ViewState - Displays the current ASP.NET page viewstate size in the status bar.
ColorZilla - Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox
Besides the ones already mentioned (especially the marvellous Firebug), these are the development related ones I've found very useful:
JSONovich does a good job at pretty-printing and colorizing JSON.
User Agent Switcher is very handy for developing mobile web sites (or just for the sake of curiosity) -- "I'm an iPhone, reveal me your contents!"
Sometimes Firefox leaves stuff in the browser cache even on reloads. The Clear Cache Button helps with this.
Header Spy is similar to Live HTTP headers, but displays header information (and access to lots of more options) in the statusbar.
Another one I use a fair amount is the Amazon S3 Firefox Organizer (S3Fox)
In addition to those already mentioned, Selenium IDE.
I've found Venkman to be useful recently, in addition to firebug and others already mentioned.
Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers...
I find it interesting that so many people name a significant number of addons that Web Developer toolbar does for you. While they are all great plugins and might have a couple extra options, not sure if its worth it to have those plugins (for instance, MeasureIt)
Here is my list:
- Web Developer Toolbar (if you're a web developer [period])
- FireBug (essential for javascript/AJAX debugging)
- Google Page Speed (similar to YSLOW but it's from Google, very useful)
- ColorZilla (great color picker)
- HTML Validator (saves a bunch of time loading w3.org's page)
- Tab Mix Plus (anything and everything to do with tabbed browsing)
- Screengrab (if you use screenshots at all, use this)
- Google Toolbar (SEO)
My list of addons which I use for development is:
Firebug
Poster
HTML Validator
Web Developer
Pinger
I think those are essential for proper web development.
What Firefox add-ons do you use that are useful for programmers?
I guess it's silly to mention Firebug -- doubt any of us could live without it. Other than that I use the following (only listing dev-related):
Console2: next-generation error console
DOM inspector: as the title might indicate, allows you to browse the DOM
Edit Cookies: change cookies on the fly
Execute JS: ad-hoc Javascript execution
IE Tab: render a page in IE
Inspect This: brings the selected object into the DOM inspector
JSView: display linked javascript and CSS
LORI (Life of Request Info): shows how long it takes to render a page
Measure IT: a popup ruler.
URL Params: shows GET and POST variables
Web Developer: a myriad of tools for the web developer
Here are mine (developer centric):
FireBug - a myriad of productivity enhancing tools, includes javascript debugger, DOM inspector, allows you to edit the CSS/HTML on the fly which is highly valuable for troubleshooing layout and display problems.
Web Developer - again another great developer productivity tool. I mostly use it for quickly validating pages, disabling javascript (yes I disable javascript sometimes, don't you?), viewing cookies, etc.
Tamper Data - lets you tamper with http headers, form values, cookies, etc. prior to posting back to a page, or getting a page. Incredibly valuable for poking and prodding your pages, and seeing how your web app responds when used with slightly malicious intent.
JavaScript Debugger - has a few more features than javascript debugger provided by firebug. Although I must admit, I sparingly use this one since firebug has largely won me over.
Live HTTP Headers - invaluable for troubleshooting, use it frequently. Lets you spy on all HTTP headers communicated back and forth between client and server. It has helped me track down nefarious problems, especially when debugging issues when deploying your web app between environments.
Header Spy - nice addon for the geeky types, shows you the web server and platform a web site runs on in the status bar.
MeasureIt - I don't use this all too frequently, but I've still found it valuable from time to time.
ColorZilla - again, not something I use all that frequently, but when I need it, I need it. Valuable when you want to know a color and you don't want to dig through a CSS file, or open up a graphics editing app to get a color embedded in some image.
Add N Edit Cookies - this has been a great debugging tool in web farms where the load balancer writes a cookie, and uses the cookie value to keep your session "sticky". It allowed me to switch at will between servers to track down problems on specific machine. Also a good tool if you want to try to mess with a site that uses cookies to track your login status/account, and you want to see how your code responds to malformed or hacked info.
Yellowpipe Lynx Viewer Tool - yeah I know what your thinking, lynx, who needs it, its so 1994. But if you are developing a site that needs to take web accessibility into account (meaning accessible to users with visual impairments who use screen readers), or if you need to get a sense of how a web spider/indexer "sees" your site, this tool is invaluable. Granted, you could always just go out and grab Lynx for yourselfhere's the windows xp port that I use.
I've got a handful of other addons that I've used from time to time that I'll just quickly mention: FireFTP (one I installed wasn't stable and I've not tried a newer release), Html Validator (also found this one unstable, least back when I installed like a year ago), IE Tab (I usually just have both IE and FireFox open concurrently, but that is just me, I know many others that find this addon useful).
I'd also recommend the Web Developer extension by Chris Pederick.
As far as web development, especially for javascript, I find Firebug to be invaluable. Web developer toolbar is also very useful.
The ones I have are...
Y-SLow
Live Headers
Firebug
Dom Inspector
One that wasn't mentioned yet is this HTML Validator extension that I found very useful.
#Flávio Amieiro
MeasureIt is an unnecessary extension to have if you install the Web Developer Toolbar. Web Developer Toolbar includes a ruler as one of its features. Under the "Miscellaneous" category for Web Developer click the option "Display Ruler" to use a ruler identical to the MeasureIt one.
That will allow you reduce the number of extensions needed by at least one.
Firefox addons:
FireBug:helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much, much more.
Web Developer-gives you the power disable CSS, edit CSS on the fly, measure certain areas of a page and much more.
ColorZilla
Just click on the icon, hover over the area you'd like to know the hex color for, and click.
Window Resizer
to make sure the layout is displayed properly in the standard resolutions of today.
Total Validator
validating websites much easier by checking HTML, links, CSS and doing a lot more.
Web Developer for web development. Scribefire if you're a blogger-progammer
For web developing I use the Web Developer Toolbar, CSS Viewer and MeasureIt.
But I'm really not one of those who has a thousand of extensions to do everything. I like to keep things simple.
EDIT: Thanks to Dan's answer I don't need MeasureIt anymore. Can't believe I've never seen that! I guess I'll just have to pay more atention to this WebDeveloper toolbar.
Adding to everyones lists, Tamper Data is quite useful, lets you intercept requests and change the data in them.
It can be used to bypass javascript validation and check whether the server side is doing its thing.
I use Web Developer, it's a real time saver.
+1 for LORI ("life-of-request-info"). It's a very convenient alternative for rough measurements of the load time of a particular web page -- the kind of thing that you might otherwise use an external stopwatch for.
New Tab Homepage. Combined with a "speed dial"-type homepage (a personal, fast-loading page of links that you use frequently), helps you get where you're going faster when you open a new browser tab.
LastTab. Changes the behavior of Ctrl+Tab to let you navigate back and forth between your most-recently-used tabs with repeated presses of Ctrl+Tab, the same way that Alt+Tab works in Windows. Also provides a nice view of all open tabs while Ctrl is still being held down for easy navigation. (The resultant behavior is very similar to the Ctrl+Tab behavior in recent releases of Visual Studio.)
FireFTP is good for grabbing/uploading any necessary files.
I find Hackbar to be quite useful. Very useful if you want to edit the querystring part of the url, to test for vulnerabilities, or just general other types of testing where you might end up with complicated query string values.
I was learning DOM inspector, but I've switched to Firebug.
Some of which has been missed above are here
Load Time Analyzer – View detailed graphs of the loading time of web pages in firefox. The graphs display events like page requests, image loading times etc.
Poster – A must have tool for web developers enabling them to interact with web services and other web resources.
Aardvark – A cool extension for web developers and designers, allows them to view CSS attributes, id, class by highlighting page element individually.
Fiddler is a really great debugging proxy. Think of it as a more powerful version of the "Net" panel in Firebug or the Live HTTP headers.
It used to be an IE-only extension, now it also has hooks into Firefox.
Groundspeed, is useful for testing server side code. It was created for input validation tests during pentest, but can be useful for any test that require manipulating input (similar to TamperData).
It lets you control the form elements in the page, you can change their type and other attributes (size, lenght, javascript event handlers, etc). So for example you can change a hidden field or a select to a textbox and then enter any value to test the server response and stuff like that.