Icebergs Studio — The Front end of the Web — A question of the day — Chrome debugging tips console Date
-closure categories: JavaScript
The browser implementation of the Console object is included in the browser’s own development tools. Take Chrome’s Developer Tools as an example. First open it using one of the following three methods.
-
Press F12 or Control + Shift + I (PC) or Alt + Command + I (Mac).
-
Choose Tools/Developer Tools from the menu.
-
On a page Element, open the right-click menu and select “Inspect Element”.
The console panel is as follows
Let’s take a closer look at the console command ~
Console Bronze bureau — Basic output
Log, console.error, console.warn, console.dir
console.log([data][, …args])
Printing a custom string on the console The first argument is a string containing zero or more placeholders. Each placeholder is replaced by the converted value of the corresponding parameter. Printf-style output supports only characters (%s), integers (%d or % I), floating point (%f), and objects (% O). Console. log if the first parameter has %c, The text after %c will be printed in the style you provided, and the second argument should be a string of CSS properties.
console.log(Awesome!)
// Interpolate output
console.log("%s year %d month".2019.3) //%s String %d integer
console.log("% C I am % C custom style"."color:red"."color:blue; font-size:25px")
// Format output
console.log("%c3D Text"." 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:5em");
Copy the codeThe execution result
PNG Image2019-3-26 15:17:33.png image2019-3-26 15:17:33.png Image2019-3-26 15:17:33.png
console.error
Print custom error messages on the console
Printf-style output supports only characters (%s), integers (%d or % I), floating point numbers (%f), and objects (% O). The style rules are the same as console.log
console.error(Awesome!)
console.error("%s year %d month".2019.3)
console.error("%c3D Text"." 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:5em");
Copy the codeThe execution result
console.warn
Displays custom warning information
Printf-style output supports only characters (%s), integers (%d or % I), floating point numbers (%f), and objects (% O)
console.warn(Awesome!)
console.warn("%s year %d month".2019.3)
console.warn("%c3D Text"." 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:5em");
Copy the codeThe execution result
console.dir
The dir method is used to examine an object (inspect) and display it in an easy-to-read and printable format, which is useful for outputting DOM objects because all of their properties are displayed
console.dir($('.text-light'))
console.dirxml($('.text-light'))
Copy the codeThe execution result
The difference between console.dir and console.log is as follows:
Console. dir output is more detailed, students can try their own
## Console Silver Bureau —- format output
console.table
For some complex types of data, the console.table method can convert it to a table. The argument can be converted to an array only if it has a primary key. The primary key of the array is its index, and the primary key of the object is its outermost key. Console. table behaves like console.log
var text1 = [
{name:"Bob".age:13.hobby:"playing"},
{name:"Lucy".age:14.hobby:"reading"},
{name:"Jane".age:11.hobby:"shopping"}];console.table(text1);
var test2 = {
csharp: { name: "C#".paradigm: "object-oriented" },
fsharp: { name: "F#".paradigm: "functional"}}console.table(test2)
var test3 = 8888
console.table(test3)
console.table('%c I am formatting text '.'font-size:20px; color:red')
Copy the codeThe execution result
console.group
Console. group takes a string as an argument and prints it to the console as the group name of the data set. This must be used with console.groupEnd. Console. group is looked for, and if there are no arguments, the proximity rule is used
var stu = [{name:"Bob".age:13.hobby:"playing"}, {name:"Lucy".age:14.hobby:"reading"}, {name:"Jane".age:11.hobby:"shopping"}];
console.group('group1')
console.log(stu[0])
console.log(stu[1])
console.log(stu[2])
console.group('group2')
console.log(stu[2].name)
console.log(stu[2].age)
console.log(stu[2].hobby)
console.groupEnd()
console.groupEnd()
Copy the codeThe execution result
## Console gold bureau —- add some calculations
console.count
Count the number of times the function is executed up to count
function fib(n){ // Print the first n Fibonacci numbers
if(n == 0) return;
console.count("Number of calls");Each time this line of code is run, the number of times the function is executed
//console.trace(); // Display function call trace (access call stack)
var a = arguments[1] | |1;
var b = arguments[2] | |1;
console.log("fib=" + a);
[a, b] = [b, a + b];
fib(--n, a, b);
}
fib(6);
Copy the codeThe execution result
console.trace
Accessing the call stack prints the path information from the current execution location to console.trace()
function doTask(){
doSubTask(1000.10000);
}
function doSubTask(countX,countY){
for(var i=0; i<countX; i++){for(var j=0; j<countY; j++){} }console.trace();
}
doTask();
Copy the codeThe execution result
console.time
Start a timer to track how long an operation is occupied. Each timer must have a unique name, and up to 10,000 timers can run simultaneously on the page. When console.timeend () is called with this timer name as an argument, the browser prints the elapsed time of the timer in milliseconds. This method does not return the output time to JS when used, and can only be used for console debugging
var oldList = new Array(1000);
var oldList1 = new Array(1000);
for(let i = 0; i<1000; i++){ oldList[i] =Math.floor(Math.random()*1000);
oldList1[i] = Math.floor(Math.random()*1000);
}
// Bubble sort
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j] > arr[j+1]) { // Compare adjacent elements in pairs
var temp = arr[j+1]; // Element swap
arr[j+1] = arr[j]; arr[j] = temp; }}}return arr;
}
console.time('bubbleSort');
bubbleSort(oldList);
console.timeEnd('bubbleSort');
console.time('sort');
oldList1.sort();
console.timeEnd('sort');
Copy the codeThe execution result
console.assert
If the assertion is false, an error message is written to the console. If the assertion is true, there is no response. When console.assert() accepts a false assertion, it prints the content to the console, but does not interrupt code execution. An assertion with a false value in Node.js will cause an AssertionError to be thrown, causing code execution to be interrupted to display the same style as console.warn
var testList = [{name:'aa'.age:19}, {name:'bb'.age:25}, {name:'cc'.age:22}];
testList.forEach((item, index) = > {
console.assert(true , '666');
console.assert(false.'false message')
console.log(index)
})
Copy the codeThe execution result
Error when false is encountered in Node
Do something fun with console
Console. log simulates loading animation
function print(len){ let oldStr = ”; for(let i = 0; i < len ; i++){ setTimeout(()=>{ oldStr = oldStr + ‘ ‘; console.log(oldStr+’%c>’, ‘color:green; font-size:20px’); _.delay(() => { console.clear(); }, 500) }, 700*i); } } print(10);
V8 sort source code
Source address arrayV8 source Line760
var QuickSort = function QuickSort(a, from, to) {
var third_index = 0;
while (true) {
// Insertion sort is faster for short arrays.
if (to - from< =10) { // The array length is less than 10, quick sort
InsertionSort(a, from, to);
return;
} // Array length greater than 10, insert sort
if (to - from > 1000) { // take the base value
third_index = GetThirdIndex(a, from, to);
} else {
third_index = from + ((to - from) > >1);
}
// Find a pivot as the median of first, last and middle element.
var v0 = a[from];
var v1 = a[to - 1];
var v2 = a[third_index];
var c01 = comparefn(v0, v1);
if (c01 > 0) {
// v1 < v0, so swap them.
var tmp = v0;
v0 = v1;
v1 = tmp;
} // v0 <= v1.
var c02 = comparefn(v0, v2);
if (c02 >= 0) {
// v2 <= v0 <= v1.
var tmp = v0;
v0 = v2;
v2 = v1;
v1 = tmp;
} else {
// v0 <= v1 && v0 < v2
var c12 = comparefn(v1, v2);
if (c12 > 0) {
// v0 <= v2 < v1
vartmp = v1; v1 = v2; v2 = tmp; }}// v0 <= v1 <= v2
a[from] = v0;
a[to - 1] = v2;
var pivot = v1;
var low_end = from + 1; // Upper bound of elements lower than pivot.
var high_start = to - 1; // Lower bound of elements greater than pivot.
a[third_index] = a[low_end];
a[low_end] = pivot;
// From low_end to i are elements equal to pivot.
// From i to high_start are elements that haven't been compared yet.
partition: for (var i = low_end + 1; i < high_start; i++) {
var element = a[i];
var order = comparefn(element, pivot);
if (order < 0) {
a[i] = a[low_end];
a[low_end] = element;
low_end++;
} else if (order > 0) {
do {
high_start--;
if (high_start == i) break partition;
var top_elem = a[high_start];
order = comparefn(top_elem, pivot);
} while (order > 0);
a[i] = a[high_start];
a[high_start] = element;
if (order < 0) { element = a[i]; a[i] = a[low_end]; a[low_end] = element; low_end++; }}}if (to - high_start < low_end - from) {
QuickSort(a, high_start, to);
to = low_end;
} else {
QuickSort(a, from, low_end);
from= high_start; }}};Copy the code