elements
chrome devtools 中 elements panel 是審查 dom 元素和 css 的, 可以實時修改 dom/css.
節點右鍵, 如下圖, 可以:
除了右鍵, 還可以:
ctrl + z 撤銷修改
在呼叫堆疊這裡可以切換到堆疊中的任何地方重新執行(右鍵restart frame), 如果想檢視斷點前的資訊時比較有用.
斷點後的變數儲存到全域性
devtools 可以檢視某乙個元素上繫結了哪些事件: elements > event listeners
dom mutation event 是 dom3 新增的新的事件, 一般是 dom 結構改變時觸發. devtools 可以對 domsubtreemodified domattrmodified 和 domnoderemoved 時斷點. 對上面 元素上事件斷點(mouseover) 後不容易找到業務**, 使用 mutation 斷點, 斷點後配合 call stack 就可以找到業務**了, 如下圖
devtools 還可以對事件發生時斷點, 比如 click 發生時斷點, 這個跟 元素上事件斷點 不同, 不會限定在元素上, 只要是事件發生, 並且有 handler 就斷點; 還可以對 resize, ajax, settimeout/setinterval 斷點.
下面這個圖是 resize 時中斷, 因為庫都**了, 還需要在斷點處一步一步跟下去才能走到業務**中.
即使當前頁面沒有載入jquery，你也依然可以使用$和$$函式來選取元素，實際上，這兩個函式只是對document.queryselector()和document.queryselectorall()的簡單封裝，$用於選取單個元素，$$則用於選取多個：
使用 $_ 來引用最近的乙個表示式
除了$_，你還可以使用$0,$1,$2,$3,$4這5個變數來引用最近選取過的5個dom元素。 $0 為elements html 面板中選中的元素。 $1 為上一次在 html 面板中選中的元素。 $2、$3、$4 同樣的。不過只能到$4
複製到剪下板，copy之後，直接ctrl+v
在js**中打點console.log() 類似debugger
chrome除錯工具
今天在除錯bug的時候有乙個需求，我需要知道我的 中有哪些地方在修改body的style，然後我想到了dom節點監聽。為body新增斷點然後開始除錯，但是現在的前端技術棧太複雜，即使打了斷點也會跳進第三方包裡。呼叫棧裡有太多無關的js 妨礙除錯。所以你可以選中檔案右擊後，選擇blackbox scr...
Chrome除錯工具簡單介紹
作為前端開發者都知道，快捷鍵f12可以開啟chrome除錯工具。firefox可以開啟firebug工具。工欲善其事，必先利其器 對除錯工具的掌握，能大大提高我們除錯 的效率。因為我平常chrome用的多，這裡就大概介紹下chrome除錯工具在windows下的使用，firefox的話就暫時不做介紹...
chrome除錯js工具的使用
這個對於優化前端頁面 加速網頁載入速度很有用哦 相當與yslow 點選run按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了 它甚至可以分析出頁面上樣式表中有哪些css是沒有被使用的哦 例如我想檢視console都有哪些方法和屬性，我可以直接在console中輸入 console 並執行 怎麼...