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