使用chrome浏览器进行前端断点调试

6,249 阅读1分钟

1.问题

因为工作是使用idea进行java开发,同时也会写js进行页面展示。而idea对于java的断点debug功能很强大,一直很疑惑如果我想调试js,我应该如何调试?

2.如何调试

2.1 Sources断点

前段时间,偶然的一次在控制台Sources的js代码处不小心点了一个断点,在执行的时候就卡在这行代码,发现还可以看到参数的变化。具体操作可以看下图(如第6行代码)

  • 在你需要调试的代码处打断点,刷新对应的页面
  • 按f8跳断点,把鼠标放在你想看的参数上面,既可以看到参数的值变化,很方便

3.总结

  • chrome浏览器很强大,因为本人是前端小白,对于这个调试方法,是我在学习过程中意外发现的,后面查询过还有很多更具技巧性的调试方法,但是如果你是跟我一样主要写java的话,对js的调试要求不高,可以试试Sources 断点调试。
  • 在实际生产中,debug很重要,不仅仅是帮你调试错误,甚至可以帮你理清代码逻辑,特别是阅读别人的代码,可提高效率。
  • 更多前端调试方法参考:juejin.cn/post/684490…