Issues: Find and fix problems

Sam Dutton
Sam Dutton
Sofia Emelianova
Sofia Emelianova

Use the Issues panel to find solutions to problems detected by the browser, such as cookie issues and mixed content.

Overview

By collecting and grouping common problems, the Issues panel reduces notification fatigue and clutter in the Console.

As of now, the Issues panel reports:

Future versions of Chrome will support more issue types.

Open the Issues panel

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

    The Open Issues button with a red icon.

    Alternatively, select Issues from the More tools menu. More tools menu.

    The Issues panel in More tools menu.

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

    The Issues panel with one more issues found after reloading the page.

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.

The Console with an obscure cookie warning.

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

View items in the Issues panel

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

  1. Click an item in the Issues panel to expand the issue and get guidance on how to fix it and find affected resources.

    The Issues panel with a cross-site cookie issue expanded.

    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 the items in AFFECTED RESOURCES to view issues in context.

Group issues by kind

The Issues panel 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:

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

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

Issues grouped in three kinds: Page errors, Breaking changes, and Improvements.

Include third-party issues

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

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

Third-party cookie without a linked resource in the Affected Resources section.

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

Hide issues

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

The Hide issues like this option in the three-dot menu next to an issue.

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

The Hidden issues section.

To reveal all issues, click Unhide all. To reveal a specific issue, select Unhide issues like this from the Three-dot menu. 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.

The three-dot menu with an option to hide the Improvements group.

View issues in context

To investigate an issue:

  1. In the AFFECTED RESOURCES section, click 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.

    The Affected Resources section with a link to the affected request.

  2. Scroll to view the item with a problem: in this case, the cookie ck02. Hover over the Information. information icon on the right to see the problem and how to fix it.

    The Network panel shows a tooltip when you hover over the information icon.