Colours in network panel

[mooncow]

OK, maybe I'm being dim here, but can someone tell me (or point me to)
the significance of the different colours of the blobs in the network
panel in the Chrome Developer Tools? The colours seems broadly
correlated to the type of the files, but there's something else
playing a part too and I cannot figure out what.

The Developer Tools documentation (http://code.google.com/chrome/
devtools/docs/network.html) shows a nice screenshot showing blobs that
are blue, orange, green; but as far as I can see it doesn't explain
why the different colours are used. It seems from this that perhaps
HTML files are blue, CSS files green, JS files orange; but I am seeing
some JS files orange and others in yellow, and HTML files and PNG
files in purple not blue....

regards,
mooncow

[Vsevolod Vlasov]

Hello,

You are almost right:

Blue - Documents,

Green - Stylesheets,

Purple - Images,

Orange - Scripts

Yellow - XMLHttpRequests

Red - Fonts

Gray - Websockets, Other requests (e.g. flash and other plugins)

When you see JS file sin yellow, that means that this script was loaded as an XMLHttpRequest.

When you see HTML files as purple that could probably be a bug in Developer Tools or some problem on site.

For example, if you have an empty url as a background-image in <style> tag in your html:

<style>.some-class { background-image: url();} </style>

For the browser that means that you want to use your HTML document as a background image, since urls are resolved relative to the document.

This problem should have been fixed in recent versions though.

Thank you,

Vsevolod

--
Thank you,

Vsevolod Vlasov (vse...@google.com)

[mooncow]

> Blue - Documents,
> Green - Stylesheets,
> Purple - Images,
> Orange - Scripts
> Yellow - XMLHttpRequests
> Red - Fonts
> Gray - Websockets, Other requests (e.g. flash and other plugins)

Ah yes, thank you, all clear now. My page uses dojo, and the initial
dojo.js is orange and all remaining JS files are yellow as loaded
dynamically (this is a development system, not a final build).

> When you see HTML files as purple that could probably be a bug in Developer
> Tools or some problem on site.
> For example, if you have an empty url as a background-image in <style> tag
> in your html:
> <style>.some-class { background-image: url();} </style>
> For the browser that means that you want to use your HTML document as a
> background image, since urls are resolved relative to the document.
> This problem should have been fixed in recent versions though.

After a bit of experimenting I find that just putting <img /> into
a page causes the page URL itself to appear twice in the network panel
--- once at the start and once further down when the image tag is
processed --- and BOTH occurrences get coloured purple in this case.
This is with Chrome 14.0.835.202 m on Windows XP.

Many thanks for your clarifications! It might be useful for this info
to be added to http://code.google.com/chrome/devtools/docs/network.html.

mooncow

[Vsevolod Vlasov]

After a bit of experimenting I find that just putting   <img />   into

a page causes the page URL itself to appear twice in the network panel
--- once at the start and once further down when the image tag is
processed ---

Yeah, this is exactly the problem that was "fixed" (that is correct behaviour according to css spec, hence the quotes) in WebKit recently.

 

and BOTH occurrences get coloured purple in this case.
This is with Chrome 14.0.835.202 m on Windows XP.

And this is a known issue in Developer Tools, we can not distinguish these two resources because they have the same URL. :(

 

Many thanks for your clarifications! It might be useful for this info
to be added to http://code.google.com/chrome/devtools/docs/network.html.

Yes, that's a good idea :)

--