美文网首页
Chrome开发者工具三个小技巧

Chrome开发者工具三个小技巧

作者: flyingjimmy | 来源:发表于2019-05-07 16:19 被阅读0次

    Hello,这篇文章的内容来自订阅的邮件,所以没办法给出链接。
    作者是ng-book的Nate,或许大家网上可以找到原文。

    1. console.table

    这个应该很直观明显,可以直接在console上试试。


    console.e.jpg

    2. 在console.log中使用CSS

    用法就是:

    console.log(
      "%cHello, World!",
      "font-size:600%;color:salmon;font-weight:bold;font-family:Mongoose; text-transform: uppercase;"
    );
    

    注意到第一个参数前面的%c没有,表示需要应用CSS样式。这样的特性甚至可以让我们加载图片(作为背景图片)。

    let src = "https://imgur.com/jFhFXNB.png";
    let img = new Image();
    img.onload = () =>
      console.log(
        "%c+",
        "background: url(" +
          src +
          "); background-size: 252px 314px; color transparent; padding: 150px 122px"
      );
    img.src = src;
    

    3. 使用await

    使用下面的代码感受一下:

    const url = "https://world.openfoodfacts.org/api/v0/product/737628064502.json";
    // Ew
    fetch(url)
      .then(response => response.json())
      .then(body => console.log(body));
    
    // let's try using await
    let response = await fetch(url).then(response => response.json());
    

    结果如下图:


    console-await.e.jpg

    相关文章

      网友评论

          本文标题:Chrome开发者工具三个小技巧

          本文链接:https://www.haomeiwen.com/subject/gdxyoqtx.html