-
從上向下，優先級逐漸降低，通過樣式點擊右側文件對應的css，進入后就是對應的source，谷歌瀏覽器下面有個{}，可以格式化代碼，之前自己就很少用這個
查看全部 -
通過breakon給dom打斷點，2-4在dom中斷點調試
查看全部 -
完成學習第二階段：全盤回顧，腳踏實地跟隨學習，做筆記實操。
查看全部 -
完成學習第一階段：快速獲取認知。
查看全部 -
代碼
<!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>
查看全部 -
一樣醬一下增刪改查的api操作
查看全部 -
習慣命名大寫底線？
查看全部 -
查看全部
-
查看全部
-
查看全部
-
查看全部
-
查看全部
-
可以把第三方庫 保存再這點 方便之後側
查看全部 -
可以把第三方庫 保存再這點 方便之後側
查看全部 -
查看全部
舉報