IntelliJ IDEA集成：Spy-js

Spy-js

在開始之前，請(qǐng)確保您的計(jì)算機(jī)上有Node.js。

IntelliJ IDEA與Spy-js集成，后者是JavaScript開發(fā)人員的工具，可讓您調(diào)試/跟蹤/分析在不同平臺(tái)/瀏覽器/設(shè)備以及服務(wù)器端Node.js應(yīng)用程序上運(yùn)行的JavaScript。您還可以使用ECMASript6，CoffeeScript和TypeScript代碼跟蹤應(yīng)用程序。Spy-js識(shí)別源映射，用于設(shè)置原始代碼與編譯期間生成的JavaScript代碼之間的對(duì)應(yīng)關(guān)系。

為了跟蹤腳本，Spy-js通過插入檢測指令來動(dòng)態(tài)修改它，該指令向Spy-js UI報(bào)告腳本執(zhí)行時(shí)調(diào)用的函數(shù)。

Spy-js使用不同的機(jī)制來跟蹤Web應(yīng)用程序和Node.js應(yīng)用程序。

• 要修改網(wǎng)站腳本，Spy-js必須充當(dāng)代理服務(wù)器，它位于您的瀏覽器和您正在跟蹤的網(wǎng)站之間。當(dāng)您在瀏覽器中打開跟蹤的網(wǎng)站時(shí)，Spy-js會(huì)收到腳本請(qǐng)求，從您的網(wǎng)站請(qǐng)求腳本，接收腳本，進(jìn)行必要的修改，然后將其發(fā)送回腳本執(zhí)行的瀏覽器，并發(fā)送運(yùn)行時(shí)信息到Spy-js用戶界面。
• 對(duì)于Node.js應(yīng)用程序，如果應(yīng)用程序已在運(yùn)行，則Spy-js無法在Node.js服務(wù)器和腳本之間進(jìn)行訪問。因此，為了跟蹤Node.js應(yīng)用程序，spy-js啟動(dòng)Node.js服務(wù)器和應(yīng)用程序本身。這使得Spy-js能夠攔截和修改腳本請(qǐng)求和腳本，因此跟蹤過程就像跟蹤網(wǎng)站腳本時(shí)那樣運(yùn)行。

Spy-js UI

所有與跟蹤相關(guān)的活動(dòng)，例如查看捕獲的事件，檢查其調(diào)用堆棧，導(dǎo)航到源代碼等，都在專用的Spy-js工具窗口中執(zhí)行，特別是在其Trace Run選項(xiàng)卡中。該選項(xiàng)卡由一個(gè)工具欄和三個(gè)窗格組成：

• 事件窗格：該窗格顯示捕獲事件的樹。頂級(jí)節(jié)點(diǎn)表示作為跟蹤涉及的Web頁面的文檔。將鼠標(biāo)懸停在文檔上時(shí)，IntelliJ IDEA會(huì)顯示一個(gè)工具提示，其中包含文檔的URL地址，打開文檔的瀏覽器以及運(yùn)行瀏覽器的操作系統(tǒng)。文檔節(jié)點(diǎn)還隨附一個(gè)圖標(biāo)，指示打開它的瀏覽器。
  在每個(gè)文檔節(jié)點(diǎn)下，列出在頁面上檢測到的事件和從其開始的腳本。相同類型的事件被分組到可視容器中。容器的標(biāo)題顯示分組在其中的事件的名稱，容器內(nèi)所有事件的平均執(zhí)行時(shí)間以及容器內(nèi)的事件數(shù)。您可以展開每個(gè)節(jié)點(diǎn)并檢查其中的各個(gè)事件。
  腳本文件名具有不同的顏色指示符，以幫助在使用“事件堆?！贝案駮r(shí)區(qū)分它們。通過將鼠標(biāo)懸停在腳本文件名上，您可以看到完整的腳本URL。
  單擊事件后，其調(diào)用堆棧將顯示在“事件堆?！贝案裰小６褩Ｓ珊瘮?shù)調(diào)用樹表示。
  
