Rails編譯的JavaScript資產調試

Question

在生產環境中，我的javascript資產被捆綁在一起，當我遇到一個javascript錯誤時，我得到了它的行和列，例如：

d86c04c8f3.js:2:9588

現在，由於文件已縮小等，因此很難進行反向工程並在源代碼中找到有問題的行。 給定線路/列以找到原始線路，Rails資產捆綁器是否可以進行反向工程？ 這應該是可能的，因為資產建設者擁有所需的所有信息。

我們需要一個簡單的選項，再次運行bundle exec rake資源：precompile RAILS_ENV = production，但是這次指定line + col，然后rake將輸出與該資產line + col相對應的源文件+ line。 這樣，我們可以輕松調試在客戶端捕獲的異常（並將其發送到服務器以進行監視）。

EDIT1

所有關於在客戶端執行某些操作的解決方案都是不可行的，因為我們無法訪問客戶端-我們所說的是在生產模式，實時模式下發現的異常，並將這些異常發送到服務器進行監視目的。

Answer 1

為了調試縮小的腳本，有源映射，一旦加載到瀏覽器中，您就可以在其中看到未縮小的代碼。

Sprockets計划在4.0中支持Sourcemap，但仍未發布（僅Beta）。

Webpack確實支持源地圖和默認情況下切換到webpacker的rails 6，因此將腳本轉換為packs似乎是合乎邏輯的，盡管對於大型項目而言這是一項繁重的任務

更新：一旦有了構建的源地圖，就可以使用以下工具：

npx source-map-cli resolve d86c04c8f3.js.map 2 9588

這將以以下形式告訴您縮小文件映射中該位置的位置：

Maps to webpack:///app/javascript/components/CountrySelector.jsx:14:0

    fetch(`/control/autocomplete/countries`).then(r => r.json()).then(countries => this.setState({countries}))
    ^