-
断点 : 在Sources中点击行数符号可以打断点。
查看全部 -
let script = document.createElement('script'); script.src="https://code.jquery.com/jquery-3.2.1.min.js"; script.integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="; script.crossorigin="anonymous"; document.head.appendChild(script);以上为引入jQuery的代码，大家一起学习
经过多次尝试，确认以上代码会报错CORS，修改一下
let script = document.createElement('script'); script.src="https://code.jquery.com/jquery-3.2.1.min.js"; document.head.appendChild(script);查看全部 -
顶顶顶顶顶顶顶顶对对对对对对
搜索
复制
查看全部 -
可以在控制面版写方法，比如写斐波那契数列；直接在控制台调用
查看全部 -
4-1；如果不想让他执行，按住shift加回车，就不会执行，而是换行；直接回车就是执行；查看全部 -
这是console的主要功能
查看全部 -
可以看下animate.css动画官网，可以设置不同css
查看全部 -
-3-3
点击最右上方，三个点就是可以设置控制台单独展示还是右下角展示。然后点击more tools,然后点击Animations
查看全部 -
3-3 这个动画效果是点击最上面的三个点，有个run tool
查看全部 -
3-3 快速调试css数值及颜色图形动画等，右侧的三个点，我还真的从来没用过
查看全部 -
看到右上角的cls没，在add new class中可以直接给元素新增加一个类名。同时也能在下面的style中加类名，设置属性。3-2 在元素中动态添加类和伪类
查看全部 -
看到那个小光标没，正在输入color，这个地方自己之前从来没有用过，这个可以用来过滤属性课程属于3-1 查看与编辑css
查看全部 -
从上向下，优先级逐渐降低，通过样式点击右侧文件对应的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操作
查看全部 -
習慣命名大寫底線？
查看全部 -
查看全部
-
查看全部
-
查看全部
-
查看全部
-
查看全部
-
可以把第三方庫 保存再這點 方便之後側
查看全部 -
可以把第三方庫 保存再這點 方便之後側
查看全部 -
查看全部
举报