Html Question posted in
Some basic documentation can be found here.

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

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?

Inspect Element of AirBnb

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search