Javascript脚本在网页开发中经常会用到 ， 在开发过程中 ， 如果遇到一些程序问题 ， 我们怎样进行调试？怎样查找到程序出问题的地方？可以利用Chrome浏览器的开发者工具来进行脚本调试 。 下面一起来看下具体怎么操作 。 操作方法 01 我们例子的Html代码很简单 ， 如图 ， 就是一个按钮 ， 点击这个按钮 ， 会触发点击事件 。
文章插图
02 点击事件的脚本代码如图 ， 也很简单 ， 主要是对二个数做相加操作 ， 然后alert弹出相加的结果 。
逻辑很简单 ， 我们这里主要是演示调试的过程 。
文章插图
03 代码都写好了 ， 我们用Chrome浏览器打开这个网页 。
如图 ，
文章插图
04 【如何用Chrome开发者工具来调试脚本？】点击浏览器右边的‘三点’按钮 ， 在弹出的菜单上的‘更多工具’里 ， 有个‘开发者工具’ ， 点击它打开这个工具
文章插图
05 打开后 ， 如图 ， 这个就是chrome的开发者工具 。
我们点击工具条上的‘Sources'栏
文章插图
06 点击后 ， 我们就可以看到我们网页的源代码了 ， 因为我们的脚本文件是直接写在test.html文件上的 ， 我们在左边的目录上 ， 点击选中这个test.html文件 ， 在右边就可以看到这个文件的脚本代码了 ， 如图 ， 可以看到我们写的二个function的代码 。
文章插图
07 我们点击这脚本上的某一行 ， 就在这行添加了一个断点 ， 当程序运行到这个断点 ， 就会产生中断 ， 让我们一步步的调试 。
文章插图
08 我们来试下中断 ， 点击页面上的‘求和’按钮 ， 可以看到 ， 程序在刚才的断点上中断了 ，
文章插图
09 我们可以点击右边的‘运行’按钮 ， 点击一次 ， 代码就往前运行一次 ， 以便我们逐
试 。
在代码运行的时候 ， 在右边的监控栏 ， 还会实时显示出当前代码变量的值 ， 比如我们代码里的 n1, n2, 和这二个值相加后的结果值 result ， 都可以在这里显示出来 。 以便我们判断程序有没有正确执行 。
推荐阅读
- 使用Jquery如何操作下拉框控件？
- 如何批量打印CAD文件
- 如何合并pdf或压缩pdf文件大小
- Excel中如何利用COUNTIF函数统计个数
- 简单几步打造冷色调图片
- 如何把图片调为黑白色
- 如何给PDF文件中的文字添加下划线
- 轻快PDF阅读器如何查看word文件
- 如何挑选香甜多汁的优质苹果 教你几招
- 对于颈部疼痛的人如何选择最佳枕头