文章加密

;

2019年12月8日 星期日

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 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

補充:ControlShiftP或 CommandShiftP(Mac)打開命令菜單

Filesystem
In Source pane -> Filesystem tab,當在localhost開發的project添加到browser的workspace後,在browser上所做的修改也會跟著修改至本地端的文件中

這個抓了重點幾個說明:https://www.jishuwen.com/d/2M8c/zh-tw 

沒有留言:

張貼留言