web.dev LIVE is now over! Head to web.dev/live to watch all the sessions, see top Q&A, and more.

Find And Fix Problems With The Chrome DevTools Issues Tab

The Issues tab in Chrome DevTools reduces the notification fatigue and clutter of the Console. Use it to find solutions to problems detected by the browser, such as cookie issues and mixed content.

Open the Issues tab

  1. Visit a page with issues to fix, such as samesite-sandbox.glitch.me.
  2. Open DevTools.
  3. Click the Go to Issues button in the yellow warning bar.
    Chrome DevTools screenshot showing yellow warning bar for Issues 
    detected.
    Alternatively, select Issues from the More tools menu.
    Chrome DevTools screenshot showing Issues tab in More tools menu.
  4. Once you're on the Issues tab, click the Reload page button if necessary.
    Chrome DevTools screenshot showing Issues tab with 'Reload page' button.
    You'll notice that issues reported in the Console (such as the cookie warnings here) are quite hard to understand. It's not clear what needs to be done to fix the issues reported.
    Chrome DevTools screenshot showing Issues tab with two 
       cookie issues.

View items in the Issues tab

The Issues tab presents warnings from the browser in a structured, aggregated, and actionable way.

  1. Click an item in the Issues tab to get guidance on how to fix the issue and find affected resources.
    Chrome DevTools screenshot showing a cookie issue open in the Issues tab.
    Each item has four components:
    • A headline describing the issue.
    • A description providing the context and the solution.
    • An AFFECTED RESOURCES section that links to resources within the appropriate DevTools context, such as the Network panel.
    • Links to further guidance.

  2. Click on AFFECTED RESOURCES items to view details. In this example, there is one cookie and one request affected.
    Chrome DevTools screenshot showing affected resources open in the Issues tab.

View issues in context

  1. Click on a resource link to view the item in the appropriate context within DevTools. In this example, click samesite-sandbox.glitch.me to show the cookies attached to that request.
    Chrome DevTools screenshot showing affected resources open in the Issues tab.
  2. Scroll to view the item with a problem: in this case, the cookie ck02. Hover over the information icon on the right to see the problem and how to fix it.
    Chrome DevTools screenshot showing issue with a resource opened from the Issues tab.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.