谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

谷歌浏览器js断点怎么调试 , 相信有很多小伙伴对此存在疑惑 , 接下来就跟着我们小编一起了解一下调试谷歌浏览器js断点的方法说明 。希望可以帮助到大家 。
【谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明】谷歌浏览器js断点调试方法:
首先我们在需要调试的界面按 F12 打开开发者工具

谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
打开成功可以看到上图所示的弹出工具 。本经验是如何调试 , 所以直接进入正题 , 点击 Sources 标签
谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
左边 Page 标签下显示的就是项目目录
谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
假设对 Main.ts 进行调试 , 需要在调试代码行前 , 点击行数字位置所在 , 出现如图所示的蓝色标志 , 表示定位成功 。
谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
接下来运行页面 , 运行到脚本所在就会在断点的位置 , 出现暂停 , 将鼠标移到指定变量 , 就会显示出相关数据
谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
配合右边 watch 跟 调用堆栈的使用 , 可以跳出该函数 , 查看上一步函数等等 。通过查看这些数据得到调试结果
谷歌浏览器js断点怎么调试?调试谷歌浏览器js断点的方法说明

文章插图
注意事项:
断点位置断在想查看数据之后

    推荐阅读