chrome調試技巧之console

---

title: 冰山工做室--web前端--每日一題--chrome調試技巧之console date: 2019-04-25 17:00:00 tags: -JavaScript
-closure categories: JavaScript

console對象的瀏覽器實現，包含在瀏覽器自帶的開發工具之中。以Chrome瀏覽器的「開發者工具」（Developer Tools）爲例，首先使用下面三種方法的一種打開它。

• 按F12或者Control + Shift + i（PC平臺）/ Alt + Command + i（Mac平臺）。

• 在菜單中選擇「工具/開發者工具」。

• 在一個頁面元素上，打開右鍵菜單，選擇其中的「Inspect Element」。

console面板以下

接下來詳細瞭解一下console的命令~

console青銅局 –-- 基礎輸出

console.log、console.error、console.warn、console.dir

console.log([data][, ...args])

在控制檯打印自定義字符串 第一個參數是一個字符串，包含零個或多個佔位符。 每一個佔位符會被對應參數轉換後的值所替換，支持printf風格輸出 只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種 支持格式化輸出，console.log 第一個參數若是有%c，會把%c後面的文案按照你提供的樣式輸出，此時第二個參數應爲css屬性的字符串。

console.log(666)

//插值輸出
console.log("%s年%d月", 2019, 3) //%s 字符串 %d 整數
console.log("%c我是%c自定義樣式", "color:red", "color:blue;font-size:25px")

//格式化輸出
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 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 rgba(0,0,0,.15);font-size:5em");
複製代碼

執行結果

天狗前端 > 【凱麗】工欲善其事必先利其器 -- chorme調試技巧之console > image2019-3-26 15:17:33.png

console.error

在控制檯打印自定義錯誤信息

支持printf風格輸出 只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種 支持格式化輸出，樣式規則同console.log

console.error(666)
console.error("%s年%d月", 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 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 rgba(0,0,0,.15);font-size:5em");
複製代碼

執行結果

console.warn

打印自定義警告信息

支持printf風格輸出 只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種 支持格式化輸出

console.warn(666)
console.warn("%s年%d月", 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 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 rgba(0,0,0,.15);font-size:5em");
複製代碼

執行結果

console.dir

dir方法用來對一個對象進行檢查（inspect），並以易於閱讀和打印的格式顯示 該方法對於輸出DOM對象很是有用，由於會顯示DOM對象的全部屬性

console.dir($('.text-light'))
console.dirxml($('.text-light'))
複製代碼

執行結果

console.dir和 console.log執行結果的區別:

console.dir輸出的結果更詳細，同窗們能夠本身試試看

##console白銀局 ---- 格式輸出

console.table

對於某些複合類型的數據，console.table方法能夠將其轉爲表格顯示 參數被轉爲數組的前提條件是必須有主鍵值，數組的主鍵是其index，對象的主鍵是它的最外層鍵 若是參數不是複合類型的數據，console.table的表現同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我是格式化文字', 'font-size:20px;color:red')
複製代碼

執行結果

console.group

成組輸出，分在一組的信息，能夠用鼠標摺疊/展開 console.group接受一個字符串做爲參數，並把字符串做爲這組數據的組名輸出到控制檯 必須配合console.groupEnd使用，console.groupEnd若是接受參數，則會尋找跟它同名的console.group,若是沒有參數，則會採用就近原則配對

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()
複製代碼

執行結果

##console黃金局 ---- 加入一些運算吧

console.count

計數，每次執行到count的位置都輸出所在函數的執行次數

function fib(n){ //輸出前n個斐波那契數列值
  if(n == 0) return;
  console.count("調用次數");//放在函數裏，每當這句代碼運行輸出所在函數執行次數
  //console.trace();//顯示函數調用軌跡(訪問調用棧）
  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);
複製代碼

執行結果

console.trace

訪問調用棧 打印當前執行位置到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();
複製代碼

執行結果

console.time

啓動一個計時器（timer）來跟蹤某一個操做的佔用時長 每個計時器必須擁有惟一的名字，頁面中最多能同時運行10,000個計時器。當以此計時器名字爲參數調用 console.timeEnd() 時，瀏覽器將以毫秒爲單位，輸出對應計時器所通過的時間 該方法在使用時不會將輸出的時間返回到js,它只能用於控制檯調試

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);
}

// 冒泡排序
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]) {        //相鄰元素兩兩對比
                var temp = arr[j+1];        //元素交換
                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');
複製代碼

執行結果

console.assert

若是斷言爲false，則將一個錯誤消息寫入控制檯。若是斷言是true，沒有任何反應 在瀏覽器中當console.assert()方法接受到一個值爲假斷言（assertion）的時候，會向控制檯輸出傳入的內容，可是並不會中斷代碼的執行，而在Node.js中一個值爲假的斷言將會致使一個AssertionError被拋出，使得代碼執行被打斷 顯示樣式同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)
})
複製代碼

執行結果

在node中遇到false會報錯

##附錄 用console乾點好玩的事情

console.log模擬loading動畫

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的源碼

源碼地址 arrayV8 源碼 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) {                                           //數組長度小於10，快速排序
        InsertionSort(a, from, to);
        return;
      }                                                                //數組長度大於10，插入排序
      if (to - from > 1000) {                                          //取基準值
        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
          var tmp = 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;
      }
    }
  };
複製代碼