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.
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:
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.
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.
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.
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:
This is a great tool to keep in your kit. I'm sure I'll be using it a lot.
#aibetter