• 事件堆棧窗格：單擊“事件”窗格中的事件后，其“調(diào)用堆?！睂@示在“事件堆?！贝案裰?。堆棧由函數(shù)調(diào)用樹表示。每個(gè)樹節(jié)點(diǎn)表示調(diào)用的函數(shù)。節(jié)點(diǎn)文本包含總執(zhí)行時(shí)間，腳本文件名和函數(shù)名稱。單擊某個(gè)節(jié)點(diǎn)時(shí)，“快速評(píng)估”窗格將顯示其他函數(shù)調(diào)用詳細(xì)信息，參數(shù)值和返回值，如果在函數(shù)執(zhí)行期間存在異常詳細(xì)信息，則會(huì)顯示。
  窗格與編輯器同步，因此您可以從堆棧樹中的項(xiàng)目導(dǎo)航到相應(yīng)的跟蹤文件或源文件。
  • 一個(gè)跟蹤文件是一個(gè)腳本的寫保護(hù)美化版本。它被命名為<script name>.js.trace。雙擊堆棧樹中的項(xiàng)目或選擇它并在選擇的上下文菜單中選擇“跳轉(zhuǎn)到跟蹤”時(shí)，將在編輯器中打開相應(yīng)的跟蹤文件，并將光標(biāo)定位在單擊的功能上。另一種方法是按Autoscroll to Trace toggle按鈕并選擇各種堆棧節(jié)點(diǎn)。在這種情況下，單擊“事件”窗格中的事件或腳本時(shí)將打開跟蹤文件。您不僅可以跳轉(zhuǎn)到函數(shù)，還可以跳轉(zhuǎn)到調(diào)用它的代碼中的位置。為此，請(qǐng)選擇所需項(xiàng)目，然后在上下文菜單中選擇“ 跳轉(zhuǎn)到調(diào)用方”。
    突出顯示文件的內(nèi)容以顯示所選堆棧節(jié)點(diǎn)的代碼執(zhí)行路徑。
  • 當(dāng)您使用ECMASript6，CoffeeScript和TypeScript代碼跟蹤應(yīng)用程序時(shí)， Spy-js還會(huì)生成映射的跟蹤文件。這些都是EcmaScript 6、TypeScript、或者CoffeeScript的跟蹤文件具有.ts.trace，.coffee.trace或.js.trace擴(kuò)展。這些文件中的代碼片段會(huì)突出顯示，就好像它們是真正執(zhí)行的一樣。
  • 您還可以通過選擇“事件堆?！贝案裰械捻?xiàng)目并在選擇的上下文菜單中選擇“跳轉(zhuǎn)到源”，導(dǎo)航到按原樣顯示的源文件，而不會(huì)進(jìn)行美化。如果跟蹤的站點(diǎn)使用IntelliJ IDEA項(xiàng)目進(jìn)行映射，IntelliJ IDEA將根據(jù)映射檢測相應(yīng)的本地文件，并在編輯器中打開此文件。如果您正在跟蹤未映射到IntelliJ IDEA項(xiàng)目的站點(diǎn)，IntelliJ IDEA將打開只讀頁面源，就像您在瀏覽器中選擇了View Page Source。
    當(dāng)跟蹤的站點(diǎn)使用IntelliJ IDEA項(xiàng)目進(jìn)行映射時(shí)，IntelliJ IDEA會(huì)在嘗試編輯打開的跟蹤文件時(shí)打開源文件。
• 快速評(píng)估窗格：單擊“事件堆?！贝案裰械墓?jié)點(diǎn)時(shí)，“快速評(píng)估”窗格將顯示其他函數(shù)調(diào)用詳細(xì)信息，參數(shù)值和返回值，如果在函數(shù)執(zhí)行期間存在異常詳細(xì)信息，則會(huì)顯示。

啟動(dòng)Spy-js跟蹤會(huì)話

從IntelliJ IDEA開始，Spy-js啟動(dòng)時(shí)使用Spy-js類型的運(yùn)行/調(diào)試配置來跟蹤Web應(yīng)用程序，或者使用Node.js的Spy-js類型來跟蹤Node.js應(yīng)用程序。

