bug (fix) in firebug's net panel
bug (fix) in firebug's net panel
developer network home -
help
site search
bug (fix) in firebug's net panel
get startedhomeabout usdeveloper network blogydn theater frequently asked questionssupport communitiesgot suggestions?developer centraljavascript developer centerflash developer centercoldfusion developer center.net developer centerphp developer centerpython developer centerruby developer centerlessons and librariesapplications gallerybrowser based authenticationdesign patternsexceptional performancesecurity best practicesyui - yahoo! user interfacework with usget an application idmerchant solutionspartnershipssearch marketingusage policyterms of usecontact usservicesanswerslocalmailmapssearchshoppingtravelutilitiessitesdel.icio.usflickr™mybloglogpipesupcomingyahoo! research berkeleyfeedsfinancehotjobsrss feedstrafficweatherdeveloper kitsmessengermusicsearch developer kitwidgets
yslow | performance | blog | group | feedback | faq | help
bug (fix) in firebug's net panel
firebug is awesome, but early on i noticed a flaw in the resources displayed in net panel.
it didn't jibe with what i saw in my packet sniffer running side-by-side.
the problem is that resources read directly from the browser's cache, without any http traffic, still show up in net panel.
this is confusing since many people assume net panel, as the name implies, shows actual network traffic.
this has caused some wild goose chases at yahoo!, so i decided to document the bug.
then it occurred to me that i could fix the bug with a new release of yslow.
i first checked with joe hewitt and got his okay to charge ahead.
the fix described below is now available in yslow 0.8.
the bug(s)
the net panel bugs are easy to see with any page that has cacheable resources.
i'll use yahoo! search to demonstrate.
before starting, fire up your favorite packet sniffer, such as livehttpheaders.
open firebug and select the net tab.
clear your cache and go to http://search.yahoo.com.
this generates six http requests as shown in figure 1: the html document, a stylesheet, and four images.
figure 1. empty cache - six requests
the stylesheet and four images are cacheable, with an expires date set years in the future.
if we click the reload button, we still see six bars in the net panel, but the five cacheable components have a bar that is lighter in color, as shown in figure 2.
the lighter bar indicates a conditional get request
was made for the resource, and the web server returned a 304 not modified response with no data.
the browser read the data from its cache.
even though these resources have a future expires date, clicking the reload button tells the browser to double-check that the cached components are up-to-date, hence the conditional get request.
figure 2. clicking the reload button - light gray bars are 304 responses
so far everything is working perfectly.
now, instead of clicking reload, just type the url, http://search.yahoo.com, and hit return.
here's where things start to go wrong.
the page still needs the stylesheet and four images.
we know those all have a future expires date, and since we didn't click reload the browser should just read them from disk without any network traffic.
the only http request that should be necessary is the one for the html document, search.yahoo.com.
if you look in your packet sniffer, you'll see that in fact that is the only http request.
but, as shown in figure 3, net panel incorrectly shows two http requests; one for the html document (search.yahoo.com) and one for the stylesheet (ysch_hp_041018.css).
figure 3. second page view - the stylesheet is incorrectly listed
why does the stylesheet show up in net panel even though it didn't generate any network traffic?
joe hewitt explained that in firefox, scripts and stylesheets are stored in a different cache than images.
when a script or stylesheet is read directly from cache (with no network traffic) it unfortunately appears to firebug as if it were an http request,
and so shows up in net panel.
this example shows this behavior with stylesheets, but it also happens with scripts.
in addition to this problem with scripts and stylesheets, there's a similar, yet subtly different, problem with images.
to see this problem, close your browser, restart it, and enter the url, http://search.yahoo.com, again.
there should only be one http request, for search.yahoo.com, and your packet sniffer will confirm this.
looking at net panel, we're not surprised to see the stylesheet show up, based on what we saw above.
but notice that the four images are also incorrectly listed in net panel, as shown in figure 4,
despite the fact that no http requests were made for these images, not even conditional get requests.
figure 4. restart - the stylesheet and the four images are incorrectly listed
why do the images show up in net panel even though they didn't generate any network traffic?
by restarting the browser, we cleared its memory cache.
the first time the images are read from cache, it again appears to firebug as if they were http requests, and so they show up in net panel.
once the images are in memory cache, this problem doesn't reoccur.
that's why the images didn't show up in figure 3.
all of this poking around points out two flaws with net panel:
scripts and stylesheets will always show up in net panel, even if they are read from cache without any http traffic.
images that don't have any http requests will show up in net panel the first time they are loaded from cache.
the fix
yslow 0.8 fixes these net panel bugs by using the
date header from the http response
and some other heuristics.
if the resource is read from cache, the date will be in the past indicating that no http request was made.
for example, if it's currently 27 sep 17:53 gmt and the date header says 26 sep 11:17 gmt,
it means this response was read from cache.
i added a two line patch to the relevant firebug function that checks this condition.
if the resource has a date in the past it's removed from the list of requests in net panel.
figure 5 was produced under the same conditions as figure 4,
but this time yslow 0.8 was installed.
as seen here, firebug's net panel now correctly lists the true number of http requests - just one for the html document search.yahoo.com.
figure 5. restart with the net panel patch - things look good!
testing
during testing i was disappointed to bump into more than a few servers that were sending
date values that didn't match the time the response was sent.
the http specification
explains that the date value "should represent the best available approximation of the date and time of message generation."
incorrect date values from web servers can cause bigger problems than being an edge case in this bug fix.
browser caching heuristics take the date value into consideration, as well.
i added code to check other information, such as whether any http headers are present and the total load time of the resources.
these enhancements catch most of the cases where an unexpected date value is received.
in figure 5, notice that in the summary at the bottom it still says "6 requests".
since firebug thought it saw six http requests, that's the total shown.
i didn't alter this so that users would be able to see how many requests had been removed by the bug fix,
especially since web servers with incorrect date values may cause inaccurate results.
i also added patch net panel from yslow to the options menu, so it's easy for users to turn this patch on and off, just to double-check.
in the table below i show some results of adding the patch.
the test was to load the page, thus filling the disk cache with any cacheable resources.
then i restarted the browser and entered the url for a second time.
the results show that enabling the net panel patch matches the actual number of http requests sent.
url actual firebugunpatched firebugpatched
http://www.google.com/ 1 3 1
http://www.wikipedia.com/ 10 18 10
http://search.yahoo.com/ 1 6 1
http://www.yahoo.com/ 9 33 9
copyright © 2007 yahoo! inc. all rights reserved.
privacy policy -
terms of service -
copyright policy -
job openings
Acceuil
suivante
bug (fix) in firebug's net panel Futurist: To fix education, think Web 2.0 Tech News on ZDNet Fix A Gene Fix for Parkinson's? -- Kaiser 2007 (621): 3 -- ScienceNOW Paroles Coldplay Fix You lyrics - musique en parole X500+ Glofiish GPS SiRF III instant fix intégré + Cartographie ... Drill Fix DFR : Perçage : L'Expo Permanente : salon de l'industrie ... Diodes Slim Fix V4 (Ps Two) Can the Germans fix Wikipedia? Trance Fix - Your #1 trance resource Exactitude Edition limitée par Pierre Fix-Masseau sur AllPosters.fr Télécharger LSP-Fix - 01net. Telecharger.com : téléchargement du ... GigaByte 8INXP / Fix AGP-PCI - X86-secret.com Forums Tablar 19“ – Fix Easy • • • • • • • Plateau 19“ – Fix Easy • • • • • • Performance Fix pour Devastation Florida Sphère :: Voir le sujet - ID-FIX TRIO P3 MODULAR SYSTEM TRI-FIX TANGO Immobilier Fix Saint Geneys Screwfix.com - Where the Trade Buys Fix-It Utilities 5.0 (français, WINDOWS) Forum Snow-FR -> Les Fix trekking nepal trekking fix departure trekking au nepal RAP FIX, Fixation ou collage Paul Fix, tous les films avec Paul Fix Cooling-Masters -> Compatibilité fix 775 nexXxos Xp avec 1a-sl2 ? Fix Me Now de Garbage : paroles et extrait - Fluctuat.net Fonctions Int, Fix (Visual Basic) Vidéos qui correspondent a vôtre recherche : tag:"Sidepodcast ... Forums de wow-europe.com -> [INADMETTABLE] Fix teh banner ffs ... Conklin Systems - Palm/Pilot Pages 1x13 - Le Remède / The Fix - Heroes, la série diffusée sur TF1 en ... Skirando -- Compro-Vendo - Vends Ski dynafit+fix TLT + peaux Fix It with Fix Profil de Fix (Admin) Télécharger Fix My Registry 2.3 sur Ratiatum.com - Média ... Lèvres Fix'Intense Tenue 10 h - Embellisseurs des lèvres - Zlio.com FIX-SAINT-GENEYS, une reproduction de Redirect page SKI+FIX+CHAUSSURES A 20 euros LE TOUT. - achat billets, loisirs ... Adobe - Photoshop : For Macintosh : Mac OS X Keyboard Shortcut Fix BUG FIX TRANSPARENCE PNG IE (SIMPLE) png, simple, pngfix, iexplore ... Télécharger Avi Fix Repair Joiner. Fixez les dossiers d'avi de ... Zirh FIX – Gel atténuant pour imperfections du visage – Comptoir ... Sugar Fix - Sweets and Candy - UK Sweets, US Candy, Lollies, Jelly ... [Suggestion] - Section sécurité et fix - Forums Joomlafacile Télécharger Patch "Computer Player fix" pour Age of empires 2 ... Acheter et Telecharger Fix-It Utilities sur Softela.fr, N°1 ... Flame Fix - Gas & Oil boiler service & repair & solar heating ... SPACE.com -- NASA Eyes Space Shuttle Fuel Tank Fix Decapitation Victim Tries To Fix Eyes - Health News Story - KGTV ... Huber Technology: Fix-Rail® Erweiterungselement Mac Rumors: Apple Acknowledges iMac Freezing Issue, Fix In Works Paroles Can You Fix This - Kate Ryan - Musique Ados.fr The Hindu : International : Astronauts fix solar panel Swarovski Hot Fix and Flat Back Crystal Rhinestones ... Mod XX Century 2.11 Mi24 fix Civilization 4 Mods Warlords v2.08 Hotseat Fix Civilization 4 : Warlords LUX ELEMENTS®- FIX - Tableau de chevilles Q-fix - home computer support Namespaces part 4.1 (What namespaces don't fix (part 1)) - David ... Attelage fix