使用Chrome開發工具在JavaScript中查找無限（或非常大）的循環

Question

我正在使用第三方統計庫，似乎有很多問題。 它既大又壓縮，因此調試起來並不是特別容易。 我正在使用Chrome開發工具，我想知道可能有什么選項可以通過名字的呼叫次數對功能進行排名？ 我認為答案是Profiler選項卡，但我捕獲的配置文件只記錄了長鏈中引用“第1行”的JS文件。

這個東西凍結我的應用程序，我寧願盡可能避免更改他們的代碼，即使它是為了調試。 我很樂意澄清任何不清楚的事情。

編輯：我似乎記得最近一個chrome dev工具的演示，顯示了一個時間線，描繪了根據水平時間增量垂直堆疊的功能塊，稱為“火焰圖”或類似的東西......這將是理想的，但我可以'記住我現在生活中的鏈接。 如果有人知道這個工具是什么，不反對在這個上使用Canary嗎？

Answer 1

關於DevTools的最新視頻在這里http://youtu.be/x6qe_kVaBpg?t=19m44s

它涵蓋了有關DevTools的不同主題，並且還包含有關CPU配置文件的部分。

因此，您需要記錄一個cpu配置文件並查看它。

您也可以在其上使用FlameChart視圖。

您可以單擊BottomUp或TopDown中的項目，甚至可以單擊FlameChart欄，然后在“源”面板中查看功能正文。

如果您縮小了源，如屏幕截圖所示，則可以按“源”面板狀態欄中的按鈕。 它看起來像兩個花括號{}。 然后DevTools將格式化源。

並且該操作將影響所有其他位置（如Timeline，CPUProfile等）中源文件的所有鏈接。例如，在第一個快照中，您看到了一個函數O.Pk，該函數位於腳本縮小版本的第778行。 在相當打印源文件后，該功能的鏈接自動更改。 現在它指向15871線。

Answer 2

看起來答案是“時間軸”選項卡。 似乎在普通鍍鉻工作。 我將標簽設置為在觸發導致掛起的操作之前記錄，一旦掛起停止（大約需要20秒），我停止錄制並使用左右選擇器放大主時間軸（在頂部）我看到更長的執行期（在頂部）選擇了“事件”。

從那里我只是擴大了下拉菜單，我得到了我想要的東西。 （我模糊了js文件名，以避免單獨刪除庫）但我包括一個截圖。