This is the 11th day of my participation in Gwen Challenge

Must Know Dev Tools Tricks

This module is mainly applied to console panel tools using some debugging skills, if you want to achieve what effect, that is the first step of front-end development, the development of the necessary guide, front-end development of various debugging SAO skills, front-end people’s debugging console diversity……. (How to predict details, and press F12 to open the console), eye a thousand times, not as good as a hand.

1. Effect display

index-FINISHED.html

Second, the implementation

The final code

  <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(Stop "% 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("Warning!!)
    // Error :|
      console.error("Mistake!!");
    // Info

    // Testing
      console.assert(true."Message");
      console.assert(false."Message");
      console.assert(' '."Message");
      console.assert(0."Message");
      console.assert(NaN."Message");
      console.assert(null."Message");
      console.assert(undefined."Message");
    // 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>
Copy the code

Iii. Summary and review

As you can see from the module title, this is part of an exercise and a necessary skill, as long as it is based on practical practice.

Process decomposition

1. Appetizer learns a trick first and learns this setting from a video from a great god:

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

    console.log(123.456);
Copy the code

In that case, does the console still display normal.log results?Obviously, it is.

In fact, this design method is the same as the previous vUE project in closing the Cosole and debugger display when packaging, but here is a simple implementation operation.

When we pack, we don’t need to show cosole, we just need to change isDev to false.

  1. Interpolated

This is similar to C’s string substitution pattern.

  • % s string
  • % d integer
  • % f floating point value
  • %o Object
  • %c sets the output style, and subsequent text will be displayed according to the value in the second argument
    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}!!!!!!!!! `);
Copy the code

There is also the use of template strings, of course, it is recommended to use this method, after all, es6 era!

  1. Styled

This is a very interesting feature.

let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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

Copy the code

The color changed like this:

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

    // warning!
      console.warn("Warning!!)
Copy the code

  1. Error 😐
    let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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("Mistake!!");
Copy the code

6. Info

Copy the code

MDN explains info like this:

So, what we see in Google Browser is the same as a normal log:

However, in Firefox, you can see this effect, which is consistent with MDN’s explanation:

7. Testing

    let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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."Message");
      console.assert(false."Message");
      console.assert(' '."Message");
      console.assert(0."Message");
      console.assert(NaN."Message");
      console.assert(null."Message");
      console.assert(undefined."Message");

Copy the code

Note that true does not. 8. clearing

There’s nothing more to say about this thing, but this is what this button on the console does, and of course it’s a little bit easier if you use the fast button, whatever. 9. Viewing DOM Elements

    let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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);


Copy the code

Dir simply expands everything under the object you are operating on.

We can view this in a more intuitive way, such as my own console inside:

Does console correspond to what I defined above? Of course ！！！！

  1. Grouping together

Then speaking of this thing that is the table mentioned before, because there are records, here is no more details. 11. counting

    let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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');
Copy the code

12. timing

     let console = {
      isDev:true.log(. args) {
        if(!this.isDev) return;
        window.console.log(Stop "% 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");

Copy the code

4. Key and difficult points

Only heavy is not difficult, because no matter how difficult you have to learn, because you are the person (cry), so you have to learn.