How do I add my own text to the Inspect Element to a website?

Question

I am totally new to front end development and while Inspecting code (using cmd+option+J on Mac) I found that Airbnb has a little image & message on there. How can I replicate this?

Answer 1

in javascript you have to make an console.log("add message here"), it prints to the console of the webpage. This part is happening in the back end.

Answer 2

Do you want something like this?

console.image = function(url, height = 100) {
    const image = new Image();
    image.crossOrigin='anonymous';
    image.onload = function() {
        // build a data url
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.height = height || image.naturalHeight;
        canvas.width = canvas.height * image.naturalWidth / image.naturalHeight;
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        const dataUrl = canvas.toDataURL();
        const style = [
            'font-size: 1px;',
            `padding: ${canvas.height}px ${canvas.width}px;`,
            `background: url(${dataUrl}) no-repeat;`,
            'background-size: contain;'
        ].join(' ');
        console.log('%c ', style);
    };
    image.src = url;
};
console.image('https://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg');