前端小知识：开发调试小技巧 - 浏览器作为文本编辑器、动态增删函数断点、事件回调处打断点、修改API结果内容进行调试（线上）、DOM-属性、显示、子节点发生变化时断点（调用栈也能看到）、请求链接断点

最新推荐文章于 2023-08-12 18:18:44 发布

嗯嗯**

最新推荐文章于 2023-08-12 18:18:44 发布

阅读量309

点赞数 1

分类专栏：前端知识文章标签：前端动态增删函数断点事件回调处打断点 DOM断点请求链接断点

本文链接：https://blog.csdn.net/weixin_39651356/article/details/128429888

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

6. 开发调试技巧

技巧总结观看此位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 实时修改线上源代码

在这里插入图片描述

嗯嗯**

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小知识：开发调试小技巧 - 浏览器作为文本编辑器、动态增删函数断点、事件回调处打断点、修改API结果内容进行调试（线上）、DOM-属性、显示、子节点发生变化时断点（调用栈也能看到）、请求链接断点

前端小知识：开发调试小技巧 - 浏览器作为文本编辑器、动态增删函数断点、事件回调处打断点、修改API结果内容进行调试（线上）、DOM-属性、显示、子节点发生变化时断点（调用栈也能看到）、请求链接断点
复制链接

扫一扫