chrome技巧記錄一些以前不太熟悉的_html/css_WEB-ITnose

如何查看dom的綁定事件(查看jquery的綁定事件)

新版本的network的類型選項哪去了?

在Sources里面找需要的資源,在js文件里面找某個函數

格式化js,(也可以幫你格式化自己本地的js)

斷點,給dom斷點,xhr斷點,異常斷點

遇到的一些問題

如何查看dom的綁定事件(查看jquery的綁定事件)

查看dom的綁定事件,這個是非常必須的一個技能.chrome支持也挺好

如下圖所示,選中dom，在Event Listeners里面的listenersBody

問題來了

listenersBody根本顯示不完全啊,怎么辦?

在listenersBody這一行,點鼠標右鍵,會出來彈框store as global variable

點擊store as global variable,在console里面就會顯示全整個函數了

問題又來了

現在寫js很多人都用jq,是看不到原始的綁定事件的

就我知道的而言,有2個辦法是可以看到綁定事件的

1.下載chorme插件Visual-Event

好吧 問題又來了,chrome web store在國內壓根就打不開

解決辦法FQ咯,或者

從這個地址下載crx, 自己手動安裝

裝完Visual-Event后,點一下向眼睛一樣的圖標,鼠標放在需要查看的dom上就會顯示出綁定的事件了

2.通過dom的屬性和$.cache方法來找

選擇要查看事件的dom

查看他的屬性(jquery+一段數字的屬性)如下圖

拿到屬性值,在console選項卡里面輸入$.cache[屬性值] 展開就可以看到綁定的事件了

新版本的network的類型選項哪去了?

新的chrome里面是直接看不到分類的(documents,images,script,xhr...)

有個小漏斗,點開就可以看見了

在Sources里面找需要的資源,在js文件里面找某個函數

有時候你需要查找某個js文件,可以這樣操作

1.打開Sources選項卡

2.按ctrl+p

3.輸入你要查找的js文件名

當然這個不僅僅是智能查找js,html和css也可以查找

有時候你需要查找js里面的某個函數

1.首先選中某個js文件(必須)

2.crtl+shift+o

如果不選中js文件 按crtl+shift+o就打開標簽管理器了

格式化js,(也可以幫你格式化自己本地的js)

格式化js咯,大括號咯.

網絡上的js都是被壓縮合并過的,用大括號可以格式化網絡上的js

當然用大括號也可以格式化本地的js，把本地的js粘貼到打開的js里面,按大括號即可

這個格式化的大括號只是在source選項卡里面才有

斷點,給dom斷點,xhr斷點,異常斷點

dom的斷點

dom斷點有3中形式

1.Subtree modifications (被監聽的dom的子節點發生變化)

2.Attributes modifications (被監聽的dom屬性發生變化)

3.Node removal (當被監聽的dom被刪除的時候)

設置了這些斷點后，當監聽到變化的時候,會斷點后發生變化的js的地方

比如刪除,會斷點到刪除的js地方

如何設置斷點了？

1.打開Element面板

2.選擇一個dom元素,鼠標右鍵

3.選擇break on... ，就會彈出3個斷點方式了

如下圖所示

xhr斷點

給某個xhr斷點后可以進入發起請求的js的地方

操作如下

1.打開source選項卡

2.有一個XHR Breakpoints 的

3.后面有一個+號,點+號進行添加

可以對所有的xhr進行斷點,如果只是想對某一個xhr進行斷點,就輸入他的地址,如圖所示

如果要刪除斷點，選中某一條,鼠標右鍵刪除即可

異常斷點

就是可以定位到js拋出異常的位置,方便查錯咯

操作如下

1.進入socurce選項卡

2.點圓形的按鈕,如下圖所示

遇到的一些問題

想下載插件,但是chrome web store 打不開怎么辦？

我用的是chrome暢游版,可以FQ

我用了chrome官方插件pagespeed insights來測試網站的性能,可總是卡在中間？

那是因為墻的原因,FQ測試

怎么調試線上的js文件？

1。用fiddler替換

2。如果是js文件,可以格式話斷點,如果不是加載的時候報錯,都可以直接把原始沒有壓縮的代碼直接拷貝進去運行

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com