創(chuàng)建Spy-js調(diào)試配置

1. 單擊工具欄上的 ，然后從彈出列表中選擇Spy-js。該“運(yùn)行/調(diào)試配置：間諜JS對(duì)話框”打開。
2. 指定要使用的Node.js解釋器。
3. 跟蹤服務(wù)器端口。此端口號(hào)必須與系統(tǒng)代理端口相同。如果選中“自動(dòng)配置系統(tǒng)代理”復(fù)選框，則會(huì)自動(dòng)為系統(tǒng)代理服務(wù)器設(shè)置指定的端口號(hào)。否則，您必須手動(dòng)指定系統(tǒng)代理設(shè)置中的字段值。

   該跟蹤服務(wù)器端口會(huì)自動(dòng)填充。為避免端口沖突，建議您接受建議的值并選中“自動(dòng)配置系統(tǒng)代理”復(fù)選框。

4. 要使用“跟蹤服務(wù)器端口”字段中的端口自動(dòng)激活系統(tǒng)代理服務(wù)器，請(qǐng)選中“自動(dòng)配置系統(tǒng)代理”復(fù)選框。

   或者，清除復(fù)選框以手動(dòng)指定代理設(shè)置。清除“自動(dòng)配置系統(tǒng)代理”復(fù)選框。了解如何在Windows，Mac，Ubuntu，iOS，Android，Windows Phone上手動(dòng)配置代理設(shè)置。請(qǐng)注意，某些桌面瀏覽器有自己的代理設(shè)置配置屏幕。

5. 從“使用”列表中，選擇指定配置跟蹤會(huì)話的方式。
   • 要讓Spy-js應(yīng)用其內(nèi)部預(yù)定義配置，請(qǐng)選擇“默認(rèn)配置”。
   • 要應(yīng)用自定義手動(dòng)創(chuàng)建的配置，請(qǐng)選擇“配置文件”選項(xiàng)，然后在下面的“配置”字段中指定自定義配置文件的位置 。

     一個(gè)配置文件是具有.js或者.conf.js擴(kuò)展的JavaScript文件，包含滿足Spy-js的配置需求的有效的JavaScript代碼。如果IntelliJ IDEA在項(xiàng)目中檢測到具有擴(kuò)展名.conf.js的文件，則這些文件將顯示在下拉列表中。

     手動(dòng)鍵入配置文件的路徑，或單擊“瀏覽”  ，并在打開的對(duì)話框中選擇位置。指定后，配置文件將添加到下拉列表中，以便下次從列表中獲取而不是指定路徑。

開始跟蹤Web應(yīng)用程序

1. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置，然后單擊  。該Spy-js工具窗口，包含空的跟蹤運(yùn)行選項(xiàng)卡和跟蹤代理服務(wù)器選項(xiàng)卡，它們通知您代理服務(wù)器的狀態(tài)。
2. 切換到瀏覽器并刷新頁面以開始調(diào)試。Spy-js開始在此頁面上捕獲事件，Spy-js工具窗口在“事件”窗格中顯示它們。

為Node.js調(diào)試配置創(chuàng)建Spy-js

1. 單擊工具欄上的 ，然后從彈出列表中選擇Spy-js for Node.js。該“Node.js的運(yùn)行/調(diào)試配置：Spy-js”對(duì)話框打開。
2. 指定要使用的Node.js解釋器。這可能是一個(gè)本地Node.js的解釋或適用于Linux上的Windows子系統(tǒng)的Node.js。
3. 指定用于啟動(dòng)應(yīng)用程序的JavaScript文件。

   如果要跟蹤C(jī)offeeScript，請(qǐng)指定生成的JavaScript文件的路徑。該文件可以在外部生成，也可以使用文件監(jiān)視器進(jìn)行編譯。

