chrome瀏覽器除錯

2021-07-25 03:36:26 字數 2150 閱讀 9789

f8:下個斷點

f10:單步執行

f11:單步跳入

shift+f11:單步跳出

選中變數,右鍵選擇add to watch,檢視變數值比較方便

有時候我們需要監聽某個 dom 被修改情況(js**比較複雜,找不到**對dom做的改變),那麼我們可以直接在 dom 上設定斷點。

如圖所見,在元素審查的 elements panel 中在某個元素上右鍵選單裡可以設定三種不同情況的斷點:

1,子節點修改

2,自身屬性修改

3,自身節點被刪除

選中之後,sources panel 中右側的 dom breakpoints 列表中就會出現該 dom 斷點。一旦執行到要對該 dom 做相應修改時,**就會在那裡停下來,如下圖所示。

對於下面**,找到div_item元素,選擇node removal監聽,即可監聽到

var e = document.getelementbyid('div_item'); 

e.parentelement.removechild(e);

對於下面**,找到item-radio元素組的第乙個元素,選擇自身屬性修改監聽,在call stack中,往下一步步找,即可監聽到控制它的業務**

示例**

1,console.group

console.log("來自foo模組的資訊 blah blah blah...");

console.groupend();

console.log("來自bar模組的資訊 blah blah blah...");

直接以**的形式將資料輸出

3,console.assert當你想**滿足某些條件時才輸出資訊到控制台,那麼你大可不必寫if或者三元表示式來達到目的,cosole.assert便是這樣場景下一種很好的工具,它會先對傳入的表示式進行斷言,只有表示式為假時才輸出相應資訊到控制台。

var isdebug=false;

console.assert(isdebug,'開發中的log資訊。。。');

4,console.count除了條件輸出的場景,還有常見的場景是計數。

當你想統計某段**執行了多少次時也大可不必自己去寫相關邏輯,內建的console.count可以很地勝任這樣的任務。

5,網頁可編輯

document.body.contenteditable=』true』;

利用Chrome瀏覽器除錯Android資料庫

通過ddms和sqlite3工具可以調出資料庫,但ddms中有時會出現許可權訪問限制打不開data資料夾,sqlite3工具需要root手機。這兩種方法除錯資料庫都相對麻煩。facebook開源的stetho工具極大解決了這種問題,更方便的觀察資料庫並除錯。步驟一 首先先在build.gradle的...

chrome除錯如何禁用瀏覽器快取

遇到過很多很多次,修改了頁面 但是程式始終沒有按照設想的方向走,有時候折騰了幾個小時,發現問題最後卻是莫名其妙恢復的。後來進一步除錯發現,自己已經修改了如js 但是前端在載入頁面時仍然還是修改之前的 這種類似的問題在我這些日子消費了太多不必要的時間了,心塞又心痛!知道大概是快取的問題,於是我嘗試了所...

Chrome谷歌瀏覽器除錯技巧小結

ctrl shift d 預設可以將f12呼喚出來的devtools開發者除錯工具切換右邊與底部 但 如果你將它通過滑鼠 下圖 切換過位置 預設是 右邊和底部 你現在切換位置到左邊 那麼使用這個快捷鍵之後 就是 從左邊切到右邊 之前的位置 按下 ctrl 和 ctrl 可以從當前面板的分別向左和向右...