如何解决前端开发中遇到的问题-阿里云开发者社区

开发者社区> 开发与运维> 正文

如何解决前端开发中遇到的问题

简介: 解决问题的第一步一般是调试,调试之后发现也解决不了的问题的时候再去Google。Google的科学使用也包含了很多内容,这里我们先说如何不通过Google解决遇到的问题。

解决问题的第一步一般是调试,调试之后发现也解决不了的问题的时候再去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
开发者控制台

2、点击控制台上面工具栏里的Sources标签。
点击Sources之后,左侧边可以看到这个页面的所有源文件,有css,js,还有html页面。

img_718929b04ab988096487c85682e93468.png
Source标签与里面的内容

3、我们在侧边点击要调试的js文件,这里只有script.js文件。

img_535a35e5408fedca7f8af3a59057492f.png
script.js点击之后

4、在点击script.js文件之后,文件左边有行序号,我们可以在行序号的位置处点击进行设置 断点断点代表着程序执行到这里就先暂时停下拉,以便我们进行调试。在行号的位置处点击一下

img_474e42f81057e31eb7dfea63c38853ac.png
设置断点

我们可以把断点设置在其它位置也行,主要看我们想让程序暂停在什么位置,方便我们调试。

5、刷新页面,出来如下效果。
可以看到页面暂停在调试器的断点位置。在script.js哪里是高亮状态,代表当前程序执行到这一行的位置,最右边是程序执行额时候变量的内容。

img_b890f66b0cfba861da8daad7d51e4452.png
页面停留在断点

6、这个时候,我们可以控制程序的执行步骤,如何执行。

img_04a551c5b2ad2a962925efc2a37a6b9b.png
这里有几个比较重要的按钮

简单的程序,我们点击这个按钮就好了,一步一步的运行程序。

img_c96040a1b2b0c2e1f0c391db18060e08.png
image.png

7、程序运行到特定位置,比如到快结束了

img_98261c271fff7b0ddd80f075156fa7c8.png
鼠标移动到变量身上,它会自己显示内容

8、点击继续运行

img_8494d74fb3536cee26fbc2d05d96d314.png
继续运行按钮

9、点击继续运行之后,没有断电了,程序会运行完。
不过我们在音乐点击事件的函数里也设置了一个断点,只要我们点击了音乐按钮,程序会执行到音乐点击处理的函数里面,然后我们就可以勘察为什么程序没有继续运行了。

img_7e01ed846994d0c818cfa297b593aa4e.png
程序执行完时的页面

10、点击音乐按钮

img_1e0ec0322e578d0b1f01fca17d96c35c.png
程序停在了点击处理的函数里

11、然后我们可以查看audio的具体内容,为什么没有生效,为什么程序出现了问题?

img_4fe551ca8c7038d1c5423d65c96c32f0.png
对比audio的属性

这个时候我们就知道了问题所在,audio.pause是一个方法,不是bool类型

12、我们在当前程序暂停的时候,也可以在控制台查看当前变量的内容。再点击一次控制台。

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..

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章