2017年6月13日 星期二

[學習筆記] Chrome Dev Tools 開發者工具實用功能整理

重點速記

基本 console 使用

/**
 * 幫助視覺化呈現
**/
console.warn('<output>')
console.error('<output>')
console.info('<output>')
console.assert([Condition Expression], '<output>')
console.clear()

console.dir([DOMElement])
console.table([object/array])


/**
 * 將輸出資料分群顯示
**/
console.group('<groupName>')             // 開始分群,預設展開
console.groupCollapsed('<groupName>')    // 開始分群,預設不展開
console.groupEnd()                       // 結束分群

/**
 * 使用 '%c' 幫輸出的內容添加樣式
**/
console.log('%c What a Cool Console', 'font-size: 32px; color: red')

console 特殊功能

// 計數
console.count([String])

// 計時
console.time([String])            // 開始計時
console.timeEnd([String])         // 結束計時

監聽事件

monitorEvents(element [,event])     //    監聽某一元素
unmonitorEvents(element [,event])   //    取消監聽某一元素 
getEventListeners(element)          //    查看某一元素綁定了哪些事件

選擇 DOM 元素

$0                 // 表示當前所選元素
$(selector)        // 等同於 document.querySelector()
$$(selector)       // 等同於 document.querySelectorAll()

Console 的使用

常用的 console 指令

有一些可以幫助我們 debug 方便檢是的 console 指令像是console.warn(), console.error(), console.assert(condition, '<output'>)

檢視 HTML 元素

使用 console.dir(<HTMLElement>) 可以幫助我們檢視這個 DOM 元素中的所有屬性:

將輸出的資料群組起來

假設我們有一組色票檔:
let colorData = [
    {
        name: 'facebook',
        colorCode: '#4267b2'
    },
    {
        name: 'green',
        colorCode: '#41CEC0' 
    },
    {
        name: 'vue',
        colorCode: '#41b883' 
    }
]
我們可以使用 console.group() 搭配 console.groupEnd() 來將輸出的資料分群,像是這樣:
colorData.forEach(color => {
  console.group(color.name)
  console.log('name', color.name)
  console.log('hexi', color.colorCode)
  console.groupEnd()
})
輸出的結果會像這樣:
如果我們希望預設群組的結果是關閉的,則可以使用 console.groupCollapsed(),需要的時候在打開來看:
colorData.forEach(color => {
  console.groupCollapsed(color.name)
  console.log('name', color.name)
  console.log('hexi', color.colorCode)
  console.groupEnd()
})
輸出的結果會像這樣:

檢視 AJAX Request

在 console 視窗中點右鍵,勾選 “Log XMLHTTPRequest” 就可以看到該網站所發出的 AJAX request:

讓瀏覽器可以直接編輯網頁

在 console 中輸入
document.designMode = 'on'                               
點選網頁文字會直接出現游標,可以直接編輯:

改變 console.log 的樣式

我們可以在 console.log() 的函式中使用 %c,後面再放入 CSS 樣式,就可以改變 console.log 輸出的文字樣式:
console.log('%c What a Cool Console', 'font-size: 32px; color: red')

Debugger 的使用

Debug 流程

  1. 發現(重現)問題
  2. 使用 Sources -> Event Listener Breakpoints 選擇要中斷的事件
  3. 審視原始碼,找出可能有問題的函式
  4. 在該函式可能有問題的程式碼行數的地方點一下,設定斷點(breakpoint),當程式碼執行到該處時,會出現相關訊息。
  5. 利用 watch 輸出某變項或 expression (類似 console.log),利用 console 視窗確認問題
  6. 找出問題後,直接在 source 的區塊內修改程式碼,修改好後按 cmd + S 儲存。
  7. 取消斷點,再次執行,看是否修正錯誤。

設定斷點(BreakPoints)

如果想要看該元素到底是觸發了什麼 JavaScript 事件,可以在該元素上面設定斷點。這裡因為點選該文字後會導致該元素的 CSS 屬性改變,因此我們選擇監聽 attribute modifications
如此當你點選該文字觸發 JS 事件時,Debugger 就會停在這裡:

使用 Debugger

Step over Line of Code (step over)

類似逐步執行的概念。在 A 停下來,按「Step Over Next Function Call」,則會執行B、C,最後停在 D:
function updateHeader() {
  var day = new Date().getDay();
  var name = getName();     // A
  updateName(name);         // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;              // C
}

Step into Next Function Call (step into)

進入該函式,在 A 停下來,按「Step Into Next Function Call」之後,會停在 B。
function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

Step out of Current Function (step out)

跳出該函式。停在 A ,按下 step out,會執行 getName ( ) 中剩下的 code(B),然後停在 C:
function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

監控事件處理(monitor event)

除了前面提到的可以在 attribute modifications 設定斷點來偵測觸發的事件外,我們也可以使用 Chrome 內建監聽事件的功能:

開啟事件監聽

我們可以在 console 中輸入 monitorEvents(element, [event]),後面的 event 是 optional 的,如果沒有填的話,它會監測該 element 被觸發的所有事件,一旦事件被觸發就會出現在 console 中:

關閉事件監聽

監聽完事件後,我們可以使用 unmonitorEvents(element, [event]) 來關閉事件監聽,後面的 event 一樣是 optional 的,沒有填的話,會關閉監聽該 element 的所有事件。

查看元素被綁定的事件

另外,我們也可以使用 getEventListeners(element),來看看某一個 DOM 元素被綁定了哪些事件:

其他功能

清除記錄

在 console 中,一般我們可以直接使用 console.clear() 來清除畫面,但是在 chrome 裡面會自動幫你記憶一些你打過的字,有時候自動填補的字並不是自己想要的,這時候我們可以在 console 視窗上點右鍵,選擇clear console history 就可以清除在 console 中曾經輸入過的歷史紀錄:

選擇 HTML 元素

在 chrome 中我們可以像使用 jQuery 一樣,使用 $ 當做選擇器,$ 表示的是 document.querySelector([selector]);如果要選擇多個 DOM 元素,要使用 $$,表示的是 document.querySelectorAll([selector])
另外,你也可以在 element 視窗中點選一個 DOMElement,接著在 console 中輸入 $0,一樣可以選到該元素,$0 表示的是當前 chrome 所選取到的元素:
輸入 $0 可以選到當前在 element 選擇的 DOM 元素:

查看物件

在 console 中我們可以使用 keys(obj)values(obj) 來取的物件的鍵和值:

其他尚未詳細整理的功能

/**
 * Handling Error and Exceptions
**/

console.trace()                                    //    印出目前的 JavaScript call stacks

window.onerror = function(message, url, line){     //    當有錯誤沒有被 try catch 補捉,就會促發 window.onerror
    console.log(`window.onerror is invoked with 
    message = ${message}, url = ${url}, at line = ${line}`)
}

/**
 * Debug
 **/
debug(function)                                   //    將某函式進入 debug 模式
undebug(function)                                 //    將某函式退出 debug 模式
monitor(fn)                                       //    監聽某一函式,會回傳函式名稱和使用的參數

/**
 * Output
 **/
dir(obj)                                          //    條列出物件,等同於 console.dir()
table(data [,columns])                            //    以資料表的方式調列出物件
inspect(obj/fn)                                   //    查看某元素或函式

參考資料

Share:

0 意見:

張貼留言