為什么在 Svelte 斷點處暫停時無法檢查 javascript 變量

Question

這是 Svelte 特有的。

在 Chrome 或 Edge DevTools 中，當在腳本標記之間的某行 javascript 的斷點處暫停時，我們可以檢查監視列表中的變量值。 但是，當我在 Svelte 處理 DOM 生成的主體區域放置斷點時，我的組件的所有變量都不可檢查。 他們都說“不可用”。 這使得調試我們的#if/#each 等類型塊的問題變得非常困難。 見下圖。 為什么會發生這種情況，在 Svelte 的 #each 命令處理這些變量值時，我該怎么做才能看到這些變量值？

Answer 1

編譯后的 Svelte 文件 output 與源文件有很大不同。 在源中設置斷點依賴於嘗試將 map 和 output 返回到源位置的源映射，但不能保證任何變量存在或命名相同。

例如，您經常會在 output 中看到ctx[0] 、 ctx[1]等，因為它存儲了組件 state。就我個人而言，出於這個原因，我禁用了源映射並直接使用 output。這有點不方便，但你看看代碼是什么。

您可以在設置中關閉源地圖。

或者打開命令選項板（類似於 Ctrl + Shift + P）並鍵入source maps以找到一個命令來切換它。

源文件還應該有一個按鈕，可以讓你跳轉到編譯后的 output，如果你只是想暫時看看它有什么。 我認為它位於底部狀態欄中的某個位置。

您還可以在與Watch相同的側邊欄中查看Scope部分。 它還顯示當前在 scope 中的所有變量。您可能必須擴展各種父范圍。 例如，您可以在屏幕截圖中看到一個create_each_block function。