現在的瀏覽器一般都給了我們除錯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開發必備的知識，希望能對大家有所幫助。。。