springboot+thymeleaf前后端联调笔记
springboot+thymeleaf前后端联调笔记
前端篇
参考1：https://zhuanlan.zhihu.com/p/27334352
参考2：控制台的多个函数的使用，类似一个使用文档字典。https://zhuanlan.zhihu.com/p/81610924
浏览器控制台
- Console.dir
使用 console.dir 命令，可以打印出对象的结构，而 console.log 仅能打印返回值，在打印 document 属性时尤为有用。
console.dir(object):
function cat(name, age, score){
this.name = name;
this.age = age;
this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.dir(c);
如果需要dump的是一个DOM对象，那么使用console.dirxml()会得到更好的显示效果。
- 结构化打印对象瞬时状态
JSON.stringify(obj, null, 2) 可以结构化打印出对象，因为是字符串，不用担心引用问题。
- 实时调试
不需要预先埋点，比如 document.activeElement 可以打印最近 focus 过的元素，因为打开控制台导致失去焦点，但我们可以通过此 api 获取它。
参考：https://www.runoob.com/jsref/prop-document-activeelement.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onclick="myFunction()">
<p>点击文档中任意一元素输出元素标签名。</p>
<input type="text" value="输入字段">
<button>按钮</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.activeElement.tagName;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
- 数组调试
通过 Array.prototype.find 快速寻找某个元素。参考：https://segmentfault.com/a/1190000014742303
var above5 = arr.find(ele => ele > 5);
- 在 Chrome 快速查找元素
Chrome 会记录最后插入的 5 个元素，分别以 $0 ~ $4 的方式在控制台直接输出。
- Console.table
以表格形式打印，对于对象数组尤为合适。
参考：获得dom的8种方法：https://blog.csdn.net/Misnice/article/details/100118113
console.table(["Google", "Runoob", "Taobao"]);
类似于后台debug的时候看到的堆栈信息。可以在页面渲染的时候，就直接将所有后台此时获得的数据打印。当然，也可以用这种方式绑定一个监听，时刻看各种数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素变量时刻输出</title>
</head>
<body onclick="myFunction()">
<p>点击文档中任意一元素输出元素标签名。</p>
<input type="text" value="输入字段">
<button value="hhh">按钮</button>
<script>
function myFunction() {
var x = document.activeElement;
console.table(x);//输出刚刚点击元素的所有属性
console.table(x.value);//输出点击元素绑定的value
//待检测,获得id，还有它绑定的值。
var x = document.activeElement.id;
var b = document.getElementById(x)
console.table(b);
console.dir(b);
console.log(b);
}
</script>
</body>
</html>
js代码插入
- 监听特定函数调用
monitor 有点像 proxy，用 monitor 包裹住的 function，在其调用后，会在控制台输出其调用信息。
- DOM 断点、事件断点
- DOM 断点，在 dom 元素右键，选择 （Break on subtree modifications），可以在此 dom 被修改时触发断点，在不确定 dom 被哪段 js 脚本修改时可能有用。
- Event Listener Breakpoints，神器之一，对于任何事件都能进入断点，比如 click，touch，script 事件统统能监听。
浏览器
- 插件
使用类似 ReactDTools VueDTools 调试对应框架。
- debugger:这个就是我们打断点那种方式了。
使用demo：https://www.cnblogs.com/xiaoqi2018/p/10832069.html
后端篇
emmm，后端就是idea自带的，那个没有什么好说的。。。