WEB前端瀏覽器控制台基本使用技巧

輸入代碼前使用快捷鍵換行 shift+enter

彈窗

alert

打印

console.log("打印的信息");

輸出調試信息

console.debug("調試的信息");

輸出提示性信息

console.info("提示的信息");

輸出錯誤信息

console.error("錯誤的信息");

輸出警示信息

console.warn("警示的信息");

輸出一組信息

console.group 輸出一組信息的開頭，開頭可以像文件夾那樣展開，展開后有一條豎線
console.groupEnd 結束一組輸出信息

用於查看頁面中某個節點的 html/xml 代碼。

var div = document.getElementById("div");
console.dirxml(div);
console.log(div);

清空控制台歷史記錄

clear()

斷言

console.assert(length < 500, "Node length is > 500");

過濾輸出

你可以根據級別對日志輸出進行過濾
All - 顯示所有的輸出
Errors - 只顯示 console.error() 的輸出
Warnings - 只顯示 console.warn()的輸出
Info - 只顯示 console.info()的輸出
Logs - 只顯示 console.log()的輸出
Debug - 只顯示 console.timeEnd() 和 console.debug()的輸出

字符串裁剪和格式化

日志輸出一系列方法的第一個字符串參數都可以包含一個或者多個格式符。格式符由%后面跟一個字母組成，字母代表不同的格式。每個格式符與后面的參數一一對應。

下面的例子中，日志打印了結果中包含了字符串格式和數字格式內容。
    console.log("%s has %d points", "Sam", 100);
    The full list of format specifiers are as follows:
    %s - 字符串格式
    %i 或 %d - 整型格式
    %f - 浮點格式
    %o - DOM節點
    %O - JavaScript 對象
    %c - 對輸出的字符串使用css樣式，樣式由第二個參數指定。

下面的例子使用整型來打印 document.childNodes.length的值，使用浮點格式來打印Date.now()的值。
    console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

POST請求

var url = "http://127.0.0.1:8088/test";
var params = {token:"JSESSIONID=FD4518A98B70344129B233FF3701654F;",page:"1"};
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(JSON.stringify(params));

GET請求

var url = "http://127.0.0.1:8088/test?types=userType,userStatus";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);