What are your impressions of Console? Is the console. The log (); A console on a browser? Today, console, which you may not know about;
Writing in the front
The browser console is usually used in conjunction with console.log(). The console is used in conjunction with console.log(). If you think there is something wrong with it, please leave a comment below and make progress together! * o (≧ del ≦) ツ
The total case
Open the compiler and type console. Using the auto-complete function, we can see that console has many methods;
To summarize the current console methods and properties:
[“?”, “$x”, “dir”, “dirxml”,”keys”,”values”,”profile”,”profileEnd”,”monitorEvents”, “unmonitorEvents”,”inspect”,”copy”,”clear”,”getEventListeners”,”undebug”,”monitor”, “unmonitor”, “table”, “$0”, “$1”, “$2”, “$3″,”
Let’s take a look at the main uses of each method.
In general, we use the following four methods to input information:
console.log
This is the most commonly used, and is used to output the desired information on the browser console.
console.info
Output error messages, same as console.log().
The pillow comes just after you doze off! Open the console of our gold digging web page!
console.warn
Output warning messages, the same usage as console.log().
console.error
Output error messages, same as console.log().
console.debug
Output debugging information in the same way as console.log().
Why is it that all output information is divided into several? See the picture and speak.
This is an image taken from IE, in Chrome different information will be assigned to different locations, not good screenshots! (The evil Internet Explorer is still a little useful, ha, ha, ha).
Any of the above five methods of the console object can use printF-style placeholders. However, there are fewer types of placeholders, supporting only characters a (%s), integers (%d or % I), floating point numbers (%f), and objects (% O).
| Format symbol | Implemented functions |
|---|---|
| %s | Format the output as a string |
| %d or %i | Format to numeric output |
| %f | Format the output to a floating point number |
| %o | Convert to expanded DOM element output |
| %O | Convert to JavaScript object output |
| %c | Type the string in the style you provided |
Take a look:
% O placeholder, which can be used to see inside an object (Chrome does not work);
var dog = {};
dog.name = "Heavy hair";
dog.color = "Yellow";
console.log("%o", dog);
Copy the code
Note: when collecting data, you can use console.log to output text or pictures with styles on the console. I think it is not useful, so I ignore it directly.
console.dirxml
The HTML/XML code contained in a node used to display a web page.
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
Copy the code
The console. The group and the console. GroupEnd
Use to group displayed information. It is only useful for output of large amounts of information, grouped into groups that can be folded/expanded with the mouse.
Fun is not? Too bad I haven’t found him useful yet.
Just kidding! Being is reasonable! ヾ(≧O≦) “-ao ~
This is useful when looking at someone else’s code when you open the console and it’s all output!
console.groupCollapsed
It is similar to the console.group method, with the only difference being that the contents of this group collapse rather than unfold during first display.
console.assert
Asserts the input expression, taking two arguments, the first an expression and the second a string. The second argument is printed only if the first argument is false, otherwise there is no result.
If, in code, we need to meet a condition to output, would we often write:
var isShow = false;
if(! isShow) { console.log('Output information when false');
}
Copy the codeNow you have a console;
Isn’t it convenient? (I think so)
console.count
Print the number of times count() is called. This function takes an optional argument label. If label is present, this function outputs the number of times that the specified label and count() are called. If label is ignored, this function prints the number of times count() is called at its location. (This method is very practical)!
This feature is non-standard, so try not to use it in production!
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "alice: 3"
Copy the code
console.countReset
Reset the counter. This function accepts an optional parameter label. A string that resets the count of this label to 0 if countReset() is passed. If you ignore countReset(), reset count() to 0.
// No parameter var user ="";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
// "default: 1"
// "default: 2"
// "default: 3"
// "default: 1"
// "default: 0"// You can see that the call to console.Counterreset () resets the count of default to 0Copy the code// Pass the parameter var user ="";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "bob: 0"
// "alice: 3"/ / call countReset ("bod") just reset"bob"The counter value of"alice"The counter value of.Copy the codeconsole.table
For some complex types of data, the console.table method can turn it into a table display.
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee"}]; console.table(languages);Copy the codeThe language of the above code, translated into a table, is shown below.
In order for compound data to be tabulated, you must have a primary key. For the array above, the primary key is the number key. For an object, the primary key is its outermost key.
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional"}}; console.table(languages);Copy the codeThe language of the above code, translated into a table, is shown below.
console.dir
The dir method is used to inspect (inspect) an object and display it in a format that is easy to read and print.
This method is useful for printing DOM objects because all of their properties are displayed.
console.dir(document.body);
Copy the codeI tried it on Chrome and it felt the same as log on IE! I don’t know what the hell. ╮ (╯ _ ╰) ╭. Of course I didn’t experiment with DOM objects. Ha ha ~!
The console. The time and the console. TimeEnd
These two methods are used for timing, so you can calculate the exact time an operation takes.
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize"); / / Array the initialize: 1914.481 msCopy the codeconsole.timeLog;
Outputs the value of the timer on the console, which must have been started via console.time().
If no label argument is passed, default: is returned as boot data:
default: 1042ms
If an existing label is passed in, data is returned with label: as a boot:
label: 1242ms
Chestnut:
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time"); // The output in the above example shows the interval between the user opening the page and closing the first alert box and the second alert box respectively:Copy the code
Note: Using timelog() to output the value of the timer shows the timer name. Stopping with timeEnd() will also display the timer name and output the value of the timer, and the final “-timer ended” will clearly show that the timer is no longer running.
The console. The profile and the console. ProfileEnd
The console.profile method is used to create a profile that takes the name of the performance tester.
This feature is non-standard, so try not to use it in production!
console.profile('p')
// Profile 'p' started.
Copy the codeThe console.profileEnd method is used to end a running performance tester.
console.profileEnd()
// Profile 'p' finished.
Copy the codeconsole.timeStamp
This feature is non-standard, so try not to use it in production!
Add a marker to the browser’s Performance or Waterfall tool. This allows you to associate a point in your code with other events recorded on the timeline, such as layout events and draw events.
You can choose to use a parameter as the timestamp label, and the label will be displayed next to the tag.
console.trace
For debugging related to stack tracing, the console.trace method shows the invocation path of the currently executing code on the stack.
The above method is just my personal understanding. If you want to see the specific API
console.clear
Use to clear all output from the current console, setting the cursor back to the first line.