如何将自己的文本添加到网站的检查元素？

Question

我对前端开发完全陌生，在检查代码时（在 Mac 上使用 cmd+option+J），我发现 Airbnb 上有一个小图像和消息。我怎样才能复制这个？

Answer 1

在javascript中，你必须创建一个console.log（“在此处添加消息”），它会打印到网页的控制台。这部分发生在后端。

Answer 2

你想要这样的东西吗？

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');