如何使用浏览器调试js程序

1、第一步我们先简单介绍一下JavaScript在浏览器中的作用。JavaScript是用来为网页添加各种动态效果,以便实现Web页面的人机交互的一种即时编译型的轻量级脚本语言。现在的浏览器都是支持JS的。

2、很多浏览器都是基于Google Chrome浏览器粝简肯惧内核来开发的，所以我以Google Chrome浏览器为例，打开浏览器，按一下键盘上的F12，或者在页面上右键--检查，就可以打开浏览器的开发者工具，JS的调试就是在这里操作的。

3、在开发者工具中，点击顶上菜单栏中的Sources，就会显示该页面用到的所有资源，展开文件夹，找到所需调试的JS文件，点击，右侧就出现你写的JS代码啦。

4、在该JS文件中找到需要调试的地方，点击前面的数字行号，出现蓝标，代表你告诉浏览器，当运行到这一行代码时，需要调试。这时按一下F5刷新浏览儡泌掩羞器，浏览器就会在这一步暂停，等待你的操作。页面上也会出现操作菜单，开发者工具的右侧功能栏也会变为可用状态。每个按钮的功能为：Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。Step over next function call：执行到下一步的函数调用（执行当前断点所在行，跳到下一行）Step into next function call：进入当前函数Step out of current function：跳出当前执行函数Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）Pause on exceptions：异常情况自动断点设置打断点的还有一种方法是在JS文件中需要打断点的代码行前一行，输入debugger，再进入浏览器打开开发者工具，浏览器会自动在该行暂停，等待你的操作。跟在Sources中添加小蓝标是一样的。

5、这时，鼠标移动到相应的变量上，可以显示当前变量的状态、值。所以调试会让你很清晰的理解变量、函数等是在什么时候被赋值、引用。让你方便地找到JS出现问题的地方、原因。其他浏览器操作也是一样的，好啦，快去试试吧。