debugger, google devtool

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/debugger

設定中斷點，只要在函式中任一行添加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
有很多種類型的斷點：

1. Line-of-code（用在明確知道問題發生在哪一行）
   他又分為兩種，用browser's DevTools UI (Source pane)&在code裡寫debugger;
2. Conditional line-of-code(同上，但必須當條件為真時)
   似乎只有browser's DevTools UI有
3. 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.
4. 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 calls send().
   In Source pane, Expand the XHR Breakpoints pane, Add breakpoint.
5. Event listener
   In Source pane,  Expand the Event Listeners Breakpoints pane, choose event, like "mouse/click"
6. 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 (未看)
7. 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 運用介紹

1. element pane
   Computed
2. 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.
3. console pane
   console setting ->Preserve log
4. source pane
   Pretty print { }
5. network pane
   filter XHR 會得json類
6. application pane
   delete storage

In console pane:

1. $0  +enter，印出當前選擇的dom
   $1   +enter，印出前一個選擇的dom
   $2  +enter，印出前兩個選擇的dom  // 以此類推
   
   $_   // 為前一個output的變數（只在output為數字時有用，字串時會是undefined）
2. console.table(array)  // 會用table整理array印出
3. console.time('test')
   for loop
   console.timeEnd('test')
   // output會是兩個time執行間的時間差
4. 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