從我的文章複製過來的，可以簡單看下(截圖複製不過來，抱歉)
引言
在我們的日常開發中我們常常會遇到JavaScript的除錯問題，而我們解決問題的傳統解決方案就是使用大量的console.log或者console物件的其他方法，這會給我們帶來很多不便，特別是遇到複雜問題的時候，可能會出現大量的console.log，當排查出問題之後我們又不得不在回頭清除掉這些除錯資訊，這樣大大降低了我們的工作效率。所以，我們有必要尋找更好的方案來解決JavaScript的除錯問題，無疑，Chrome的除錯工具Chrome DevTools給我們帶來了除錯的遍歷，下面我們一步步來學習一遍在DevTools中除錯的基本工作流程！
第一步：明確我們需要除錯的位置
然後是index.js
程式碼的本意是要做一個簡單的加法，但是我們執行看下結果：
顯然執行結果是錯誤的，結果應該是33，我們假設這就是我們在開發中遇到的問題
第二步：開啟Chrome的除錯面板
Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux）或者F12
從左依次是
File Navigator 窗格。 此處列出頁面請求的每個檔案。
Code Editor 窗格。 在 File Navigator 窗格中選擇檔案後，此處會顯示該檔案的內容。
JavaScript Debugging 窗格。 檢查頁面 JavaScript 的各種工具。 如果 DevTools 窗口布局較寬，此窗格會顯示在 Code Editor 窗格右側。
使用斷點暫停程式碼
通常我們會在這寫console.log,打完斷點我們在填入兩個數字提交
我們的程式碼在斷點處暫停了，很直觀的能看到我們需要看的變數值，簡單來說就是斷點可以快速方便的檢視你想看的值，有時候我想單步除錯程式碼，直接F10就行了，想進入到函式中按F11，我們除錯到這和我們猜想的一樣，由於是字串那麼+號就意味著連線，也就造成了錯誤的結果。
使用控制檯直接求值
我認為這是最值得贊一波的功能，因為我們可以直接在控制檯輸入變數或者表示式或者執行一個函式,我們開啟console標籤，輸入以下內容，前提是我們在之前那個地方打了斷點
我們可以執行我們需要執行的函式和表示式，然後也正確的看到了結果，知道的人可能覺得沒什麼，但是不知道的人可能覺得這個功能非常Nice，或者你可以直接修改程式碼儲存後在執行，同樣知道了結果，而不必再到編輯器修改，除錯正確後直接複製過去即可
總結
本文就是想透過簡單的案例介紹來改變下我們傳統的js除錯方式，目的就是為了提升工作效率，當然也有很多其它方式除錯javascript，比如WebStorm，VSCode安裝Debug for Chrome，只是我覺得這種方式最直接，同時也最簡單，雖然是小技巧，但是也得知道不是，希望對大家能夠有所幫助！
從我的文章複製過來的，可以簡單看下(截圖複製不過來，抱歉)
引言
在我們的日常開發中我們常常會遇到JavaScript的除錯問題，而我們解決問題的傳統解決方案就是使用大量的console.log或者console物件的其他方法，這會給我們帶來很多不便，特別是遇到複雜問題的時候，可能會出現大量的console.log，當排查出問題之後我們又不得不在回頭清除掉這些除錯資訊，這樣大大降低了我們的工作效率。所以，我們有必要尋找更好的方案來解決JavaScript的除錯問題，無疑，Chrome的除錯工具Chrome DevTools給我們帶來了除錯的遍歷，下面我們一步步來學習一遍在DevTools中除錯的基本工作流程！
第一步：明確我們需要除錯的位置
然後是index.js
程式碼的本意是要做一個簡單的加法，但是我們執行看下結果：
顯然執行結果是錯誤的，結果應該是33，我們假設這就是我們在開發中遇到的問題
第二步：開啟Chrome的除錯面板
Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux）或者F12
從左依次是
File Navigator 窗格。 此處列出頁面請求的每個檔案。
Code Editor 窗格。 在 File Navigator 窗格中選擇檔案後，此處會顯示該檔案的內容。
JavaScript Debugging 窗格。 檢查頁面 JavaScript 的各種工具。 如果 DevTools 窗口布局較寬，此窗格會顯示在 Code Editor 窗格右側。
使用斷點暫停程式碼
通常我們會在這寫console.log,打完斷點我們在填入兩個數字提交
我們的程式碼在斷點處暫停了，很直觀的能看到我們需要看的變數值，簡單來說就是斷點可以快速方便的檢視你想看的值，有時候我想單步除錯程式碼，直接F10就行了，想進入到函式中按F11，我們除錯到這和我們猜想的一樣，由於是字串那麼+號就意味著連線，也就造成了錯誤的結果。
使用控制檯直接求值
我認為這是最值得贊一波的功能，因為我們可以直接在控制檯輸入變數或者表示式或者執行一個函式,我們開啟console標籤，輸入以下內容，前提是我們在之前那個地方打了斷點
我們可以執行我們需要執行的函式和表示式，然後也正確的看到了結果，知道的人可能覺得沒什麼，但是不知道的人可能覺得這個功能非常Nice，或者你可以直接修改程式碼儲存後在執行，同樣知道了結果，而不必再到編輯器修改，除錯正確後直接複製過去即可
總結
本文就是想透過簡單的案例介紹來改變下我們傳統的js除錯方式，目的就是為了提升工作效率，當然也有很多其它方式除錯javascript，比如WebStorm，VSCode安裝Debug for Chrome，只是我覺得這種方式最直接，同時也最簡單，雖然是小技巧，但是也得知道不是，希望對大家能夠有所幫助！