Cookie breakpoints: Can DevTools break when a cookie is set?

Question

I'd like to set breakpoints triggered when a cookie is being set, either by HTTP response header Set-Cookie or by DOM (JavaScript) document.cookie='cookie1=value1'. I need this because when I go to some websites they have huge amount of requests and it's hard to find which one of those sets the cookie I'd like to inspect (to debug code around it).

Is this possible to do in Chrome, Firefox or any other browser?

Answer 1

The question asks for two ways how cookies can be set. So this requires two separate approaches.

Set via JavaScript

Firebug had that feature back then, though to my knowledge none of the current developer tools have that feature.

For Chrome, I created a feature request to add that some time ago. And for Firefox there is also a feature request.

Workaround

Until the browser vendors implement that feature you can use a workaround by manually setting the breakpoint(s).

To do that you have to search for "document.cookie" within all JavaScript sources and set (conditional) breakpoints where the property gets assigned a new value. And if the code uses the newer Cookie Store API, you have to do the same with "cookieStore.set".

In Chrome

1. Press Ctrl+Shift+F/Cmd+Shift+F to open the Search panel.
2. Enable the button to search for regular expressions.
3. Type document\.cookie\s*= or cookieStore\.set into the search field and hit Enter.
4. Double-click the first match.
5. a) Set a breakpoint on the matched line (you might need to pretty-print the script first)
   b) To only stop when a specific cookie is set, right-click the line bar, choose Add conditional breakpoint... from the context menu and enter cookiename === 'x', where cookiename is the name of the variable that holds the cookie name and 'x' is the name of the cookie you want to stop at.
6. Repeat steps 4 and 5 for the rest of the matches.

In Firefox

1. Switch to the Debugger panel.
2. Press Ctrl+Shift+F/Cmd+Shift+F to open the search field.
3. Type document.cookie or cookieStore.set into the search field and hit Enter.
4. Double-click the first match where it's being set.
5. a) Set a breakpoint on the matched line (you might need to pretty-print the script first)
   b) To only stop when a specific cookie is set, right-click the line bar, choose Add condition from the context menu and enter cookiename === 'x', where cookiename is the name of the variable that holds the cookie name and 'x' is the name of the cookie you want to stop at.
6. Repeat steps 4 and 5 for the rest of the matches where document.cookie is being set / cookieStore.set() is being called.

Set via Set-Cookie header

As the Set-Cookie header is part of a network request, the best place to look for it is the Network panel.

The headers are not directly shown in the list of requests. Though there is a way to search for them in the browsers. As both Chrome and Firefox offer a very similar UI, here are the steps for both:

1. Switch to the Network panel.
2. Reload the page.
3. Click the magnifier glass icon in the panel's toolbar to open the search sidebar.
4. Enter the name of the cookie and hit Enter
5. Go through the list of matches and check where the Set-Cookie header is listed.

---

The actual question here is obviously "Where does a specific cookie come from?".

To get a centralized answer to that question, I created a feature request for Firefox to add the origin information of cookies to the Storage Inspector some time ago.