解决问题的第一步一般是调试,调试之后发现也解决不了的问题的时候再去Google。Google的科学使用也包含了很多内容,这里我们先说如何不通过Google解决遇到的问题。
问题
这是一段含有一小块错误的JS代码,功能主要是实现点击 旋转的音乐图标的时候,如果音乐再播放,就暂停,如果音乐暂停了,就再次播放。
window.onload = function () {
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
var page3 = document.getElementById("page3");
page1.addEventListener("touchstart",function (event) {
page1.style.display = "none";
page2.style.display = "block";
},false)
var music = document.getElementById("music");
var audio = document.getElementsByTagName("audio")[0];
music.onclick = function () {
console.log("clicked");
if (audio.pause){
audio.play();
}
else {
audio.pause();
}
};
}
当打开浏览器的时候,页面并没有按照我们想象的那样执行。
解决步骤
1、首先点开页面,打开开发者控制台,一般按F12
![img_6b741c30dca07bd842cef7a13647d61e.png](https://yqfile.alicdn.com/img_6b741c30dca07bd842cef7a13647d61e.png)
2、点击控制台上面工具栏里的Sources标签。
点击Sources之后,左侧边可以看到这个页面的所有源文件,有css
,js
,还有html
页面。
![img_718929b04ab988096487c85682e93468.png](https://yqfile.alicdn.com/img_718929b04ab988096487c85682e93468.png)
3、我们在侧边点击要调试的js文件,这里只有script.js文件。
![img_535a35e5408fedca7f8af3a59057492f.png](https://yqfile.alicdn.com/img_535a35e5408fedca7f8af3a59057492f.png)
4、在点击script.js文件之后,文件左边有行序号,我们可以在行序号的位置处点击进行设置 断点
,断点
代表着程序执行到这里就先暂时停下拉,以便我们进行调试。在行号的位置处点击一下
![img_474e42f81057e31eb7dfea63c38853ac.png](https://yqfile.alicdn.com/img_474e42f81057e31eb7dfea63c38853ac.png)
我们可以把断点设置在其它位置也行,主要看我们想让程序暂停在什么位置,方便我们调试。
5、刷新页面,出来如下效果。
可以看到页面暂停在调试器的断点位置。在script.js哪里是高亮状态,代表当前程序执行到这一行的位置,最右边是程序执行额时候变量
的内容。
![img_b890f66b0cfba861da8daad7d51e4452.png](https://yqfile.alicdn.com/img_b890f66b0cfba861da8daad7d51e4452.png)
6、这个时候,我们可以控制程序的执行步骤,如何执行。
![img_04a551c5b2ad2a962925efc2a37a6b9b.png](https://yqfile.alicdn.com/img_04a551c5b2ad2a962925efc2a37a6b9b.png)
简单的程序,我们点击这个按钮就好了,一步一步的运行程序。
![img_c96040a1b2b0c2e1f0c391db18060e08.png](https://yqfile.alicdn.com/img_c96040a1b2b0c2e1f0c391db18060e08.png)
7、程序运行到特定位置,比如到快结束了
![img_98261c271fff7b0ddd80f075156fa7c8.png](https://yqfile.alicdn.com/img_98261c271fff7b0ddd80f075156fa7c8.png)
8、点击继续运行
![img_8494d74fb3536cee26fbc2d05d96d314.png](https://yqfile.alicdn.com/img_8494d74fb3536cee26fbc2d05d96d314.png)
9、点击继续运行之后,没有断电了,程序会运行完。
不过我们在音乐点击事件的函数里也设置了一个断点,只要我们点击了音乐按钮,程序会执行到音乐点击处理的函数里面,然后我们就可以勘察为什么程序没有继续运行了。
![img_7e01ed846994d0c818cfa297b593aa4e.png](https://yqfile.alicdn.com/img_7e01ed846994d0c818cfa297b593aa4e.png)
10、点击音乐按钮
![img_1e0ec0322e578d0b1f01fca17d96c35c.png](https://yqfile.alicdn.com/img_1e0ec0322e578d0b1f01fca17d96c35c.png)
11、然后我们可以查看audio的具体内容,为什么没有生效,为什么程序出现了问题?
![img_4fe551ca8c7038d1c5423d65c96c32f0.png](https://yqfile.alicdn.com/img_4fe551ca8c7038d1c5423d65c96c32f0.png)
这个时候我们就知道了问题所在,audio.pause是一个方法
,不是bool类型
。
12、我们在当前程序暂停的时候,也可以在控制台查看当前变量的内容。再点击一次控制台。
![img_fc5f5246f9c45621a5442ee43abb6da0.png](https://yqfile.alicdn.com/img_fc5f5246f9c45621a5442ee43abb6da0.png)
13、这个时候,我们已经知道问题所在了。
将pause改为paused,就可以。
正确的程序
window.onload = function () {
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
var page3 = document.getElementById("page3");
page1.addEventListener("touchstart",function (event) {
page1.style.display = "none";
page2.style.display = "block";
},false)
var music = document.getElementById("music");
var audio = document.getElementsByTagName("audio")[0];
music.onclick = function () {
console.log("clicked");
if (audio.paused){
audio.play();
}
else {
audio.pause();
}
};
}
看起来好像没什么差
总结
调试程序是开发人员必备技能,想要学习写程序的人一定要会奥。
这篇文章主要演示了,当我们只做的前端页面出现问题的时候,如何通过调试来解决遇到的问题。跟高级的解决问题方试就是高级使用Google..