springboot+thymeleaf前后端联调笔记

最新推荐文章于 2023-11-01 09:27:15 发布

穿越23小时

最新推荐文章于 2023-11-01 09:27:15 发布

阅读量621

点赞数

分类专栏：笔记 spring

本文链接：https://blog.csdn.net/qq_42031483/article/details/106229749

版权

笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

spring

3 篇文章 0 订阅

订阅专栏

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自带的，那个没有什么好说的。。。

穿越23小时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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):
复制链接

扫一扫

专栏目录