JavaScript 30天编码挑战——第 9 天

人邮快递
295 阅读3分钟

这是我参与更文挑战的第11天，活动详情查看： 更文挑战

Must Know Dev Tools Tricks

这个模块主要是应用于 console 面板工具的一些使用调试技巧，如果硬要说实现什么效果的话，那就是前端开发第一步、前开开发必备指南、论前端开发各种调试骚技巧、前端人的调试控制台多样性.......(预知详情如何，且按 F12 打开控制台)，眼过千遍，不如手过一遍。

一、效果展示

index-FINISHED.html

image.png

二、实现

最终代码

  <script>
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }

    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        if(!this.isDev) return;
        window.console.warn(...args);
      },
      error(...args) {
        if(!this.isDev) return;
        window.console.error(...args);
      },
      assert(...args) {
        if(!this.isDev) return;
        window.console.assert(...args);
      },
      dir(...args) {
        if(!this.isDev) return;
        window.console.dir(...args);
      },
      count(...args) {
        if(!this.isDev) return;
        window.console.count(...args);
      },
      time(...args) {
        if(!this.isDev) return;
        window.console.time(...args);
      },
      timeEnd(...args) {
        if(!this.isDev) return;
        window.console.timeEnd(...args);
      },
      
    };

    console.log(123,456);

    let name = "Alex";

    // Regular
    console.log(123,456);
    // Interpolated
      console.log("My name is %s !!!","Alex");
      console.log("I have %f dollars !!!",3.45);
      console.log("I have %d dollars !!!", 3.45);

      console.log(`My name is ${name} !!!`);
    // Styled

    // warning!
      console.warn("警告！！")
    // Error :|
      console.error("错误！！");
    // Info

    // Testing
      console.assert(true,"讯息");
      console.assert(false,"讯息");
      console.assert('',"讯息");
      console.assert(0,"讯息");
      console.assert(NaN,"讯息");
      console.assert(null,"讯息");
      console.assert(undefined,"讯息");
    // clearing

    // Viewing DOM Elements
     let p = document.querySelector("p");

     console.log(p);
     console.log(dogs);

     console.dir(p);
     console.dir(dogs);

    // Grouping together

    // counting
    console.count('Wes');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');

    
    // timing
      console.time("test");

      let i;
      let j;
      for(i=1;i<100000;i++){
          j = i;
      }
      console.timeEnd("test1");

      console.time("test2");
      for(i=1;i<100000;i++){
         let j = i;
      }
      console.timeEnd("test2");
  </script>

三、总结回顾

看这个模块标题就知道，这是一个练习的内容部分，是属于必备技能，只要以实践练习为主。

过程分解

1.开胃宝 先学一招，从一个大神那里的视频里学到了这样一种设置方式：

    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log(...args);
      }
    };

    console.log(123,456);

那么这样的话，控制台显示的还是正常的 .log 结果吗？ image.png 显而易见，它是的。

这种设计方式其实跟之前 vue 项目里边的在打包的时候关闭 cosole 和 debugger 的显示是一个道理，只不过这里是做了一个简单的实现操作。

当我们打包的时候，不需要显示 cosole 的时候，我们只需要将 isDev 的值改为 false 就好。

  1. Interpolated 这个类似 C 语言的字符串替换模式。
  • %s 字符串
  • %d 整数
  • %f 浮点值
  • %o Object
  • %c 设定输出的样式，在之后的文字将按照第二个参数里的值进行显示
    let name = "Alex";

    // Interpolated
      console.log("My name is %s !!!","Alex");
      console.log("I have %f dollars !!!",3.45);
      console.log("I have %d dollars !!!", 3.45);

      console.log(`My name is ${name} !!!`);

image.png

这里还有模板字符串的用法，当然，建议还是多使用这种写法，毕竟是 es6 时代了嘛！

  1. Styled 这个功能还是非常有意思的。
let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      }
    };

    console.log(123,456);

    let name = "Alex";

    // Regular
    console.log(123,456);
    // Interpolated
      console.log("My name is %s !!!","Alex");
      console.log("I have %f dollars !!!",3.45);
      console.log("I have %d dollars !!!", 3.45);

      console.log(`My name is ${name} !!!`);
    // Styled

