天天看點

040、如何定位一閃而過的 dialog 消息 (打開 Source 項, 當 dialog 提示語出現的時候,按下暫停,頁面就不會動了)

前言

web頁面操作的時候經常會遇到一閃而過的 dialog 消息,這些提示語一般隻出現了幾秒,過後元素節點就會在dom中消失了。

本篇講解下用chrome 浏覽器如何定位一閃而過的 dialog 消息。

打開 source 項,在右側有個暫停按鈕, 當 dialog 提示語出現的時候,點下暫停按鈕,此時頁面就不會動了。

dialog 場景

當點儲存按鈕後,頁面彈出儲存成功的提示框,這個提示框過1-2秒會自動消失

040、如何定位一閃而過的 dialog 消息 (打開 Source 項, 當 dialog 提示語出現的時候,按下暫停,頁面就不會動了)

首先我們需要定位到此元素上,檢視元素的屬性相關資訊,按f12 後滑鼠還沒來得及指上去就消失了,或者剛指上去,dom裡面的元素就不見了。

暫停 dialog

打開chrome 浏覽器,f12 後檢視,打開 source 項,在右側有個暫停按鈕,如下圖

040、如何定位一閃而過的 dialog 消息 (打開 Source 項, 當 dialog 提示語出現的時候,按下暫停,頁面就不會動了)

當 dialog 提示語出現的時候,點下暫停按鈕,此時頁面就不會動了

040、如何定位一閃而過的 dialog 消息 (打開 Source 項, 當 dialog 提示語出現的時候,按下暫停,頁面就不會動了)

于是就可以在 elements 裡面用滑鼠指到 dialog 元素上了

040、如何定位一閃而過的 dialog 消息 (打開 Source 項, 當 dialog 提示語出現的時候,按下暫停,頁面就不會動了)

元素相關資訊如下:

代碼實作

擷取dialog的時候,先定位該元素,通過上面抓出來的元素資訊 ​<code>​&lt;h2&gt;個人資訊修改成功!&lt;/h2&gt;​</code>​

定位這個元素的話,它沒什麼屬性,但是可以定位它上面的一層div,甚至再上一層的​<code>​ class="successbox dialogbox" id="jssuccesstips"​</code>​ 這2個屬性定位

執行結果如下: