前端项目断点调试工具

最新推荐文章于 2024-04-27 09:26:26 发布

L.End0010

最新推荐文章于 2024-04-27 09:26:26 发布

阅读量763

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_58035226/article/details/126395694

版权

前端时间，因为生命周期的原因一直百思不得其解。学长跟我说，可以用断点调试啊！

我顿时醒悟，有道理啊！然后就去查询相关资料，但是最后用起来，其实用处不大。。

这边还是介绍一下怎么使用吧，首先需要认识 debugger 这个东西

在程序当中，你直接将 debugger 放入你想要断点的上一行代码，在执行到这行代码的时候就会自动进行断点，有学习过C语言相关基础的同学，应该能够明白的我的意思吧

上代码，这边来一个简单的案例测试吧

<!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>
</head>
<body>
    <select name="" id="" onchange="aa(value)">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    
    <script>
        console.log("afdads")
        // debugger
        function aa(a){
            console.log("asdfasd")
            console.log(a)
        }
    </script>
</body>
</html>

然后执行的结果就是，可能第一次会没用，不用慌，刷新一下就行了

然后就会自动出现相对应的已在调试程序中暂停字样，提前开好F12 （审视元素）然后进行查看

这种方法不仅可以用再原生的html代码当中，当然也可以直接使用在VUE的项目中，无需添加其他的东西，也无需添加其他的插件，直接放入即可，需要哪里停，就在哪里的上一行放就行。

亲测有效，

又是一个秃头小技巧~~

L.End0010

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端项目断点调试工具

这种方法不仅可以用再原生的html代码当中，当然也可以直接使用在VUE的项目中，无需添加其他的东西，也无需添加其他的插件，直接放入即可，需要哪里停，就在哪里的上一行放就行。在程序当中，你直接将 debugger 放入你想要断点的上一行代码，在执行到这行代码的时候就会自动进行断点，有学习过C语言相关基础的同学，应该能够明白的我的意思吧。然后就去查询相关资料，但是最后用起来，其实用处不大。然后执行的结果就是，可能第一次会没用，不用慌，刷新一下就行了。上代码，这边来一个简单的案例测试吧。又是一个秃头小技巧~~..
复制链接

扫一扫