如何利用Chrome工具進行前端js調試

這次,我所要與你們分享的是利用Chrome工具進行前端js調試,也就是咱們在程序中所說的debug(這個方法是我一個朋友和我分享的,我拿來跟你們一塊兒分享)。前端

  1. 必備工具:Chrome瀏覽器, js開發環境。
  2. 在Chrome瀏覽器中運行你的web工程,打開「開發者模式」(右鍵選擇檢查或者按「F12「」)。打開你的sources選項,找到你所要調試的js文件。

     

  3. 在你想要調試的地方單擊插入斷點,成功以後你們也會發現有一個像路標同樣的在所在的行上,這樣就是顯示插入成功了,另外在右邊你也能夠看見「Breakpoints」選項下也能看見斷點的具體信息,在多少行插入的都有顯示的,注意:對勾表明不忽略斷點,若是對勾去掉,則斷點不起做用。

     

  4. 當你進行調試的時候,會出現這樣的頁面。表面你插入的斷點已經起到了做用。我就來說講頁面上顯示的兩個按鈕的做用。左邊的按鈕表明釋放斷點,若是釋放以後,表示這次調試結束。右邊的按鈕,表明從你當前插入斷點的地方,繼續往下執行,你點擊一下,程序便向下執行一行,直至程序結束就會中止。並且執行的時候,你可以看見js中的變量值以及值的改變狀況,進而能夠判斷程序在哪裏執行出現了問題,最終解決問題。

     

     

     

     

  5. 最後在出現調試的頁面狀況下,右邊也有不少選項。這裏我就不一一說了,但願你們去探索,總的有些須要本身去尋找,這樣才能獲得更多。 

         切記:若是沒有出現調試程序,說明你的操做沒有進入你所插入的斷點。web

相關文章
相關標籤/搜索