4. 指定跟蹤服務(wù)器端口。此端口號(hào)必須與系統(tǒng)代理端口相同。如果選中“自動(dòng)配置系統(tǒng)代理”復(fù)選框，則會(huì)自動(dòng)為系統(tǒng)代理服務(wù)器設(shè)置指定的端口號(hào)。否則，您必須手動(dòng)指定系統(tǒng)代理設(shè)置中的字段值。

   該跟蹤服務(wù)器端口會(huì)自動(dòng)填充。為避免端口沖突，建議您接受建議的值并選中“自動(dòng)配置系統(tǒng)代理”復(fù)選框。

5. 使用配置設(shè)置指定配置文件以應(yīng)用于跟蹤會(huì)話。

   一個(gè)配置文件是具有擴(kuò)展.js或者.conf.js的JavaScript文件，其包含滿足Spy-js的配置需求的有效的JavaScript代碼。如果IntelliJ IDEA在項(xiàng)目中檢測到具有擴(kuò)展名.cong.js的文件，則這些文件將顯示在下拉列表中。

   手動(dòng)鍵入配置文件的路徑，或單擊“瀏覽” 并在打開的對(duì)話框中選擇位置。指定后，配置文件將添加到下拉列表中，以便下次從列表中獲取而不是指定路徑。

6. 可選：
   • 鍵入自定義Node.js開頭的Node參數(shù)。例如，要啟用跟蹤ECMAScript 6腳本，請(qǐng)指定--harmony作為Node參數(shù)。請(qǐng)注意，Node.js必須為0.11.13或更高版本。
   • 選擇應(yīng)用程序的工作目錄。默認(rèn)情況下，該字段顯示項(xiàng)目根文件夾。
   • 指定要在啟動(dòng)時(shí)通過process.argv數(shù)組傳遞給應(yīng)用程序的Node.js特定參數(shù)。
   • 如果適用， 請(qǐng)指定Node.js可執(zhí)行文件的環(huán)境變量。

開始跟蹤Node.js應(yīng)用程序

• 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置，然后單擊 。該Spy-js工具窗口打開并在“跟蹤運(yùn)行”選項(xiàng)卡中顯示捕獲的事件。 

保存和加載跟蹤會(huì)話

Spy-js將跟蹤會(huì)話的調(diào)用和屬性存儲(chǔ)在.json中，這些文件可以壓縮到zip存檔中。您可以在以后隨時(shí)提取它們，以將跟蹤會(huì)話圖像加載到Spy-js中。請(qǐng)注意，加載的映像不會(huì)還原會(huì)話，因?yàn)閷?shí)際上沒有執(zhí)行任何腳本。您所能做的就是分析以前執(zhí)行的代碼的流程和屬性。

保存跟蹤會(huì)話的圖像

• 單擊“事件”工具欄的 ，然后從列表中選擇“保存跟蹤 ”。IntelliJ IDEA壓縮了zip存檔中的所有受影響的.json文件，并打開保存存檔的文件夾。

加載先前跟蹤會(huì)話的圖像

1. 要激活Spy-js，請(qǐng)分別啟動(dòng)與圖像中保存的會(huì)話相同類型的跟蹤會(huì)話，Spy-js或Node.js的Spy-js，請(qǐng)參閱上面的“啟動(dòng)Spy-js跟蹤會(huì)話”。
2. 單擊“事件”工具欄上的 按鈕，然后從列表中選擇“加載跟蹤”。
3. 在打開的對(duì)話框中，選擇包含所需會(huì)話圖像的zip存檔位置。Spy-js停止運(yùn)行并在名為Loaded <loaded session>的新選項(xiàng)卡中顯示加載的跟蹤。

配置事件捕獲策略

默認(rèn)情況下，Spy-js捕獲所有打開的網(wǎng)頁上的所有事件，不包括https安全網(wǎng)站，除非您在運(yùn)行配置中明確指定其URL地址。所有捕獲的事件都顯示在Spy-js工具窗口的“事件”窗格中。您可以通過應(yīng)用用戶定義的事件過濾器來禁止捕獲某些類型的事件。

您可以動(dòng)態(tài)定義新的自定義過濾器或向現(xiàn)有過濾器添加事件模式。

查看可用的已配置過濾器

