設定中斷點,只要在函式中任一行添加debugger,程式就會在那邊中斷
https://blog.miniasp.com/post/2011/03/17/Using-JavaScript-debugger-statement-enter-breakpoints
chrome debugger tool
https://developers.google.com/web/tools/chrome-devtools/javascript?hl=zh-TW
有很多種類型的斷點:
- Line-of-code(用在明確知道問題發生在哪一行)
他又分為兩種,用browser's DevTools UI (Source pane)&在code裡寫debugger; - Conditional line-of-code(同上,但必須當條件為真時)
似乎只有browser's DevTools UI有 - DOM
In Element pane, 右鍵break on有三個選擇:
a. Subtree modifications: Triggered when a child of the currently-selected node is removed or added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.
b. Attributes modifications: Triggered when an attribute is added or removed on the currently-selected node, or when an attribute value changes.
c. Node Removal: Triggered when the currently-selected node is removed. - XHR
Use an XHR breakpoint when you want to break when the request URL of an XHR contains a specified string. DevTools pauses on the line of code where the XHR callssend()
.
In Source pane, Expand the XHR Breakpoints pane, Add breakpoint. - Event listener
In Source pane, Expand the Event Listeners Breakpoints pane, choose event, like "mouse/click" - Exception
In Source pane, click Pause on exceptions , it will pause at exceptions, like "throw something".
know more about exception: https://pjchender.blogspot.com/2017/12/js-error-handling.html (未看) - Function
function sum(a, b) { let result = a + b; // DevTools pauses on this line. return result; } debug(sum); // Pass the function object, not a string. sum();
補:當在paused in debugger,可以"右鍵/countinue to here",避開原本要step by step的順著code workflow執行,直接執行到那一行
https://www.youtube.com/watch?v=4qUx6lZ1kco // Devtool 運用介紹
In console pane:
- element pane
Computed - console drawer
a. Rendering -> Paint flashing
b. Animations
c. Coverage
# The red section of the bar is unused bytes. The green section is used bytes. - console pane
console setting ->Preserve log - source pane
Pretty print { } - network pane
filter XHR 會得json類 - application pane
delete storage
In console pane:
- $0 +enter,印出當前選擇的dom
$1 +enter,印出前一個選擇的dom
$2 +enter,印出前兩個選擇的dom // 以此類推
$_ // 為前一個output的變數(只在output為數字時有用,字串時會是undefined) - console.table(array) // 會用table整理array印出
- console.time('test')
for loop
console.timeEnd('test')
// output會是兩個time執行間的時間差 - jquery selector的功能:
$('p') //列出所有p element
$('p')[0] //列出第一個p element
document.querySelector('p') //列出第一個p element
設定blackbox script(也被稱為Framework Blackboxing) 擋掉設定的檔案,避免中斷在該檔案裡
Debugger will skip through the scripts and will not stop on exceptions thrown by them.
位置:browser devtool -> settings -> blackboxing
https://nima2320.wordpress.com/2017/09/29/chrome-dev-tool%E7%84%A1%E6%B3%95%E9%80%B2%E5%85%A5%E4%B8%AD%E6%96%B7%E9%BB%9E%E5%8E%9F%E5%9B%A0-blackbox-script%E6%90%9E%E9%AC%BC/
Snippet
In Source pane, 打開 snippet tab,在編輯窗輸入要“重複運行的code”,右鍵snippet名->run或右下角run
例如:用來添加第三方套件以方便debug
補充:按Control+ Shift+ P或 Command+ Shift+ P(Mac)打開命令菜單
Filesystem
In Source pane -> Filesystem tab,當在localhost開發的project添加到browser的workspace後,在browser上所做的修改也會跟著修改至本地端的文件中!
這個抓了重點幾個說明:https://www.jishuwen.com/d/2M8c/zh-tw
Debugger will skip through the scripts and will not stop on exceptions thrown by them.
位置:browser devtool -> settings -> blackboxing
https://nima2320.wordpress.com/2017/09/29/chrome-dev-tool%E7%84%A1%E6%B3%95%E9%80%B2%E5%85%A5%E4%B8%AD%E6%96%B7%E9%BB%9E%E5%8E%9F%E5%9B%A0-blackbox-script%E6%90%9E%E9%AC%BC/
Snippet
In Source pane, 打開 snippet tab,在編輯窗輸入要“重複運行的code”,右鍵snippet名->run或右下角run
例如:用來添加第三方套件以方便debug
補充:按Control+ Shift+ P或 Command+ Shift+ P(Mac)打開命令菜單
Filesystem
In Source pane -> Filesystem tab,當在localhost開發的project添加到browser的workspace後,在browser上所做的修改也會跟著修改至本地端的文件中!
這個抓了重點幾個說明:https://www.jishuwen.com/d/2M8c/zh-tw
沒有留言:
張貼留言