1. 程式人生 > >Chrome瀏覽器調試技巧

Chrome瀏覽器調試技巧

跳轉 bug dom 透明 編號 事件 class 等價 使用

本文主要講解針對chrome瀏覽器的調試方案,對於其他瀏覽器其實大同小異。

先來入門一點的

DOM元素調試

技術分享圖片

看上圖:

以上圖表明的1,2,3,4,5標記說明:

1,為移動設備模擬器,chorme現在是做的做好的,IE無法媲美,對於響應式開發來說,首選它。

2,屬性內容 一般為id class之類的,鼠標多點擊幾下,可以進行樣式的添加,修改。

3,看到加號圖標了嗎,點擊,可以進行樣式書寫添加。

4,css樣式查看,同樣可以更改,被劃掉的樣式表示不被作用。如果有color,background等涉及顏色屬性時我們可以點擊後面的顏色方塊,選擇自己喜歡的顏色,然後把顏色值復制到代碼中,而不必再糾結喜歡的顏色對應的顏色編號是多少,而且可以調節透明度.

5 對於勾選住的樣式,我們可以去掉勾選,那麽這條樣式將不被作用。

JS調試

單步調試

如下面代碼:

點擊相應行號,即可產生一個斷點,這時刷新瀏覽器,即可代碼運行到該位置暫停,也可以在代碼中相應位置加上debugger;打開調試面板,再刷新,效果是一樣的。

一般debugger打在一個函數體後面,可以檢驗代碼是否跑到這個函數內部,也可以檢查函數參數是否傳入

function(a,b){

  debugger;

  return a+b

};

技術分享圖片

依照下圖:

我們可以進行以下操作

點擊1,我們可以釋放掉暫停,程序繼續走,遇到下一個debugger處暫停,若沒有debugger則會加載頁面。

點擊2,我們可以要代碼執行下一行,如上圖中的let c=getnewValue(i);

再點擊一下,則跑到for(){}循環處;我們發現上一行有個函數getnewValue()可是代碼沒有跑到裏面,我們想要要它跑入函數體內,我們點擊3,如要退出函數體,請按4

5是什麽,點擊5我們可以移除所有斷點,若要移除制定位置的斷點,請看8,勾選了代表某處打了斷點,去掉勾選即可。

6是什麽,點擊一下,再運行代碼,代碼會自動跳轉到代碼出錯處,如某個變量未定義處,是不是很強大,其實我們代碼出錯了在console處就會顯示某處出錯了,這兩者作用是等價的。

7的作用是監看某個變量的實時值,我們可以選中代碼某個變量 鼠標右鍵 add selected text to watch,再運行代碼,可以實時查看某個值變化。

10是事件監聽,如 鼠標點擊時,click事件,我們找到mouse click勾選上,當頁面某按鈕點擊時: 代碼會調到事件觸發的代碼處

技術分享圖片

技術分享圖片

這個功能很實用,例如你想百度一下"chrome調試技巧",當你點擊一下百度一下這個按鈕,你想了解點擊之後百度一下會執行什麽函數,執行的代碼,你可以使用這種方法

如果跳轉到一些代碼是壓縮過的,我們可以點擊9的位置,可以要代碼便於閱讀

Chrome瀏覽器調試技巧