文章目录

技巧总结观看此位Up主视频进行总结： https://space.bilibili.com/362186697/video?tid=0&keyword=&order=pubdate

6. 开发调试技巧

6.1 浏览器作为文本编辑器

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

6.2 动态增删函数断点

添加断点
取消断点
接口
debug(变量名)
undebug(变量名)

源代码


<!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 实时修改线上源代码

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

# 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

【GaussDB(for MySQL)】 Big IN查询优化

avatar 华为云开发者联盟
cover

GaussDB细粒度资源管控技术透视

avatar 华为云开发者联盟
cover

关于Java Chassis 3的契约优先（API First）开发

avatar 华为云开发者联盟