Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How Chrome dev tools shows cookies

When I open the resources panel of Chrome's dev tools, I see a ton cookies set across many domains. I understand the definitional difference between a first party and third party cookie, but I'm still understanding what it means.

How does Chrome show 1st party cookies vs 3rd party cookies? When I visit Vice.com, for instance, I see many domains in the left hand column (www.vice.com, platform.tumblr.com, etc); if I select www.vice.com on the left hand column, I see many more domains (.google.com, .ads.pubmatic.com, .scorecardresearch.com, etc).

How should I interpret this?

enter image description here

like image 773
Peter Avatar asked May 05 '15 22:05

Peter


People also ask

Which Dev Tool tab of the browser will show you the cookies stored?

In the Session tab, you can see where cookies are stored. You can also see which cookies are session cookies and which are persistent cookies (those that operate for a duration of time).

How do I know if my website uses cookies?

To find out if a website has cookies, check the 'developer console' of your browser and, in some cases, the address bar. Keep in mind that you should browse the site in private mode to prevent loading cookies from other websites. Also, make sure to turn off the blocking of cookies from your browser.

How do you view cookies?

Android ChromeStart Chrome, then open the options menu and scroll down to 'Settings', followed by 'Site setttings'. You can now choose whether to allow sites to save and read cookie data. To view and delete cookies, select 'Data stored' - you will see a list of all the sites which have stored cookies on your device.

How do I view cookies in Chrome DevTools?

Open Chrome DevTools. Click the Application tab to open the Application panel. Under Storage expand Cookies, then select an origin. Figure 1. The Cookies pane The Cookies table contains the following fields: Name. The cookie's name.

How do I edit cookies in developer tools?

The location of the Application tab in Developer Tools. After choosing the Application tab, a menu should appear on the left. This will contain options such as “Local Storage”, “IndexedDB” and “Cookies”. Expand the “Cookies” section and click on the URL of the website that you want to modify cookies for.

What are HTTP cookies and how do I view them?

HTTP Cookies are mainly used to manage user sessions, store user personalization preferences, and track user behavior. They are also the cause of all of those annoying "this page uses cookies" consent forms that you see across the web. This guide teaches you how to view, edit, and delete a page's cookies with Chrome DevTools. Open Chrome DevTools.

What is Chrome DevTools and how does it work?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.


3 Answers

The Chrome DevTools documentation provides more information about this (quoted from a previous version of this page):

Cookies are listed by domain. This includes the main document as well as all nested frames. Selecting one of these “frame groups” displays all cookies, for all resources, for all frames in that group. There are two consequences of this grouping to be aware of:

  • Cookies from different domains may appear in the same frame group.
  • The same cookie may appear in several frame groups.
like image 136
Stéphane Avatar answered Oct 14 '22 01:10

Stéphane


If I am interpreting this correctly, I believe the values on the right show all of the cookies that are related to the domain you have selected on the left. In this case you have www.vice.com selected in blue. The other domains listed below this are the source domains of all the cookies found on vice.com (which is why you will see domain names to the right that are similar to the ones on the left).

If you click through the other domains in the left column, you will find all of the cookies that that particular domain has on vice.com.

I hope this helps!

like image 1
Matt Avatar answered Oct 14 '22 01:10

Matt


I believe @matt's comment more correctly answers it:

I did a little more research and found this page: developer.mozilla.org/en-US/docs/Tools/Storage_Inspector It's about mozilla developer tools but is still the same concept. Look at the information near the top of the page. It seems that you are correct. The listing on the left are iframes and everything listed to the right are the cookies held inside that iframe. – Matt 18 hours ago

like image 1
Peter Avatar answered Oct 14 '22 00:10

Peter