Chrome 除錯功能更新

Name: Visual Studio Code
Author: Microsoft

2017 年 12 月 20 日，作者：Kenneth Auchenberg

最近幾個月，我們一直忙於改進 Visual Studio Code 的 Chrome 除錯體驗，今天我們很高興釋出三個新功能，我們認為這些功能將使 VS Code 中的客戶端 JavaScript 除錯變得更輕鬆、更可靠。

如果您不熟悉 Microsoft Debugger for Chrome 擴充套件，它允許您除錯在 Google Chrome 中執行的客戶端 JavaScript。這為 VS Code 現有的 JavaScript 除錯體驗增加了一個新的方面，開箱即用，您可以除錯 Node.js 中的伺服器端 JavaScript。同時安裝這兩個偵錯程式可以實現無縫的全棧 JavaScript 除錯。

同時使用 VS Code 和 Chrome DevTools！

我們與 Google Chrome 團隊合作的首要任務是實現同時使用 VS Code 和 Chrome DevTools！

這是使用者從一開始就提出的要求，但我們受到 Chrome 缺乏對多遠端除錯連線的支援的限制。這意味著當 VS Code 連線到 Chrome 時，Chrome DevTools 將被踢出，而當您開啟 Chrome DevTools 時，VS Code 將被踢出。

多重連線意味著您現在可以在使用 DOM 資源管理器、效能分析器或 Chrome DevTools 中的任何其他工具的同時，從 VS Code 除錯您的 JavaScript，而不會斷開連線！

chrome_code

Chrome 團隊於幾個月前開始致力於此項工作，我們一直與他們密切合作，以確保 VS Code 體驗最佳。多連線已在 Chrome 63 中正式釋出，並且在 VS Code 中開箱即用。要獲得多連線支援，請更新到最新的 Chrome 版本，即可開始使用。

Chrome DevTools 和 VS Code 之間的同步步進

我們認為能夠結合使用 VS Code 和 Chrome DevTools 是一種極其強大的體驗。它使您能夠為特定場景選擇合適的工具，而無需被迫做出用一個工具替換另一個工具的艱難選擇。VS Code 允許您在編輯器中除錯 JavaScript，但我們也認識到有些使用者更喜歡從 DevTools 除錯 JavaScript，因此我們沒有試圖替換 DevTools，而是將其視為一個整合的機會。

實現工具更好整合的第一步是 Chrome DevTools 和 VS Code 之間的同步步進，如下所示

sync_stepping

同步步進允許您同時在 VS Code 和 Chrome DevTools 中除錯 JavaScript 原始碼，併為您提供了在這兩個工具之間無縫切換的機會。在每個工具中，您都可以單步進入、繼續除錯您的 JavaScript，而不必擔心另一個偵錯程式失去同步。

現在還處於早期階段，我們很高興能夠探索與連線的編輯器和 DevTools 實現整合的新世界。

本地化除錯 UI

在此版本中，我們還啟用了偵錯程式核心部分的本地化，這意味著諸如 break on uncaught exceptions 和 launch.json 中的屬性描述等功能現在已針對我們支援的語言（例如中文）進行了本地化和提供。

locale1

在應用執行之前設定斷點

我們一直在與 Visual Studio 的朋友們合作的另一個功能是能夠在 JavaScript 在 Chrome 中執行之前設定斷點。這聽起來非常簡單，但當您深入瞭解 JavaScript 如何非同步載入和執行的細節時，它會變得非常複雜。

許多使用者都遇到過啟動 Chrome 時斷點未命中的情況。更讓他們困惑的是，在簡單的頁面重新整理後，斷點卻命中了。為什麼會這樣？這有點複雜，但歸結為 VS Code 和 Chrome 之間的時間問題，在時間軸上最能說明問題

正如您在黃色時間軸上看到的那樣，問題在於某些 JavaScript 在 VS Code 設定斷點之前就已經執行了。

這意味著如果您在作為頁面載入一部分而會立即執行的原始碼中設定了斷點，VS Code 在執行完成之前無法設定斷點。解決方法是進行頁面重新整理，這將重新執行程式碼，從而觸發斷點。

好訊息！我們已經找到了一種可靠地在早期執行的原始碼中設定斷點的方法，我們稱之為break-on-load breakpoints。

載入時斷點由 Chrome 中的 DOM 檢測斷點提供支援，它允許我們在每次載入新指令碼時暫停指令碼執行。這改變了偵錯程式的工作流程，使我們有更多時間在 JavaScript 執行之前設定斷點。

啟用載入時斷點

我們正在將載入時斷點作為 Chrome 偵錯程式的一項實驗性功能釋出，您可以透過在 launch.json 配置中將新的 breakOnLoad 屬性設定為 true 來啟用該功能

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "https://:3000",
  "webRoot": "${workspaceRoot}/src",
  "breakOnLoad": true
}

啟用載入時斷點將影響您的初始頁面載入效能，因為每當載入新指令碼時，偵錯程式都會短暫暫停 Chrome。因此，目前這是一項可選功能。如果您遇到斷點丟失的問題，請嘗試啟用載入時斷點，並告訴我們它們對您的效果如何。

目前就這些了。這是我們 Chrome 偵錯程式的一次重大更新，我們迫不及待地想聽聽您對這些新功能的反饋。在一個編輯器與 DevTools 更緊密整合的世界中，請告訴我們您對工具的期望或需求。

編碼愉快！

Kenneth (@auchenberg)