• 單擊工具欄上的“捕獲事件”按鈕 。當(dāng)前應(yīng)用的過濾器標(biāo)有勾號(hào)。默認(rèn)情況下，將應(yīng)用Capture All預(yù)定義過濾器。

在不停止應(yīng)用程序的情況下停止捕獲事件

• 單擊工具欄上的“捕獲事件”按鈕 ，然后從上下文菜單中選擇“全部靜音”。應(yīng)用程序仍在運(yùn)行，但“事件”窗格顯示上次捕獲的事件。如果要分析腳本，因此需要將其顯示在“事件”窗格中，但在捕獲新事件時(shí)不會(huì)將其刪除，這將非常有用。

定義新的事件過濾器

1. 單擊工具欄上的“捕獲事件”按鈕 ，然后從列表中選擇“編輯捕獲排除”。
2. 在打開的Spy-js Capture Exclusions對(duì)話框中，單擊左側(cè)窗格中的 。
3. 在右側(cè)窗格中，在“排除名稱”字段中指定過濾器名稱，并配置排除規(guī)則列表。
   • 要添加規(guī)則，請(qǐng)單擊 ，“添加條件到排除”對(duì)話框?qū)⒋蜷_。在“值/模式”文本框中的“條件類型”下拉列表中鍵入模式，指定是否應(yīng)將模式應(yīng)用于事件類型或腳本名稱。請(qǐng)注意，使用了glob模式匹配。單擊“確定”后，IntelliJ IDEA將帶您進(jìn)入“Spy-js捕獲排除”對(duì)話框。
   • 要編輯規(guī)則，請(qǐng)?jiān)诹斜碇羞x擇該規(guī)則，單擊 ，然后在打開的對(duì)話框中更新規(guī)則。要?jiǎng)h除規(guī)則，請(qǐng)?jiān)诹斜碇羞x擇該規(guī)則，然后單擊 。

選擇要應(yīng)用的過濾器

• 單擊 并選中列表中所需過濾器旁邊的復(fù)選框。如果未配置過濾器或任何可用過濾器都不適合該任務(wù)，請(qǐng)按上述方法創(chuàng)建新過濾器。

在“事件”窗格中瀏覽已捕獲事件的樹時(shí)，您可能會(huì)遇到一些您絕對(duì)不想跟蹤的事件或腳本。您可以按上述方法創(chuàng)建過濾器，但在這種情況下，您必須離開窗格。使用IntelliJ IDEA，只要您從“事件”窗格中檢測到此類事件或腳本，就可以基于任何事件或腳本創(chuàng)建排除規(guī)則。

即時(shí)創(chuàng)建排除規(guī)則

• 選擇要排除的事件，然后選擇“靜音<事件名稱>事件”或“靜音<腳本名稱>文件”。如果當(dāng)前應(yīng)用了用戶定義的過濾器，則會(huì)以靜默方式向其添加新規(guī)則。如果Capture All當(dāng)前處于活動(dòng)狀態(tài)，則會(huì)打開Spy-js Capture Exclusions對(duì)話框，您可以在其中根據(jù)所選事件或腳本創(chuàng)建新過濾器，或選擇現(xiàn)有過濾器并向其添加新規(guī)則。

時(shí)間戳標(biāo)簽可幫助您在特定時(shí)間段內(nèi)分析代碼執(zhí)行情況。例如，您可以設(shè)置兩個(gè)時(shí)間戳標(biāo)簽并查看它們之間捕獲的事件。或者相反，您可以找到在特定時(shí)間段內(nèi)未捕獲的事件，盡管您期望這些事件可以檢測到性能問題。

設(shè)置時(shí)間戳標(biāo)簽

• 在“事件”窗格的上下文菜單中選擇“添加標(biāo)簽”。標(biāo)記為<timestamp>的標(biāo)簽將添加到文檔節(jié)點(diǎn)下。

在窗格和編輯器之間導(dǎo)航

“事件堆?！贝案衽c“事件”窗格和編輯器同步。

查看腳本或事件的調(diào)用堆棧

