Fix Links in Devtools Console

November 29, 2023 tech full-stack

So, I'm right now working on moving hansanderson.com from a Wordpress-to-static S3 site to a Laravel Jigsaw-to-static S3 site. During this, I found that while my WP docker setup had my test lcl site at http://localhost:8282, when I had built it, apparently I was using http://dist1nc7ive.test. A little nuance about WP that drives me crazy: when you upload an image, it records it using the full path, including domain.

Anyway, I was copy and pasting the images into markdown files in VS Code and I couldn't see some of them, so I created this little devtools console script to reveal them. It's not a permanent solution to 404 images but it works for little things like this:

let images = document.querySelectorAll('img');

for (x in images) {
    let img = images[x];
    if (!img.src) continue;
    img.src = img.src.replace('dist1nc7ive.test', 'localhost:8282');
}

Worked like a charm - the images instantly loaded, and I could rip off my own site.