-
- 薇呐 2022-05-02
代码
<!DOCTYPE html>
<html>
<head>
<title>使用Console调试JavaScript代码Log日志信息</title>
<style> </style>
</head>
<body>
<h1>使用Console调试JavaScript代码Log日志信息</h1>
<div id="demo">
<h2>1.consolelog打印信息</h2>
<button id="log">Log Info (console.log)</button>
<h2>2.consolewarn告警信息</h2>
<button id="warn">Log Warning(consolewarn)</button>
<h2>3.console.error错误信息-通常在异常逻辑中catch住的错误信息使用</h2>
<button id="hal">Log Error(consoleerror)</button>
<h2>4.console.table展示JSON格式的复杂信息</h2>
<button id="table">Log Table(console.table)</button>
<h2>5.consolegroup信息组展示</h2>
<button id="group">Log Group(consolegroup)</button>
<h2>6.consolecustom定制样式</h2>
<button id="custom">Log Custom(定制样式)</button>
<h2>7.Network网络请求错误展示</h2>
<button id="network">Cause404(Network404)</button></div>
<script>
// console.log打印普通log日志信息
document.querySelector("#log").addEventListener("click",() => {
console.log("Hello,World!");
});
// console.warn打印告警信息
document.querySelector("#warn").addEventListener("click",() => {
console.warn("抱歉,请您输入正确的value(try-catch流程)");
});
// console.error打印错误信息
document.querySelector("#hal").addEventListener("click",() => {
console.error("I'm sorry, Dave. Im afraid I cant do that.");
});
//console.table打印表格信息
document.querySelector("#table").addEventListener("click",() => {
console.table([
{ short:"JS",long:"JavaScript",version:"ES6"},
{short:"css",long: "Casting style Sheet",version:"cSS 3.0"},
{ short: "HTML",long: "Hyper Text Markup Language"}
]);
});
//console.group打印信息组
document.querySelector("#group").addEventListener("click",() => {
const label="使用Console打印Group一组信息";
console.group(label);
console.info("Loq");
console.info("Warning");
console.info("Error");
console.info("Network");
console.groupEnd(label);
});
//console自定义样式
document.querySelector("#custom").addEventListener("click",() => {
const spacing="5px";
const styles ='padding: ${spacing};background-color: darkblue;color:white;font-style: italic; border: ${spacing} solid crimson; font-size: 2em;';
console.log("%c这里展示定制的样式",styles);
});
// 网络错误Log打印
document.querySelector("#network").addEventListener("click",e => {
fetch("/network");
});
</script>
</body>
</html>
- 0赞 · 1采集
-
- 慕瓜5414566 2022-03-27
Assert 可以血測試
Time調適 is代碼性能
- 0赞 · 0采集
-
- 慕瓜5414566 2022-03-27
快一秒了
- 0赞 · 0采集
-
- 慕瓜5414566 2022-03-27
Console assert
Console.time
- 0赞 · 0采集
-
- 百事可爱i 2021-08-31
1.console.log 打印信息
2.console.warn 告警信息
3.console.error 打印错误信息
4.console.table 打印json格式的数据信息，表格
5.console.group+console.info+console.grounpEnd 打印信息组
6.console.log("%c这里展示定时的样式",styles) console Custom定制样式
7.cause 404 Network网络请求错误展示
8.console.assert(false,'断言') 断言类似于try catch语句
9.console.time() +函数名(参数) + console.timeEnd() 检测代码片段执行时间
- 0赞 · 2采集
-
- gsl003 2021-05-27
在Console中调试log信息:
console.log:打印普通log日志信息;
console.warn:打印警告信息
console.error:打印错误信息
console.table:打印表格信息
console.qroup+console.info+console.grounpEnd:打印信息组
console.log("%c这里展示定时的样式",styles)console Custom定制样式
cause 404:Network网络请求错误展示
console.assert(false,'断言'):断言类似于try catch语句
console.time():+console.函数名(参数)+console.timeEnd() :检测代码片段执行时间
- 0赞 · 0采集
-
- NEPTOO 2020-06-11
- Console.time() 打印函数执行时间
-
截图0赞 · 0采集
-
- GerhardzzZ 2020-04-29
console.table()
-
截图0赞 · 0采集
-
- 肥翘翘 2020-02-29
1、console.warn 打印提示
2、console.error 打印错误
3、console.table 以table的形式展示JSON式的复杂信息
4、console.group 以一组的形式打印（具体看图中右边）
5、在需要测试运行时间的函数之前console.time()
运行函数
console.timeEnd（）
打印出函数运行时间
-
截图0赞 · 2采集
-
- 符竹青 2020-02-19
console.time 可以检测函数执行的时间
console.time()
....
console.timeEnd()
- 0赞 · 0采集
-
- 符竹青 2020-02-19
console 各种打印日志的方式
console assert 断言
- 0赞 · 0采集
-
- 符竹青 2020-02-19
vs code
引入node 的插件，直接启动一个服务运行代码
- 0赞 · 0采集
-
- 斜杠男人 2019-12-14
- console.assert断言 console.time调试js性能
-
截图0赞 · 0采集
-
- weixin_慕勒3456513 2019-11-14
- 147777878888888888888881111111448898854868856655589695857889988855566888988889966858888885555555555555555555585555555555555555555555555555555588555555555555555555555555555555
- 0赞 · 0采集
-
- qq_慕九州7187097 2019-10-04
shift+enter<=> 正常语义的换行
enter =>在console面板里面是 执行的意思
console.log('1','2','3') 自动连接 123
console.warn() 打印出来的文字含着警告
console.table() 把JSON等复杂信息以表格形式打印
- 0赞 · 1采集
-
- weixin_慕勒3456513 2019-10-02
是的很有意思
- 0赞 · 0采集
-
- LJLLY 2019-08-31
console.time
-
截图0赞 · 1采集
-
- LJLLY 2019-08-31
console
-
截图0赞 · 1采集
-
- 慕先生8427159 2019-08-19
- console.time() ……打印代码执行时间 console.timeEnd()
-
截图1赞 · 1采集
-
- 慕先生8427159 2019-08-19
- %c样式占位符，第二个参数为需要指定的样式，可使用变量
-
截图0赞 · 0采集