• 單擊事件或腳本活動(dòng)窗格。其調(diào)用堆棧顯示在“事件堆?！贝案裰小?/li>
• 可選：要自動(dòng)在編輯器中打開相應(yīng)的跟蹤文件，請(qǐng)按工具欄上的“自動(dòng)滾動(dòng)到跟蹤”切換按鈕。

在編輯器中打開事件或腳本的跟蹤文件

• 在“事件堆棧”窗格中，單擊腳本或事件兩次，或在其上下文菜單中選擇“跳轉(zhuǎn)到跟蹤”。
• 激活自動(dòng)導(dǎo)航（按“自動(dòng)滾動(dòng)到跟蹤”），然后在“事件”窗格中單擊所需的事件或腳本。

直接將“事件”窗格與編輯器同步

• 按工具欄上的“自動(dòng)滾動(dòng)到曲線”切換按鈕。
  之后，在單擊“事件”窗格中的節(jié)點(diǎn)時(shí)，IntelliJ IDEA會(huì)在“事件堆?！贝案裰酗@示其調(diào)用堆棧，并在編輯器中打開相應(yīng)的跟蹤文件。此外，當(dāng)您滾動(dòng)瀏覽事件堆棧時(shí)，IntelliJ IDEA會(huì)自動(dòng)在編輯器中打開相應(yīng)的文件并突出顯示被調(diào)用的函數(shù)。

從函數(shù)導(dǎo)航到其調(diào)用

• 在“事件堆?！贝案裰校x擇調(diào)用堆棧中的所需項(xiàng)目，然后在所選內(nèi)容的上下文菜單中選擇“跳轉(zhuǎn)到調(diào)用方”。

瀏覽ECMAScript 6，TypeScript或CoffeeScript

Spy-js支持源映射，這意味著您現(xiàn)在可以從“事件堆棧”窗格右側(cè)跳轉(zhuǎn)到ECMAScript 6，TypeScript或CoffeeScript中的原始源代碼，并觀察執(zhí)行的代碼片段。

Spy-js還生成映射的跟蹤文件。這些都是ECMAScript 6，TypeScript或CoffeeScript中的跟蹤文件，它們具有.ts.trace，.coffee.trace或.js.trace擴(kuò)展。這些文件中的代碼片段會(huì)突出顯示，就好像它們是真正執(zhí)行的一樣。

或者，您可以通過選擇Jump to Trace導(dǎo)航到執(zhí)行的JavaScript代碼。

配置源映射的處理：

• 通過單擊Events堆棧的工具欄上的 ，并在上下文菜單中選擇以下選項(xiàng)來配置處理源映射的方式：
• 選擇“啟用源映射查找”以使用編譯期間生成的源映射來導(dǎo)航到ECMAScript 6，TypeScript或CoffeeScript源代碼。
• 選擇啟用源映射生成，為所有內(nèi)容生成源映射以映射已檢測的代碼。如果要在Chrome開發(fā)工具或FireFox FireBug開發(fā)工具中調(diào)試原始代碼，請(qǐng)選擇此選項(xiàng)。
• 選擇始終打開源映射跟蹤（如果可用），以便在調(diào)用從事件到其調(diào)用方的導(dǎo)航時(shí)讓Spy-js嘗試打開映射的跟蹤文件。

從函數(shù)調(diào)用導(dǎo)航到其源代碼：

• 在“事件堆棧”窗格中，選擇有問題的函數(shù)，然后在選擇的上下文菜單中選擇以下選項(xiàng)之一：
• 要導(dǎo)航到ECMAScript 6，TypeScript或CoffeeScript源代碼，請(qǐng)?jiān)谒x內(nèi)容的上下文菜單中選擇“跳轉(zhuǎn)到源”。
• 要導(dǎo)航到JavaScript跟蹤文件，請(qǐng)選擇“跳轉(zhuǎn)到跟蹤”。
• 要導(dǎo)航到映射的跟蹤文件（ECMAScript 6，TypeScript或CoffeeScript），請(qǐng)選擇“跳轉(zhuǎn)到映射的跟蹤”。

從函數(shù)導(dǎo)航到其調(diào)用：

