如何更優雅地調試Javascript？

抄襲我的文章，大家可以簡單看一下(截圖可以不可復制，抱歉)

介紹

在我們的日常開發中，經常會遇到Javascript的調試問題，而我們傳統的解決問題的方法是使用大量的console.log或者其他方法的console對象，這樣會給我們帶來很多不便，尤其是遇到復雜的問題，可能會導致大量的console.log，而我們在排除故障后還要回去刪除這些調試信息，這就大大降低了我們的工作效率。因此，我們有必要尋找一種更好的解決方案來解決Javascript的調試問題。毫無疑問，Chrome的調試工具ChromeDevTools給我們帶來了調試遍歷。讓讓我們一步步學習DevTools中調試的基本工作流程！

步驟1:確定我們需要調試的地方。

讓讓我們通過一個簡單的案例來模擬一下。本案例來自官方網站的調試演示，代碼如下。

然后是index.js

代碼的初衷是做簡單的加法，但是讓讓我們運行并看看結果:

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

第二步:打開Chrome的調試面板。

命令選項I(Mac)或控制ShiftI(Windows、Linux)或F12。

單擊源選項卡。源有三個面板。

從左邊看，是的

文件導航器窗格。此處列出了頁面請求的每個文件。

代碼編輯器窗格。在文件導航器窗格中選擇一個文件后，該文件的內容將顯示在這里。

Javascript調試窗格。用于檢查頁面Javascript的各種工具。如果DevTools窗口布局較寬，此窗格將顯示在代碼編輯器窗格的右側。

使用斷點暫停代碼。

通常我們會在這里寫console.log。中斷斷點后，我們將填寫兩個數字提交。

我們的代碼在斷點處暫停，所以我們可以直觀地看到我們需要看到的變量值。簡單來說，斷點可以快速方便的看到你想看到的值。有時候我想單步調試代碼，只是F10，當我想進入功能時按F11。我們像猜測的那樣調試了這個，因為是字符串，所以數字表示連接，導致結果錯誤。

使用控制臺直接評估

我認為這是最值得稱贊的功能，因為我們可以直接在控制臺中輸入變量或表達式或者執行一個函數。我們打開控制臺選項卡并輸入以下內容，前提是是我們在之前的地方破了點。

我們可以執行需要執行的函數和表達式，然后就可以正確的看到結果了。知道它的人可能會認為它沒什么，但是不喜歡的人。;tknow它可能覺得這個函數很好看，也可以直接修改代碼保存后再執行，也不用去編輯器修改就知道結果了。調試正確后直接復制就行了。

摘要

本文只是想通過一個簡單的案例介紹來改變我們傳統的js調試方法，目的是提高工作效率。當然還有很多其他調試javascript的方法，比如在WebStorm和VSCode中安裝DebugforChrom

vscode支持哪些編程語言？

Vscode支持以下37種語言或文件:

F#、HandleBars、Markdown、Python、Jade、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、Makefile、HTML、JSON、Typescript、Batch、VisualBasic、Swift、Less、SQL、XML、Lua、Go、C、Ini、Razor、Clojure、C#、Objective-C、CSS、Javascript、Perl、Coffeescript、Java、Dockerfile。