https://developer.chrome.com/docs/devtools/console/understand-messages Chrome for Developers * Get inspired Blog Docs * Build with Chrome * Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. * Web Platform * Capabilities * Extensions * Chrome Web Store * Chromium * Aurora * Web on Android * Origin trials * Release notes * Productivity * Create the best experience for your users with the web's best tools. * DevTools * Lighthouse * Chrome UX Report * Accessibility * Get things done quicker and neater, with our ready-made libraries. * Workbox * Puppeteer * Experience * Design a beautiful and performant web with Chrome. * AI * Performance * CSS and UI * Identity * Payments * Privacy and security * Resources * More from the Chrome team. * All documentation * Baseline * web.dev New in Chrome [ ] * English * Deutsch * Espanol - America Latina * Francais * Indonesia * Italiano * Nederlands * Polski * Portugues - Brasil * Tieng Viet * Turkce * Russkii * `bryt * l`rbyW@ * frsy * hiNdii * baaNlaa * phaasaaaithy * Zhong Wen - Jian Ti * Zhong Wen - Fan Ti * Ri Ben Yu * hangugeo Sign in * Chrome DevTools DevTools Panels * Elements * Console * Sources * Network * Performance * Memory * Application * Recorder * Rendering More panels * Autofill * Security * Sensors * WebAudio * WebAuthn * Animations * Changes * Coverage * Developer Resources * CSS Overview * Issues * Media * Memory Inspector * Network conditions * Network request blocking * Performance monitor * What's new Settings Accessibility [ ] Chrome for Developers * * Get inspired * Blog * Docs + More + DevTools + Panels o More + More panels o More + Settings + Accessibility * New in Chrome * Get started * Overview * Open Chrome DevTools * What's New in DevTools * Customize DevTools * DevTools Tips * Commands and shortcuts * Run commands in the Command Menu * Disable JavaScript * Keyboard shortcuts * Simulate mobile devices with Device Mode * Find text across all loaded resources with Search * Elements panel * Overview * DOM + View and change the DOM + View properties of DOM objects + Badges references * CSS + View and change CSS + Find invalid, overridden, inactive, and other CSS + Inspect and debug with the Color Picker + Inspect grid layouts + Inspect and debug flexbox layouts + Inspect and debug container queries + Feature reference * Console * Overview * Understand errors and warnings better * Log messages * Run JavaScript * Watch JavaScript in real-time * Format and style messages * Feature reference * API reference * Utilities API reference * Sources * Overview * Debug JavaScript * Pause your code with breakpoints * Run snippets of JavaScript * Debug original code instead of deployed with source maps * Edit and save files in a workspace * Override web content and HTTP response headers locally * JavaScript debugging reference * Debug C/C++ WebAssembly * Network * Inspect network activity * Features reference * View page resources * Performance * Analyze runtime performance * Features reference * Timeline event reference * Optimize web speed * Profile Node.js performance * Get actionable insights on your website's performance * Get started with site speed * Memory * Overview * Memory terminology * Fix memory problems * Record heap snapshots * Allocation Profiler tool * Application * Overview * Debug Progressive Web Apps * View and edit + Local storage + Session storage + IndexedDB data + Web SQL data * View, add, edit, and delete cookies * View cache data * Test back/forward caching * Debugging speculation rules * Debug background services * View frame details * View Application Cache data * Recorder * Record, replay, and measure user flows * Features reference * Customize the Recorder with extensions * Rendering * Overview * Discover issues with rendering performance * Emulate CSS media features * Apply rendering effects * More panels * Inspect and debug saved addresses with the Autofill panel * Understand security issues with the Security panel * Emulate device sensors with the Sensors panel * View WebAudio API metrics with the WebAudio panel * Emulate authenticators with the WebAuthn panel * Inspect and modify animations with the Animations panel * Track changes to HTML, CSS, and JavaScript with the Changes panel * Find and analyze unused code with the Coverage panel * View and manually load source maps with the Developer Resources panel * Identify potential CSS improvements with the CSS Overview panel * Find and fix problems with the Issues panel * Debug media players with the Media panel * Inspect ArrayBuffer, TypedArray, DataView or Wasm memory with the Memory inspector panel * Override the user agent string with the Network conditions panel * Selectively block resources with the Network request blocking panel * Analyze runtime performance in real-time * What's new * Remote debugging * Remote debug Android devices * Access local servers and Chrome instances with port forwarding * Remote debugging WebViews * Accessibility * Features reference * Contrast and readability * Track elements focus * Navigate DevTools with assistive technology * Settings * Overview * All settings + Preferences + Workspace + Experiments + Ignore list + Devices + Throttling + Locations + Shortcuts * Resources * Engineering blog * Build with Chrome * Web Platform * Capabilities * Extensions * Chrome Web Store * Chromium * Aurora * Web on Android * Origin trials * Release notes * Productivity * DevTools * Lighthouse * Chrome UX Report * Accessibility * Workbox * Puppeteer * Experience * AI * Performance * CSS and UI * Identity * Payments * Privacy and security * Resources * All documentation * Baseline * web.dev * Elements * Console * Sources * Network * Performance * Memory * Application * Recorder * Rendering * Autofill * Security * Sensors * WebAudio * WebAuthn * Animations * Changes * Coverage * Developer Resources * CSS Overview * Issues * Media * Memory Inspector * Network conditions * Network request blocking * Performance monitor * What's new * Home * Docs * Chrome DevTools * More panels Understand errors and warnings better with Gemini Stay organized with collections Save and categorize content based on your preferences. Yang Guo Yang Guo Sofia Emelianova Sofia Emelianova Jecelyn Yeen Jecelyn Yeen To help you understand errors and warnings in the Console, Chrome DevTools can provide detailed explanations. See also How your data is used and Known issues. Requirements To use this feature, make sure that you: * Are located in one of the supported regions and are at least 18 years old. * Using Chrome version 125 or later. * Are signed into Chrome with your Google Account. * Have English (US) selected in settings Settings > Preferences > Appearance > Language in DevTools. Languages setting location... Language setting in DevTools. * Turned on 'Understand console messages with AI' in DevTools. Note: You may not have access to this feature right away even when you satisfy the requirements because we are rolling out this feature in stages. Turn on 'Understand console messages with AI' in DevTools Open DevTools and navigate to settings Settings. Under Preferences > Console, turn on check_box Understand console messages with AI. Setting location... The 'Understand console messages with AI' setting. If you can't turn on the checkbox, a info information icon indicates that one or more of the requirements haven't been met. Hover over the icon to learn more. Get explanations for console messages In Chrome, do the following: 1. Visit this demo page. 2. Open DevTools and inspect the page. 3. Open the Console to inspect console messages. 4. On the demo page, click inside the search box. The drop-down menu fails to fetch and the Console shows an error. An error in the Console when a drop-down menu fails to fetch. 5. Hover over the CORS error message. An Lightbulb spark. Understand this error button appears to the right of the error message. The 'Understand this error' button. 6. To bring up a dialog, click Lightbulb spark. Understand this error. If you're using this feature for the first time ... 1. Read the privacy notice to learn how Google uses your data and click Next. The dialog with the privacy notice. Here, you can also Cancel the dialog or Disable this feature in settings. 2. In the next dialog window, read the legal notice to learn the things you should know. To accept the relevant Terms of Service, enable the check_box checkbox and click Continue. The dialog with the legal notice. Here, you can also go Back or Disable this feature in settings. 7. In the dialog window, learn what data will be sent to Google. To view the data in new tabs, you can click the corresponding links. To get an explanation, click Continue. The dialog with the data to send. Tip: To let the Console pick up all the relevant information from the network log, reload the page and recapture the log. 8. After a few seconds, an explanation will appear below the console error. AI-generated explanation of the error. If you don't think the explanation is satisfactory, you can click Use search instead to open a new tab with search results for the error. We would greatly appreciate your feedback. Click thumb_up thumbs up or thumb_down thumbs down buttons to help us continuously improve this feature. Note: To report the generated content, click report Report legal issue and follow instructions in a new tab. How your data is used This notice and our privacy notice describe how Chrome DevTools handles your data. Read them carefully. Chrome DevTools uses the console message, associated stack trace, related source code, and the associated network headers as input data. When you use Understand this message, Google collects this input data, generated output, related feature usage information, and your feedback. Google uses this data to provide, improve, and develop Google products and services and machine learning technologies, including Google's enterprise products such as Google Cloud. To help with quality and improve our products, human reviewers may read, annotate, and process the above-mentioned input data, generated output, related feature usage information, and your feedback. Don't include sensitive (for example, confidential) or personal information that can be used to identify you or others in your prompts or feedback. Your data will be stored in a way where Google cannot tell who provided it and can no longer fulfill any deletion requests and will be retained for up to 18 months. We may not collect data to improve our product if your Google Account is managed by an organization. As you try Understand this message, here are key things to know: * Chrome DevTools uses console message, associated stack trace, related source code, and the associated network headers to provide answers. * Chrome DevTools uses experimental technology, and may generate inaccurate or offensive information that doesn't represent Google's views. Voting on the responses will help make this feature better. * This feature is experimental and subject to future changes. * Use generated code snippets with caution. To use the feature, you need to agree that your use of Understand this message is subject to the Google Terms of Service and the Generative AI Additional Terms of Service. Known issues Chrome DevTools uses Google's large language models to generate an explanation. Large language models, or LLMs, are a new and active area of research. The responses that LLMs generate are sometimes questionable or even outright wrong. It is important that you understand that the results may be inaccurate or misleading, so always double check! Wrong explanation LLMs generate content that sounds likely and plausible. In most cases, this content contains truthful and useful insights that can help you understand an error or warning in the relevant context. Modern web development and debugging is a challenging craft with a high level of complexity that requires years of experience to become proficient in. Sometimes, the responses that LLMs produce sound convincing but are actually misleading or meaningless to a human web developer. We are doing our best to continuously improve the quality and correctness of generated insights. You can help us by submitting feedback when you encounter wrong explanations. Prompt injection Many of LLM applications are susceptible to a form of abuse known as prompt injection. This feature is no different. It is possible to trick the LLM into accepting instructions that are not intended by the developers. See the following harmless example: An example of a prompt injection. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2024-05-10 UTC. [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] * Contribute + File a bug + See open issues * Related content + Chromium updates + Case studies + Archive + Podcasts & shows * Connect + @ChromiumDev on X + YouTube + Chrome for Developers on LinkedIn * Terms * Privacy * Manage cookies * English * Deutsch * Espanol - America Latina * Francais * Indonesia * Italiano * Nederlands * Polski * Portugues - Brasil * Tieng Viet * Turkce * Russkii * `bryt * l`rbyW@ * frsy * hiNdii * baaNlaa * phaasaaaithy * Zhong Wen - Jian Ti * Zhong Wen - Fan Ti * Ri Ben Yu * hangugeo