引言

在我們的日常開發中我們常常會遇到JavaScript的調試問題，而我們解決問題的傳統解決方案就是使用大量的console.log或者console對象的其他方法，這會給我們帶來很多不便，特別是遇到復雜問題的時候，可能會出現大量的console.log，當排查出問題之后我們又不得不在回頭清除掉這些調試信息，這樣大大降低了我們的工作效率。所以，我們有必要尋找更好的方案來解決JavaScript的調試問題，無疑，Chrome的調試工具Chrome DevTools給我們帶來了調試的遍歷，下面我們一步步來學習一遍在DevTools中調試的基本工作流程！

第一步：明確我們需要調試的位置

我們通過一節簡單的案例來模擬一下，本案例來源于官網的調試Demo，其中index.html代碼如下

然后是index.js

代碼的本意是要做一個簡單的加法，但是我們運行看下結果：

顯然執行結果是錯誤的，結果應該是33，我們假設這就是我們在開發中遇到的問題

第二步：打開Chrome的調試面板

• Command+Option+I (Mac) 或 Control+Shift+I(Windows、Linux)或者F12

• 點擊Source標簽，Source有三塊面板

從左依次是

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，只是我覺得這種方式最直接，同時也最簡單，雖然是小技巧，但是也得知道不是，希望對大家能夠有所幫助！

總結

以上是生活随笔為你收集整理的asp js单步调试_如何使用Chrome的控制台高效的调试Javascript代码?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。