收集一波常見的加速NPM包的CDN，發現有些還是挺好用的，基本上可以替代unpkg、jsdelivr，用來做博客或者網站載入NPM使用還是可以的。 經典老牌的CDN加速 unpkg.com cdn.jsdelivr.net fastly.jsdelivr.net 使用方法：直接進官網，搜NPM包名使 ...
很多同學不知道為什麼要用 debugger 來調試，console.log 不行麽？
還有，會用 debugger 了，還是有很多代碼看不懂，如何調試複雜源碼呢？
這篇文章就來講一下為什麼要用這些調試工具：
console.log vs Debugger
相信絕大多數同學使用 console.log 調試的，把想看的變數值列印在控制台。
這樣能滿足需求，但是遇到對象的列印就不行了。
比如我想看 webpack 源碼里的 compilation 對象的值，我列印了一下：
但你會發現對象的值也是對象的時候不會展開，而是列印一個 [Object] [Array] 這種字元串。
更致命的是列印的太長會超過緩衝區的大小，terminal 里會顯示不全：
而你用 debugger 來跑，在這裡打個斷點來看就沒這些問題了：
有的同學可能會說，那列印一個簡單的值的時候用 console.log 還是很方便呀。
比如這樣：
真的麽？
那還不如用 logpoint：
代碼執行到這裡就會列印：
而且沒有污染代碼，用 console.log 的話調試完之後這個 console 不也得刪掉麽？
但是 logpoint 不用，它就是個斷點的設置，不在代碼里。
當然，最重要的是 Debugger 調試是可以看到調用棧和作用域的！
首先是調用棧，它就是代碼的執行路線。
比如這個 App 的函數組件，你可以看到渲染這個函數組件會經歷 workLoop、beginWork、renderWithHooks 這些流程：
你可以點開調用棧的每一幀看下都執行了啥邏輯，用到啥數據。比如可以看到這個函數組件的 fiber 節點：
再就是作用域，點擊每一個棧幀就可以看到每個函數的作用域中的變數：
可以看到調用棧來理清出錯前都走了哪些代碼，可以通過作用域來看到每一個變數的值。
有了這些東西，排查錯誤不就很輕鬆了麽！
而你用 console.log 呢？
啥也沒，只能自己猜。
由於本篇文章都是gif動圖，今天上傳太累了，要看全文，請點擊以下鏈接：https://cybozudev.kf5.com/hc/community/question/34258651/