• 在“事件堆?！敝羞x擇該功能，然后選擇“跳轉(zhuǎn)到調(diào)用方”。
  • 如果選中“始終打開源映射的跟蹤（如果可用）”選項(xiàng)，則會(huì)打開相應(yīng)的映射跟蹤文件。
  • 如果未選中“始終打開源映射的跟蹤（如果可用）”選項(xiàng)，則會(huì)打開JavaScript跟蹤文件。

高級(jí)跟蹤導(dǎo)航

使用高級(jí)跟蹤導(dǎo)航，您可以根據(jù)調(diào)用移動(dòng)整個(gè)堆棧并找到尚未調(diào)用的函數(shù)，即找到尚未執(zhí)行的代碼片段并分析跳過它們的原因。

可以使用以下六個(gè)操作：轉(zhuǎn)到跟蹤文件中下一個(gè)/當(dāng)前/上一個(gè)函數(shù)的下一個(gè)/上一個(gè)調(diào)用。完整的操作列表可從“事件堆?！贝案竦纳舷挛牟藛沃蝎@得。從“事件堆棧”窗格的導(dǎo)航工具欄中還可以查看所選函數(shù)的下一個(gè)和上一個(gè)調(diào)用、上一個(gè)函數(shù)的前一個(gè)調(diào)用和下一個(gè)函數(shù)的下一個(gè)調(diào)用。

當(dāng)您選擇其中一個(gè)操作時(shí)，光標(biāo)會(huì)跳轉(zhuǎn)到堆棧中的調(diào)用。如果按下自動(dòng)滾動(dòng)到跟蹤切換按鈕，則相應(yīng)的跟蹤文件會(huì)自動(dòng)打開，并且光標(biāo)位于調(diào)用處。

高級(jí)跟蹤搜索

通過高級(jí)跟蹤搜索，您可以在整個(gè)跟蹤中的函數(shù)調(diào)用之間進(jìn)行導(dǎo)航（跨所有跟蹤的事件）。這意味著如果您在瀏覽器和事件窗格中跟蹤5個(gè)頁面，相應(yīng)地顯示5個(gè)文檔節(jié)點(diǎn)，IntelliJ IDEA將在所有這些節(jié)點(diǎn)下搜索所選函數(shù)的調(diào)用，并在狀態(tài)欄中顯示找到的函數(shù)調(diào)用的數(shù)量。

當(dāng)您調(diào)用另一個(gè)高級(jí)搜索或?qū)Ш綍r(shí)，將重置搜索結(jié)果并隱藏搜索工具欄。

另請(qǐng)注意，當(dāng)您選擇“在所有事件中搜索此函數(shù)調(diào)用”選項(xiàng)時(shí)，將計(jì)算調(diào)用發(fā)生次數(shù)。在分析檢測到的調(diào)用時(shí)，時(shí)間過去了，捕獲了新事件，并且第一次檢測到的調(diào)用可能已經(jīng)從堆棧中刪除，這意味著它不再可用于導(dǎo)航。

在所有文檔節(jié)點(diǎn)中搜索函數(shù)的調(diào)用：

• 在“事件堆?！贝案裰羞x擇有問題的函數(shù)，然后在所選內(nèi)容的上下文菜單中選擇“搜索此函數(shù)調(diào)用”。找到的調(diào)用數(shù)顯示在狀態(tài)欄中，工具欄顯示四個(gè)先前隱藏的導(dǎo)航chevron（v形）按鈕。
  
  

在找到的調(diào)用中導(dǎo)航：

• 使用chevron（v形）按鈕：
  • 要跳轉(zhuǎn)到第一個(gè)檢測到的調(diào)用，請(qǐng)單擊 。
  • 要跳至上次檢測到的調(diào)用，請(qǐng)單擊 
  • 要跳轉(zhuǎn)到下一個(gè)被檢測調(diào)用，點(diǎn)擊  ，該狀態(tài)欄將顯示一條消息：Occurrence <number> of <total number of detected calls>
    
    
  • 要跳轉(zhuǎn)到先前檢測到的調(diào)用，請(qǐng)單擊 。