颜色就这样改变了：

image.png

  1. warning!
    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        window.console.warn(...args);
      }
      
    };

    // warning!
      console.warn("警告！！")

image.png

  1. Error :|
    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        window.console.warn(...args);
      },
      error(...args) {
        window.console.error(...args);
      }
    };
    
    
    // Error :|
      console.error("错误！！");

image.png 6. Info

关于 info , MDN 给出了这样的解释：

image.png 所以，我们在 google 浏览器看到的和正常的 log 并无区别：

image.png 但是，在 firefox 浏览器看到的却是这样的效果,一下子就跟 MDN 的解释——呼应上了：

image.png 7. Testing

    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        if(!this.isDev) return;
        window.console.warn(...args);
      },
      error(...args) {
        if(!this.isDev) return;
        window.console.error(...args);
      },
      assert(...args) {
        if(!this.isDev) return;
        window.console.assert(...args);
      }
      
    };
    

    // Testing
      console.assert(true,"讯息");
      console.assert(false,"讯息");
      console.assert('',"讯息");
      console.assert(0,"讯息");
      console.assert(NaN,"讯息");
      console.assert(null,"讯息");
      console.assert(undefined,"讯息");

请注意， true 的时候并没有。 image.png 8. clearing

这个东西就没什么好说的了，这个就是控制台的这个按键的功能，当然你使用快键键会更加方便一些，随你。 image.png 9. Viewing DOM Elements

    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        if(!this.isDev) return;
        window.console.warn(...args);
      },
      error(...args) {
        if(!this.isDev) return;
        window.console.error(...args);
      },
      assert(...args) {
        if(!this.isDev) return;
        window.console.assert(...args);
      },
      dir(...args) {
        if(!this.isDev) return;
        window.console.dir(...args);
      }
      
    };
    
    
    // Viewing DOM Elements
     let p = document.querySelector("p");

     console.log(p);
     console.log(dogs);

     console.dir(p);
     console.dir(dogs);

image.png .dir 其实就是将你操作的这个对象下边所有的东西展开。

我们可以用一种更直观的方式进行查看，比如里边我自己的这个console：

image.png 跟我上边定义的 console 是不是就已经呼应上了呢？当然！！！！

  1. Grouping together 那说起这个玩意那就是之前提到的 table 了，因为有过记录，这里就不过多赘述了。
  2. counting
    let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        if(!this.isDev) return;
        window.console.warn(...args);
      },
      error(...args) {
        if(!this.isDev) return;
        window.console.error(...args);
      },
      assert(...args) {
        if(!this.isDev) return;
        window.console.assert(...args);
      },
      dir(...args) {
        if(!this.isDev) return;
        window.console.dir(...args);
      },
      count(...args) {
        if(!this.isDev) return;
        window.console.count(...args);
      },
      
    };



    // counting
    console.count('Wes');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');

image.png 12. timing

     let console = {
      isDev:true,
      log(...args) {
        if(!this.isDev) return;
        window.console.log("%c住手","font-size:60px; color:#2396db")
        window.console.log(...args);
      },
      warn(...args) {
        if(!this.isDev) return;
        window.console.warn(...args);
      },
      error(...args) {
        if(!this.isDev) return;
        window.console.error(...args);
      },
      assert(...args) {
        if(!this.isDev) return;
        window.console.assert(...args);
      },
      dir(...args) {
        if(!this.isDev) return;
        window.console.dir(...args);
      },
      count(...args) {
        if(!this.isDev) return;
        window.console.count(...args);
      },
      time(...args) {
        if(!this.isDev) return;
        window.console.time(...args);
      },
      timeEnd(...args) {
        if(!this.isDev) return;
        window.console.timeEnd(...args);
      },
      
    };
    
    
     // timing
      console.time("test");

      let i;
      let j;
      for(i=1;i<100000;i++){
          j = i;
      }
      console.timeEnd("test1");

      console.time("test2");
      for(i=1;i<100000;i++){
         let j = i;
      }
      console.timeEnd("test2");

image.png

四、重难点

只有重没有难，因为再难也得学会，因为你是人上人（打工这件小事:cry:），所以你得学会。

147CB7F3.jpg

avatar
文章
阅读
粉丝