Issues: Find and fix problems

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 Open Issues button next to Settings in the right corner of the action bar at the top. Depending on issue severity, the button can have a red , yellow , or blue icon.

   

   Alternatively, select Issues from the More tools menu.

   

4. Once you're on the Issues tab, you might want to reload the page to catch even more issues, this time occurring during page load.

   

The Console might also show you issues reported by the browser. However, you'll notice that such issues (like the cookie warning in the screenshot below) are hard to understand. It's not clear what you need to do to fix it.

On the other hand, the Issues tab provides you with actionable insights.

# 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 expand the issue and get guidance on how to fix it and find affected resources.

   

   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, Sources, Elements, and other panels.
   • Links to further guidance.

2. Click on the items in AFFECTED RESOURCES to view issues in context.

# Group issues by kind

The Issues tab counts the number of affected resources for each issue and shows it next to their headlines. Additionally, you can organize the issues by their severity in three group kinds:

• Page Errors that Chrome reports.
• Breaking Changes such as deprecations.
• Improvements that DevTools suggests.

To group issues, check Group by kind in the action bar at the top of the Issues tab.

# Include third-party issues

The Issues tab shows third-party cookies issues by default.

You can find third-party cookie issues in the AFFECTED RESOURCES section missing a link.

To hide such issues, clear Include third-party cookie issues in the action bar at the top of the Issues tab.

# Hide issues

To hide an issue, select Hide issues like this from the three-dot menu next to the issue.

To see the list of hidden issues, scroll down to the Hidden issues section and expand it.

To reveal all issues, click Unhide all. To reveal a specific issue, select Unhide issues like this from the three-dot menu next to the issue.

Additionally, with grouping enabled, you can hide entire groups of issues using the same three-dot menu next to a group.

# View issues in context

To investigate an issue:

1. In the AFFECTED RESOURCES section, 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. The link takes you to the Network panel.

   

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.