Continuing from Day#2 where we were exploring the developers tools with Firefox, this Day#3 we are going to explore a bit further on what we can do using this tool.
Last time we changed the Google logo for a dog. Even though we know it is not permanent, since it goes to default when you refresh the page, it is quite fun to be able to play around.
Therefore today I am going to show you the CONSOLE TAB, which you can find right next to Inspector Tab:
The main things that the console allows to do:
- It allows to write JavaScript.
- It allows to modify the DOM (document object model).
Just to remind you.. to acces the developer tools you have to right click on the browser and select Inspect Elements.
Let's grab a random image from Google. Last time we picked a dog, let's look for a Hashkings picture today, just for fun. Remember how we did it last time. Just google for the image and copy the address link.
Next thing you going to do is to go to the console tab and select the image div from the windows html.
(Don't worry if you are lost right now, we will explain more later on.)
So let's write some code:
document.querySelector('img')
When you do as I say, you should get the Google img highlighted and the result of what we are selecting in the line below our code. Just like this:
Press enter and you will have the IMG DIV element selected:
Next thing we want to do is to assing this div to a variable. Don't worry again we will explain everything in more detail later.
const ourImage = document.querySelector('img');
And now we want to change the src attribute to the DIV image and change the link like we did (manually) the previous day:
ourImage.setAttribute('srcset', 'https://farm.hashkings.app/static/media/logo.20789b27.png');
And BOOM!!! We now have a Google Search page with the Hashkings logo!
We could actually also resize it like this:
Smaller:
ourImage.setAttribute('width', 100);
Bigger:
ourImage.setAttribute('height', 600);
Let's take a further step into this... and write a FUNCTION:
function changeImage(url) {
document.querySelector('img').setAttribute('srcset', url);
}
Once you have written your function, you can now call it with the link of the image you want to change the logo to. Just like this:
changeImage('https://671060209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeCj01DpLI9aI3V81LD%2Fuploads%2FUGPgxqiuiBkieFbO59Z0%2FHk_PNG.png?alt=media&token=6ece662e-92b8-425c-b53a-76db0b08324c')
And again if should work and change the logo image in the Browser:
As always I hope you enjoyed it and could follow me along. If you have any questions, please feel free to post a comment and I will try my best to answer you!
