前端小知识:开发调试小技巧 - 浏览器作为文本编辑器、动态增删函数断点、事件回调处打断点、修改API结果内容进行调试(线上)、DOM-属性、显示、子节点发生变化时断点(调用栈也能看到)、请求链接断点
前端小知识:开发调试小技巧 - 浏览器作为文本编辑器、动态增删函数断点、事件回调处打断点、修改API结果内容进行调试(线上)、DOM-属性、显示、子节点发生变化时断点(调用栈也能看到)、请求链接断点
·
文章目录
技巧总结观看此位Up主视频进行总结: https://space.bilibili.com/362186697/video?tid=0&keyword=&order=pubdate
6. 开发调试技巧
6.1 浏览器作为文本编辑器
6.2 动态增删函数断点
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="G:\IDEA_Project\个人\chat-springboot\src\main\resources\static\js\lodash.js"></script>
</head>
<body>
</body>
<script>
let people = {
name: "lrc",
year: 20,
habby: {
label: "游泳",
startTime: '2022-12-24'
}
}
console.table(people)
//常规模式(浏览器内置)
if(people && people.habby && people.habby.label) {
console.log("%s的爱好是:%s 从%s开始学习", people.name, people.habby.label, people.habby.startTime)
}
//可选链模式(浏览器内置)
if(people?.habby?.label) {
console.log("%s的爱好是:%s 从%s开始学习", people.name, people.habby.label, people.habby.startTime)
}
//lodash第三方API
if(_.get(people, "habby.label")) {
console.log("%s的爱好是==:%s 从%s开始学习", people.name, people.habby.label, people.habby.startTime)
}
</script>
</html>
6.3 事件回调处打断点
快捷键: Ctrl + Shift + P
6.4 修改API结果内容进行调试(线上)- requestly
插件名: Redirect URL, Modify Headers & Mock APIs
Edge插件下载地址: https://microsoftedge.microsoft.com/addons/detail/redirect-url-modify-head/ehghoapnlpepjmfbgaomdiilchcjemak?hl=zh-CN
使用教程:https://docs.requestly.io/
官方收集Bug地址: https://github.com/requestly/requestly
官网:https://requestly.io/
6.5 DOM-属性、显示、子节点发生变化时断点(调用栈也能看到)
6.6 请求链接断点 - 找到发起请求的源代码
方式1
方式2
6.7 实时修改线上源代码
更多推荐
已为社区贡献7条内容
所有评论(0)