使用運(yùn)行時(shí)數(shù)據(jù)（Spy-js autocompletion）擴(kuò)展基本完成列表

術(shù)語Spy-js autocompletion（Spy-js自動(dòng)完成）表示使用從運(yùn)行時(shí)數(shù)據(jù)中檢索的建議來擴(kuò)展基本完成列表。于已經(jīng)執(zhí)行的代碼（在相應(yīng)的跟蹤文件中以綠色突出顯示），該Spy-js自動(dòng)完成功能可以從源文件獲得。

當(dāng)您將插入符號(hào)放在源文件中的符號(hào)并按下時(shí)Ctrl+Space，Spy-js將從瀏覽器或正在運(yùn)行的Node.js應(yīng)用程序中檢索數(shù)據(jù)，并根據(jù)以下規(guī)則將其與基本完成列表合并：

1. 如果對(duì)象都存在于基本完成列表中并從運(yùn)行時(shí)檢索，則提供有關(guān)參數(shù)，屬性，類型等的更多信息的變體仍保留在列表中。
2. Spy.js檢索到的對(duì)象顯示在列表頂部并標(biāo)有 圖標(biāo)。如果檢索到的對(duì)象特定于瀏覽器，則該對(duì)象將使用 圖標(biāo)和此瀏覽器的圖標(biāo)進(jìn)行標(biāo)記。

激活Spy-js自動(dòng)完成功能

• 單擊“事件”工具欄上的按鈕 ，然后從列表中選擇“啟用S??py-js autocomplete 和 magnifier”。

在不運(yùn)行調(diào)試會(huì)話的情況下計(jì)算表達(dá)式（Spy-js magnification）

術(shù)語Spy-js magnification（Spy-js放大）表示在沒有實(shí)際運(yùn)行調(diào)試會(huì)話的情況下計(jì)算表達(dá)式。當(dāng)您單擊有問題的表達(dá)式或?qū)⒉迦敕?hào)放在其上并按下Ctrl+Alt+F8時(shí)，工具提示將顯示在顯示表達(dá)式值的表達(dá)式下方。如果Spy-js檢索多個(gè)值，請(qǐng)單擊工具提示中的 圖標(biāo)以展開值列表。

該放大功能可以從源文件都執(zhí)行和未執(zhí)行的代碼。

默認(rèn)情況下，該功能已關(guān)閉。

激活Spy-js magnification

• 單擊“事件”工具欄上的按鈕 ，然后從列表中選擇“啟用S??py-js autocomplete 和 magnifier”。

查看依賴關(guān)系圖

使用Spy-js，您可以構(gòu)建和檢查客戶端和Node.js應(yīng)用程序的運(yùn)行時(shí)應(yīng)用程序/事件圖。

1. 生成圖表：
   • 要在整個(gè)應(yīng)用程序中構(gòu)建包含依賴項(xiàng)的圖表，請(qǐng)選擇文檔節(jié)點(diǎn)，然后在所選內(nèi)容的上下文菜單中選擇“顯示應(yīng)用程序依賴關(guān)系圖”。
   • 要使用單個(gè)事件的依賴關(guān)系構(gòu)建圖表，請(qǐng)?jiān)凇笆录贝案裰羞x擇所需事件，然后選擇“顯示事件依賴關(guān)系圖”。
2. 分析圖表：
   • 該圖表在單獨(dú)的編輯器選項(xiàng)卡中打開。圖中的節(jié)點(diǎn)表示項(xiàng)目文件，而邊表示源文件中有一個(gè)或多個(gè)函數(shù)調(diào)用目標(biāo)文件中的函數(shù)。
   • 要檢查節(jié)點(diǎn)或邊緣的詳細(xì)信息，請(qǐng)選擇相關(guān)節(jié)點(diǎn)或邊緣，并在編輯器右上角的專用窗格中查看其詳細(xì)信息樹。窗格顯示連接功能組合，以及在其中進(jìn)行調(diào)用的事件和發(fā)出的調(diào)用數(shù)。