常见用法
console.log( ) | info( ) | debug( ) | warn( ) | error( ) console.log("console log") console.info("console info") console.debug("console debug") console.warn("console warn") console.error("console error")这些控制台将根据提供给它们的事件类型，直接以适当的颜色打印原始字符串
测试Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> console.log("console log") console.info("console info") console.debug("console debug") console.warn("console warn") console.error("console error") </script> <script> console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;") </script> <script> console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message"); </script> <script> let info1 = [["Suprabha"], ["Frontend Dev"], ["Javascript"]] console.table(info1) </script> <script> console.group() console.log("Test 1st message") console.group("info") console.log("Suprabha") console.log("Frontend Engineer") console.groupEnd() console.groupEnd() </script> <script> let info2 = { "name": "Suprabha", "designation": "Frontend Engineer", "social": "@suprabhasupi" } console.dir(info2) </script> <!-- console.dir --> <button>console.log打印触发对象</button> <button>console.dir打印触发对象</button> <script> console.log(document.body, 'bodyHtml'); console.dir(document.body); let oButton = document.getElementsByTagName('button'); oButton[0].onclick = function(event){ console.log(event.target, 'button1'); } oButton[1].onclick = function(event){ console.dir(event.target, 'button2'); } </script> <script> console.assert(false, "Log me!") </script> <script> let name = "supi" let msg = "Its not a number" console.assert(typeof msg === "number", {name: name, msg: msg}) </script> <script> console.count("Hey") console.count("Hey") console.count("Hey") console.count("Hey") </script> <script> for (let i = 0; i < 5; i++) { console.count() } </script> <script> console.time("Time") let l = 0; for (let i = 0; i < 5; i++) { l += i } console.log("total", l) console.timeEnd("Time") </script> </body> </html>
样式控制台输出
可以使用% c 指令将 CSS 样式应用于控制台输出
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")我们可以多次添加% c
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");console.table( )
Table ()允许我们在控制台中生成一个表。输入必须是一个数组或一个对象，该对象将以表的形式显示
let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]] console.table(info)group("group") & groupEnd("group")
要组织控制台，让我们使用 console.group () & console.groupEnd ()
使用控制台组，将控制台日志分组在一起，而每个分组在层次结构中创建另一个级别。调用 groupEnd 减少了一个
console.group() console.log("Test 1st message") console.group("info") console.log("Suprabha") console.log("Frontend Engineer") console.groupEnd() console.groupEnd()console.dir( )
打印指定对象的 JSON 表示形式
let info = { "name": "Suprabha", "designation": "Frontend Engineer", "social": "@suprabhasupi" } console.dir(info)直接打印json可能不明显，用来打印dom对象就明显对比
<button>console.log打印触发对象</button> <button>console.dir打印触发对象</button> <script> console.log(document.body, 'bodyHtml'); console.dir(document.body); let oButton = document.getElementsByTagName('button'); oButton[0].onclick = function(event){ console.log(event.target, 'button1'); } oButton[1].onclick = function(event){ console.dir(event.target, 'button2'); } </script>console.assert( )
如果第一个参数为 false，则记录消息并将跟踪堆栈到控制台
它只会打印错误的参数，如果第一个参数是真的，它什么也不会做
console.assert(false, "Log me!")let name = "supi" let msg = "Its not a number" console.assert(typeof msg === "number", {name: name, msg: msg})console.count ( )
这个函数记录调用 count ()的次数。这个函数接受一个可选的参数标签
如果提供了 label，此函数将记录使用该特定标签调用 count ()的次数
console.count("Hey") console.count("Hey") console.count("Hey") console.count("Hey")如果省略标签，函数将记录在这一行中调用 count ()的次数
for (let i = 0; i < 5; i++) { console.count() }time( ) and timeEnd( )
检查代码在执行时的性能,Time ()是一种更好的方法来跟踪 JavaScript 执行所花费的微时间
console.time("Time") let l = 0; for (let i = 0; i < 5; i++) { l += i } console.log("total", l) console.timeEnd(
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。