浏览器调试之js调试

现在的浏览器一般都给了我们调试js的功能，个人比较推荐使用google浏览器，他的调试结构清晰且强大，下面就来介绍一下google浏览器的调试功能

调试器界面

按下F12，你会发现弹出来一个窗口，并附着在当前页面，这就是google浏览器的调试器，在该窗口中，你能找到有Elements\Console\Sources\Network….，前4个是常用的功能，如果你不习惯这个窗口的位置，你也可以调整它，你可以选择直接拖动该窗口，你也可以点右上方的三个点一样的按钮，来改变他的位置。

Console界面

Console界面的环境与script标签的环境是一样的，你可以在这个里面直接编写JavaScript代码，能达到在script标签中编写js代码一样的效果，甚至在网页被打开之后，你还可以在console中动态控制dom结构

//例如你可以在Console中写上
var _div = document.createElement("div"):
document.body.appendChild(_div);

Elements界面

这个选项卡中可以清晰的观察dom结构，甚至是css属性，js等等，当你只想观察页面的某一个特定区域的dom结构的时候，这时候你不需要一层一层的去展开，而是直接用左上角的按钮选中即可。

Source

这里面存放了资源文件，包括html页面，css，js等等，这里面最强大的功能之一就是，你找到一个js文件之后，打开，并可以在页面中设置断点，你只需要将页面中的某一行的数字标记就可以了

看到上面的24，就是我们所设置的断点。当我们刷新页面或者触发该事件的时候，页面执行就会停到这里，然后我们再观察下面这张图

在这里，你可以选中观察到红箭头指向的5个按钮。当你设置好断点开始运行的时候，

第一个按钮就会变成一个三角形，当你点击该三角形开始运行的时候，程序就会自动一次性往下执行，直到运行到下一个断点的位置，若下面没有断点，它就会自动运行至结束。

第二个按钮是逐过程执行，如果这一行调用了一个函数，也是一次性执行这个过程

第三个按钮是也是逐过程执行，只是当这一行是一个函数的时候，他会自动跳转到函数内部的

第四个按钮是跳出该函数

第五个按钮，是忽略所有断点

---

你会发现下面还有一个watch区域，点开之后，你会发现有一个+号，当你点击该符号,输入document.body的时候。你会发现，她能观察到这dom的结构，也就是说这个watch可以用来查看JavaScript对象

Network选项卡

该选项卡是观察网络信息的选项卡，这个选项卡是专门观察与服务器交互状态的选项卡，甚至你可以观察到服务器传递过来的数据和浏览器传输过去的数据，尤其在传输json数据的时候，它能很清晰的观察到json内部传输结构

通过浏览器调试发现未知的API

javascript的api这么多。我相信几乎没有人能够把它全部记住，但是你完全可以在浏览器中找到他们

---

我现在在页面中创建了一个audio标签，我要设置为播放该首之后，立即就播放下一首，这时候，你不需要百度，你完全可以在浏览器中解决这个问题

首先，我们肯定是要获取到这个dom对象的，获取到对象
之后，我们希望能在他播放结束的时候，播放下一首，那么很简单的就会想到，要是提供了end方法就好了，我们只需要在end的时候，改变audio的src，然后再play它

首先。我完全没有使用过这些api，那么我应该如何去发现他们呢？你只需要watch中输入document.getElementById(“这个audio的id”),然后并观察，发现真有一个play方法和onended方法，那么事件就简单了

    <audio controls="controls" autoplay="autoplay" id="a"></audio>

<script>
    var a = document.getElementById("a");
    a.src = "许嵩 - 断桥残雪.mp3";
    a.onended = function(){
        a.src = "庐州月.mp3";
        a.play();
    };
</script>

浏览器的调试几乎是web开发必备的知识，希望能对大家有所帮助。。。