前端调试断点方面

前端调试断点方面

目录

前端报错出了问题

  • 后端没问题但页面显示不是预想的样式，出现问题，F12 进入 Network 找哪一个请求出了问题，找到那一个请求：image-20231222144745741
    • 然后去前端全局查找 ctrl + shift + R
      • 找到 import 的就是引入使用此方法的地方
    • 然后看下面的页面是不是要找的那个页面，就能找到数据最后使用处

debugger

  • F12 后，点击进入image-20231222143854813

  • 关掉这个 Enable，然后就可以在前端打入 debugger 然后不重启进入了

image-20231222143700741

  • 这个就是断点：Breakpoints

    image-20231222144108854

  • 在前端写了 debugger 后，启动项目并需要 F12 打开开发者工具窗口，若是前端页面操作执行到这里，就会暂停程序的进行并自行打开 F12 窗口进行调试，如下图

    image-20240223100345611

  • 这里正方形括起来的差不多是一样的作用：直接到下一个 debugger 处，如果后面没有了就退出调试

  • 圆圈圈起来的也差不多是一样的作用：从此处的 debugger 开始执行下一步

    • 有点不同的就是上面的点击结束后就会自行最小化隐藏掉调试窗口，若是点击下面的窗口里的就不会自行最小化
posted @ 2024-02-23 16:43  朱呀朱~  阅读(42)  评论(0)  编辑  收藏  举报