When bored, I like to open some boring web pages and check out the Console of Chrome dad.

Normal operation

  • In the process of developing a front-end page, it is necessary to open the console, print something defined, and see what the output is;
  • Make a breakpoint to slow the code down, step by step… Deep…. Into the… ;
  • Take a look at the network load resources, static resources, parameters, request header, if practical, take down the simulation, do a small thing;
  • Look for weird DOM elements to see what CSS styles look like;
  • Do some pages need to charge for audio? Don’t panic, can listen to the page, open the console, global search

However, in the busy development process, where there is such a leisurely, the most used is:

console.log("Initial value of variable A:,a); XXXXX; Some assignment to a; XXXXX; console.log("The changed value of variable A :",a);
Copy the code

Or:

 $.ajax({
            url:"/xxx".type:"post",
            data:{ start:0},
            dataType:"json",
            success:function(data) {// Compare the data and format returned from the back end with the interface file console.log(data); }})Copy the code

Or… Routine operation, not much to say

Change posture operation

Surely you must have opened baidu home page, according to F12, if so, you must understand Baidu will also covet your talent, after all, often open the console after all, most of the program ape.

A web page, how to experience the process, to reach the user in front? What kind of growth does it take for a newcomer to stand on top of technology? To discover the secrets of this place; Experience the challenges here; To be the master of this place; Join Baidu, join web search, you can influence the world.

Take a look at Zhihu

And drabs

Hello, programmer brother, aren’t you happy to see this egg again? I know you’re trying to tease and attack our website right now; More importantly, you want to optimize, you want to change the site, or even the whole didi. Have you found the right starting point? Start from this door to change Didi, change the world, change yourself. Open sesame: send your resume to [email protected] (please to mail title “name – – from the console for the position of XX”) you created the world’s stage: : http://job.didichuxing.com/

Console. log (” Can I print messages like this?” )

Their console is too high, mine is different, I’m in position!

Yeah, nice posture, huh? Along the way, you learned some useful uses of Console:

1. __console.warn(" Network is unstable ")__ ----- Prints a warning message; 2. __console.error(" network error ")__ ----- Prints an error message; __console.group(' irony (💩)')__ ----- Displays tree structure and coincides with groupEnd collapse; 4.__console.groupEnd()__----- Ends the current Tree; 5.__console.table(Arr)__------ Print the data to a table;Copy the code
    var Arr = [
    ["aa"."bb"."cc"],
    ["dd"."ee"."ff"],
    ["gg"."hh"."ii"],
]

console.table(Arr);
Copy the code
  1. Console.log ()
console.log("The integer part of PI: %d, with decimal: %f", 3.1415, 3.1415); // Output: PI integer part: 3, with decimal: 3.1415Copy the code

7. Console. assert(false, “We’ve seen it before somewhere “)—– determine if the first argument is true, if false raise an exception and print the corresponding message on the console. 8. Console.log () CSS style Settings

console.log("%c3"." text-shadow: 0 1px 0 # CCC,0 2px 0 #c9c9c9,0 3px 0 # BBB,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0, 25),0 10px 10px rgba(0,0,0,.2),0 20px 20px 20px Rgba (0, 0, 15); font-size:6em; line-height:60px;")

console.log("%c2"." text-shadow: 0 1px 0 # CCC,0 2px 0 #c9c9c9,0 3px 0 # BBB,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0, 25),0 10px 10px rgba(0,0,0,.2),0 20px 20px 20px Rgba (0, 0, 15); font-size:4em; line-height:60px;")

console.log("%c1"." text-shadow: 0 1px 0 # CCC,0 2px 0 #c9c9c9,0 3px 0 # BBB,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0, 25),0 10px 10px rgba(0,0,0,.2),0 20px 20px 20px Rgba (0, 0, 15); font-size:2em; line-height:60px;")

console.log('%c Nanjing hot or Tokyo hot.'.'color: #fff; background: #f40; font-size: 24px; border-radius:0 15px 15px 0; padding:10px; ');

console.log("%c "."Background-image :-webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), Color - stop (0.3, # 22 f), color - stop (0.45, # 2 (ff), color - stop (0.6, # 2 f2), color - stop (0.75, # 2 f2), color - stop (0.9, # ff2), color-stop(1, #f22) ); color:transparent; -webkit-background-clip: text; font-size:5em; width:1px; height:40px; padding:2px;")

console.log("% C hot hot hot"."color:red; font-size:30px; font-weight:bolder; padding:50px 420px; line-height:10px; background:url('http://img.zcool.cn/community/0127c0577e00620000012e7e12da0e.gif') repeat-x; background-size:contain;");

Copy the code

The first argument is “%c” + print content, and the second argument is CSS style. Is it easy to change positions? Make some high-powered printouts and put them on your own website. People will eat a lot of code when they steal it. I won’t scratch over the technical documentation. I want to dig deeper… Into the… Do some research on… To…… Look at the MDN