console 简介与用法
alert 弹窗
早年没有 console ，用的都是 alert() 来调试；
关于 alert() 的几个小问题：
alert(1,2,3); // 只会弹出1；alert 只有接受一个参数
console.log(alert(1)); // alert 有一个返回值，是： undefined
alert(alert(1)); // 会先弹一个1 ，再弹一个 undefined
alert(alert(1),alert(2)); // 1,2,undefined , 虽然只接受一个参数，但函数加了括号就会执行；
alert = null; // alert 是对象，也可以被清空
alert(1); // 报错：alert is not a function
alert = setTimeout; // 改变 alert 的指向，alert就变成 setTimeout
alert(x=>{console.log(10);},1000); // 10 这时的 alert 可以当 setTimeout 用了；
alert = Number; // 改成包装类；
console.log(new alert("10")); // Number {10}
还有 confirm() 确认框
confirm("123"); // 弹窗，确认，有两个按钮：确认或取消
console.log(confirm("123")); // 按了确认，就返回 true ，按了取消，就返回 fasleconsole
是一个对象，包含了很东西；
可以在控制台输出任何：DOM、对象、属性、元素、系统信息等；
console.log
console.log 常规用法是最核心的；
console.log(console);
看控制台：
除了常用的 console.log() 方法外，还有很多其他方法：console.error / console.debug / console.warn 等；
多参数
和 alert 不同， console.log 可以输出所有参数：
console.log(1,2,3,4,5); // 1,2,3,4,5
占位符
不仅带多个参数，console.log 可以带占位符，甚至多个占位符；
占位符： %s string； 字符串占位符；
console.log("今天来的%s不少","客人"); // 今天来的客人不少
console.log("今天来的%s不少，%s也不少","客人","朋友"); // 今天来的客人不少,朋友也不少占位符： %d 数字 \d； 数字占位符；
console.log("今天来了%d个人",10); // 今天来了10个人
console.log("今天来了%d个人","10"); // 今天来了NaN个人 ，字符串"10"会识别成非数；
console.log("今天来了%d个人",10+=5); // 报错；运算表达式会报错；
var a = 10;
console.log("今天来了%d个人",a+=5); // 今天来了15个人；变量的运算是可以的；
console.log("今天来了%s个人",25); // 今天来了25个人; 用字符串的形成输出了，并没报错；字符串不能转数字，数字却可以转成字符串；
占位符： %o object；对象占位符；
console.log("今天来了%o人","{a:10}"); // 今天来了'{a:10}'人; 对象也能出来；
console.log("今天来了%o人","[1,2,3]"); // 今天来了'[1,2,3]'人; 数组也是对象；
console.log("今天来了%o人",1); // 今天来了1人；数字1，转换成包装类Nuber; 点位符：%c 样式；占位写样式；
console.log("%c今天来了20人", "color:red"); // 定个样式，从头开始生效；
来个复杂点的：
console.log("%cHello world!","color:#1E989C;padding:10px;background-color:#EAFFFF");
可以随意设置 %c 的断点，来添加更多样式：
console.log("%cHello%c %cworld%c!","color:#1E989C;padding:4px 6px;background-color:#EAFFFF","","color:#105254;padding:4px 6px;background-color:#9EF8FF","");
来个酷炫的：加个定时器，变色的；
setInterval(x=>{
console.log('%c我%c爱%c你', 'color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')','color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')','color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')');
},1000);
看起来有点无聊，不过早有大厂这么玩了：
这是百度的：
try {
window.console && window.console.log && (console.log("每一个星球都有一个驱动核心，\n每一种思想都有影响力的种子。\n感受世界的温度，\n年轻的你也能成为改变世界的动力，\n百度珍惜你所有的潜力。\n你的潜力，是改变世界的动力！\n\n"),
console.log("%c百度2022校园招聘简历投递：https://talent.baidu.com/external/baidu/campus.html", "color:red"))
} catch (e) { }
这是B站的：
function _toConsumableArray(M) {
return _arrayWithoutHoles(M) || _iterableToArray(M) || _unsupportedIterableToArray(M) || _nonIterableSpread()
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}
function _unsupportedIterableToArray(M, U) {
if (M) {
if ("string" == typeof M)
return _arrayLikeToArray(M, U);
var y = Object.prototype.toString.call(M).slice(8, -1);
return "Object" === y && M.constructor && (y = M.constructor.name),
"Map" === y || "Set" === y ? Array.from(M) : "Arguments" === y || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(y) ? _arrayLikeToArray(M, U) : void 0
}
}
function _iterableToArray(M) {
if ("undefined" != typeof Symbol && null != M[Symbol.iterator] || null != M["@@iterator"])
return Array.from(M)
}
function _arrayWithoutHoles(M) {
if (Array.isArray(M))
return _arrayLikeToArray(M)
}
function _arrayLikeToArray(M, U) {
(null == U || U > M.length) && (U = M.length);
for (var y = 0, l = new Array(U); y < U; y++)
l[y] = M[y];
return l
}
var __getClientLogo = function () {
var M, U = JSON.parse(decodeURI(atob("JTVCJTVCJTIyJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwLy8lMjIsJTIyJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU1QyU1QyU1QyU1QyUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC8vJTIyLCUyMiUyMiU1RCwlNUIlMjIlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlNUMlNUMlNUMlNUMlMjAlMjAlMjAlMjAlMjAlMjAlMjAvLyUyMiwlMjIlMjIlNUQsJTVCJTIyJTIwJTIwJTIwJTIwIyNEREREREREREREREREREREREREREREIyMlMjIsJTIyJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCMjJTIwREREREREREREREREREREREREREQlMjAjIyUyMiwlMjIlMjAlMjAlMjBfX19fX19fXyUyMCUyMCUyMF9fXyUyMCUyMCUyMF9fXyUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMF9fXyUyMCUyMCUyMF9fX19fX19fJTIwJTIwJTIwX19fJTIwJTIwJTIwX19fJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwX19fJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCMjJTIwaGglMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBoaCUyMCMjJTIyLCUyMiUyMCUyMCUyMCU3QyU1QyU1QyUyMCUyMCUyMF9fJTIwJTIwJTVDJTVDJTIwJTdDJTVDJTVDJTIwJTIwJTVDJTVDJTIwJTdDJTVDJTVDJTIwJTIwJTVDJTVDJTIwJTIwJTIwJTIwJTIwJTIwJTdDJTVDJTVDJTIwJTIwJTVDJTVDJTIwJTdDJTVDJTVDJTIwJTIwJTIwX18lMjAlMjAlNUMlNUMlMjAlN0MlNUMlNUMlMjAlMjAlNUMlNUMlMjAlN0MlNUMlNUMlMjAlMjAlNUMlNUMlMjAlMjAlMjAlMjAlMjAlMjAlN0MlNUMlNUMlMjAlMjAlNUMlNUMlMjIlNUQsJTVCJTIyJTIwJTIwJTIwJTIwIyMlMjBoaCUyMCUyMCUyMCUyMC8vJTIwJTIwJTIwJTIwJTVDJTVDJTVDJTVDJTIwJTIwJTIwJTIwaGglMjAjIyUyMiwlMjIlMjAlMjAlMjAlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlN0MlNUMlNUMlMjAvXyU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyUyMCUyMCUyMCUyMCUyMCU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyU3QyU1QyU1QyUyMC9fJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTIwJTIwJTIwJTIwJTIwJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCMjJTIwaGglMjAlMjAlMjAvLyUyMCUyMCUyMCUyMCUyMCUyMCU1QyU1QyU1QyU1QyUyMCUyMCUyMGhoJTIwIyMlMjIsJTIyJTIwJTIwJTIwJTIwJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTIwX18lMjAlMjAlNUMlNUMlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlMjAlMjAlMjAlMjAlMjAlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlNUMlNUMlMjAlNUMlNUMlMjAlMjAlMjBfXyUyMCUyMCU1QyU1QyU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyUyMCUyMCUyMCUyMCUyMCU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyUyMiU1RCwlNUIlMjIlMjAlMjAlMjAlMjAjIyUyMGhoJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaGglMjAjIyUyMiwlMjIlMjAlMjAlMjAlMjAlMjAlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlN0MlNUMlNUMlMjAlMjAlNUMlNUMlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUMlNUMlNUMlMjAlNUMlNUMlMjAlMjAlNUMlNUNfX19fJTIwJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTdDJTVDJTVDJTIwJTIwJTVDJTVDJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDJTVDJTVDJTIwJTVDJTVDJTIwJTIwJTVDJTVDX19fXyUyMCU1QyU1QyUyMCU1QyU1QyUyMCUyMCU1QyU1QyUyMiU1RCwlNUIlMjIlMjAlMjAlMjAlMjAjIyUyMGhoJTIwJTIwJTIwJTIwJTIwJTIwd3d3dyUyMCUyMCUyMCUyMCUyMCUyMGhoJTIwIyMlMjIsJTIyJTIwJTIwJTIwJTIwJTIwJTIwJTVDJTVDJTIwJTVDJTVDX19fX19fXyU1QyU1QyU1QyU1QyUyMCU1QyU1Q19fJTVDJTVDJTVDJTVDJTIwJTVDJTVDX19fX19fXyU1QyU1QyU1QyU1QyUyMCU1QyU1Q19fJTVDJTVDJTVDJTVDJTIwJTVDJTVDX19fX19fXyU1QyU1QyU1QyU1QyUyMCU1QyU1Q19fJTVDJTVDJTVDJTVDJTIwJTVDJTVDX19fX19fXyU1QyU1QyU1QyU1QyUyMCU1QyU1Q19fJTVDJTVDJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCMjJTIwaGglMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBoaCUyMCMjJTIyLCUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCU1QyU1QyU3Q19fX19fX18lN0MlMjAlNUMlNUMlN0NfXyU3QyUyMCU1QyU1QyU3Q19fX19fX18lN0MlMjAlNUMlNUMlN0NfXyU3QyUyMCU1QyU1QyU3Q19fX19fX18lN0MlMjAlNUMlNUMlN0NfXyU3QyUyMCU1QyU1QyU3Q19fX19fX18lN0MlMjAlNUMlNUMlN0NfXyU3QyUyMiU1RCwlNUIlMjIlMjAlMjAlMjAlMjAjIyUyME1NTU1NTU1NTU1NTU1NTU1NTU1NJTIwIyMlMjIsJTIyJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCMjTU1NTU1NTU1NTU1NTU1NTU1NTU1NTSMjJTIyLCUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMFJlbGVhc2UlMjAxLjYuMTEuJTIwUG93ZXJlZCUyMGJ5JTIwamlua2VsYS1jb3JlJTIwMi44LjkuJTIyJTVELCU1QiUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU1QyU1Qy8lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlNUMlNUMvJTIyLCUyMiUyMiU1RCU1RA=="))), y = ["%c"], l = [];
U.forEach((function (M) {
var U = M[0]
, l = M[1];
y.push(U + l)
}
)),
l = l.concat(["color:#00a1d6"]),
l = [y.join("\n")].concat(l),
(M = console).log.apply(M, _toConsumableArray(l))
};
__getClientLogo();
console.dir
console.dir 显示一个对象的可用方法和属性；
<div style="width: 100px;height:100px;background-color:red">文本</div>
JS选出DIV
var div = document.getElementsByTagName('div')[0];平时我们这么用：
console.log(div);
也可以这样：
console.dir(div);
