ARTICLE

Chrome Dev Tools AI Generated Code for Page Querying and Brainstorming

Chrome 147 added AI code generation directly in the developer console, and it's more useful than it sounds. This article walks through practical examples of using it for DOM querying, data scraping, and quick rebranding proofs of concept without writing a line of code manually.

Russ Painter

Software Architect, 8 West Consulting

June 08, 2026

Chrome version 147 added the ability to generate code within the console window. This isn't about generating code to be part of your solution, although you could copy and paste parts of this into your solution. But instead, this is mainly about debugging a running website with quick throw-away code snippets.

Turn it on

To use this feature, you have to enable it in the Developer Tools Settings. While you're there, you might as well turn on the other AI switches:

What's it good for?

Rather than slogging through the DOM, we can generate code to do this for us. If you're a JavaScript coder, this is something you always could have done manually, but would be hard to justify the time and effort for something that's just going to be thrown away. And if you're not a JavaScript coder, this sort of thing would be out of reach previously.

Example 1: Finding external images

In the console I type this

// List the urls for all 3rd party images on this page

I then press CTRL=I to generate the code, then TAB to accept the code, then ENTER to run the code. The code it generated was

(() => {
const currentHost = window.location.hostname;

// Use the DevTools $$ utility to select all image elements
const images = $$('img');

const thirdPartyUrls = images
.map(img => img.src)
.filter(src => {
try {
// img.src returns the absolute URL
const url = new URL(src);

// Filter for images where the hostname does not match the current page
// Also exclude data URIs and empty sources
return url.hostname &&
url.hostname !== currentHost &&
!src.startsWith('data:');
} catch (error) {
// Ignore invalid URLs
return false;
}
});

// Remove duplicates and sort
const uniqueUrls = [...new Set(thirdPartyUrls)].sort();

if (uniqueUrls.length > 0) {
console.log(`Found ${uniqueUrls.length} third-party image URLs:`);
console.table(uniqueUrls);
} else {
console.log("No third-party images found on this page.");
}
})();

And the output:

Since this is running againts the DOM, I'll see images brought in by 3rd party script or advertisements - things that don't necessarily exist in the source code for the page.

Example 2: Scraping FAQ data

Prompt:

// Find all of the data-pf-type="Accordion.Header" buttons and the content divs that follow them. Gather these into an array of question and answer values.

Auto-Generated Code:

(() => {
// Use the Console Utilities API ($$) to select all matching headers
const headers = $$('[data-pf-type="Accordion.Header"]');

const accordionData = headers.map(header => {
// The content is typically the immediate next sibling element
const contentPanel = header.nextElementSibling;

return {
question: header.innerText?.trim() || 'No text found',
answer: contentPanel ? contentPanel.innerText?.trim() : 'No content panel found'
};
});

// Output the gathered data as a table for easy inspection in the console
console.table(accordionData);

// Return the array for further manipulation if needed
return accordionData;
})();

Result:

For that one I needed a little bit of knowledge about the selector to use to find those elements. When you're generating the code in the console, it doesn't necessarily have an understanding of the page's contents at that point.

Example 1: Rebranding Proof of Concept

Prompt:

// Find all instances of the text "Raspberry" on this page and replace them with "Blueberry"

Generated Code:

(() => {
try {
/**
* Replaces all instances of "Raspberry" with "Blueberry"
* without disrupting the DOM structure or event listeners.
*/
const findText = /Raspberry/g;
const replaceText = "Blueberry";

// Use TreeWalker to target only text nodes
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);

let node;
while (node = walker.nextNode()) {
// Check if the text node contains the target string
if (node.nodeValue.includes("Raspberry")) {
node.nodeValue = node.nodeValue.replace(findText, replaceText);
}
}

console.log('Text replacement complete.');
} catch (error) {
console.error('An error occurred during the text replacement process:', error);
}
})();

Result: