编写前端页面时，必须使用控制台。 调试下面的各种bug是很常见的。 文末有彩蛋(*^▽^*)。
开发者工具简介
开发者工具是一组内置的 Web 开发和调试工具，可用于迭代、调试和分析网站。
其中，开发者工具最常用的四个功能模块是：()、()、 code()、()。
()：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。CSS可以实时修改并显示，极大方便开发者调试页面。 ()：控制台一般用于执行一次性代码、查看对象、查看调试日志信息或异常信息。 它还可以用作 API 视图。 例如，如果我想查看有哪些方法和属性，我可以直接在其中输入“”，然后按回车执行。 源代码()：该页面用于查看该页面的HTML文件源代码、源代码、CSS源代码。 另外，最重要的是调试源码，给JS代码加断点。 ()：网络页面主要用于查看网络连接等相关信息。
快捷键：--J()
- - J（苹果机）
直接按：F12
菜单栏：查看>>
使用API
提示：在控制台输入代码后，按键运行代码。 如果我们想更改控制台中的代码行小程序云开发控制台高级操作，请按 + 更改行。
事实上，控制台有自己的代码提示。 和大多数IDE一样，如果想查看相关API，在控制台输入“”并回车：
1.输出信息API
.log()：一般信息。()：错误信息[红色] .warn()：警告信息[黄色] ()：提示信息
例如，在控制台输入以下代码：
var wxName = document.getElementById("js_name").innerText;
console.log(wxName);
console.error(wxName);
console.warn(wxName);
console.info(wxName);
.(,)
参数解释：
：条件语句，语句会被解析成，当有时，会触发语句输出。 【重点：当表达式为 时触发】
：输出语句，可以是任意类型。
该函数执行时会在控制台输出一条语句，输出的内容就是传入的第二个参数的内容。当我们只需要在特定情况下输出语句时，可以使用 .. 下面是一个例子：
var wxName = document.getElementById("js_name").innerText;
console.assert(wxName == '', "欢迎关注微信公众号：" + wxName);
.dir()
：输出对象，可以是页面元素，也可以是自定义的数组、列表、对象等。
该函数打印出参数对象的所有属性和属性值。 log和dir的区别和重写的方法类似。 示例如下：
var wxTest = [
{ name: "花花", sex: "10" },
{ name: "豆豆", sex: "12" },
{ name: "毛毛", sex: "11" }
];
console.dir(wxTest);
.()
该函数将打印出 XML 元素及其后代，对 HTML 和 XML 元素调用 .() 相当于调用 .log()。
.()
该函数将以表格形式输出对象。
2. 常用API
。时间（[]）， 。（[]）
：用于标记定时器的名称，不填则默认。
.time()会启动一个定时器，当.()函数执行时（两个函数的参数需要相同），定时器就会结束，并将定时器的总时间输出到控制台。 示例如下：
console.time();
for (var i = 0; i < 1000000000; i++) {
//code;
}
console.timeEnd();
.()
该函数用于清除控制台，也可以点击控制台左上角的清除按钮，效果是一样的：
.()
此函数会将调用 .() 的堆栈跟踪打印到控制台。
.()
该函数会在控制台输出执行次数，也可以使用。
for (var i = 0; i < 6; i++) {
console.count();
}
3..log()的高级用法
%s 被格式化为字符串输出
%d 或 %i 格式化为整数输出
%f 格式化为浮点输出
%o 转换为扩展 DOM 元素输出
%O 转换为对象输出
%c 字符串添加样式输出
无需详细解释，看一遍代码就明白了。 示例如下：
console.log('%d + %d = %d',1.11,2.22,3.33);
//%o%O打印dom节点时就不一样
console.log('%o',document.body);
console.log('%O',document.body);
// %c 后面的内容，增加css样式
//附：console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖
console.log('浩Coding %c 浩Coding','font-size:36px;color:red;');
console.log('浩Coding %c 浩 http://www.jiahao.club Coding %c 浩Coding','font-size:20px;color:#ff8400;','font-size：12px;color:#000');
//利用css样式加载图片 //没法直接设置width和height样式,line-height图片高度,再调padding
console.log('%c ','background-image:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3637230766,2134243449&fm=26&gp=0.jpg");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:163px;padding:30px 120px;');
关于控制台的复活节彩蛋
如果您将 .log 添加到网页代码中，除非您打开控制台，否则它不会显示在页面上。 我们打开百度，然后F12打开控制台：
程序员喜欢听到佛陀的加持：
console.log("%c", "background: url(https://graph.baidu.com/resource/12bc97c493488ef414e6e01543836841.jpg) no-repeat center; background-size:100% 100%;padding-left:150px;padding-bottom: 150px;margin-left:470px;")
console.log("%c", "background: url(https://graph.baidu.com/resource/1b9593de7916556213aae01543836040.jpg) no-repeat center; background-size:100% 100%;padding-left:150px;padding-bottom: 150px;margin-left:300px;")
console.log("%c", "background: url(https://graph.baidu.com/resource/138b2ebb99f890c8b8c7c01543836115.jpg) no-repeat center; background-size:100% 100%;padding-left:150px;padding-bottom: 150px;margin-left:640px;")
console.log([
"%c _ooOoo_",
" o8888888o",
" 88" . "88",
" (| -_- |)",
" O = /O",
" ____/`---'____",
" .' \| |// `.",
" / \||| : |||// ",
" / _||||| -:- |||||- ",
" | | \ - /// | |",
" | _| ''---/'' | |",
" .-__ `-` ___/-. /",
" ___`. .' /--.-- `. . __",
" ."" '< `.____<|>_/___.' >'"".",
" | | : `- `.;` _ /`;.`/ - ` : | |",
" `-. _ __ /__ _/ .-` / /",
"======`-.____`-.________/___.-`____.-'======",
" `=---='",
"^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
].join('
'),'color: #fad144;');
console.log('%c 佛祖保佑 T_T 永无BUG', 'color: #fa4844;font-size: 16px;font-weight: bold');
谷歌浏览器控制台格式混乱的解决办法
我最近使用 的控制台，我不知道如何搞乱格式，像这样：
百度了半天，有的说重装浏览器，有的说恢复默认设置，但这可能会导致浏览器上很多网站的账号和失效：
最后，我在Sifu上发现了一个问题，其中用户“黑将军”的回答帮助我解决了问题。 格式错乱的原因是控制台被缩放了，按住Ctrl键+鼠标滚轮可以恢复。 尝试了一下，果然！
参考文章
1.您是否遇到过F12控制台样式乱的问题？如何处理
2. 控制台使用（ ）
3.（）控制台，实用教程
