問題描述

我試圖透過 Chrome 的開發者工具來檢視工具提示是如何在網站上構建的。但是，即使我被懸停在該專案上，當我”inspect element”，沒有顯示為 html 中的工具提示。我知道我可以將樣式設定為:hover，但是我仍然看不到工具提示的 html 或 css 。

有任何想法嗎？

最佳解決辦法

我實際上發現了一個技巧，使用 Twitter Bootstrap 工具提示。如果您在另一臺顯示器上開啟開發工具 (F12)，則將滑鼠懸停在該元素上以顯示工具提示，右鍵單擊，如同您選擇’Inspect Element’ 一樣。讓這個上下文選單開啟，將重點放在開發工具上。該工具提示的 html 應該顯示在元素旁邊，它的 HTML 工具提示。那麼你可以看看它就像是另一個元素。如果你回到 Chrome，HTML 就會消失，所以只需要注意一下。

一種奇怪的方式，但它為我工作，所以我想我會分享它。

次佳解決辦法

您只需要強制顯示工具提示

$('.myelement').tooltip('open');

現在，無論懸停狀態如何，工具提示將顯示。

在 DOM 底部附近向下滾動，您應該看到標記。

更新請參閱 cneuro 對 Bootstrap 3 的評論。

$('.myelement').tooltip('show');

第三種解決辦法

該解決方案無需任何額外的程式碼。

打 command-option-j 開啟控制檯。單擊控制檯右上角的 window-looking 按鈕，在不同的視窗中開啟控制檯。

然後，在 Chrome 視窗中，將滑鼠懸停在觸發彈出視窗的元素上，然後多次按 command-`，然後鍵入控制檯，然後鍵入 debugger 。這將凍結頁面，然後您可以檢查元素選項卡中的元素。

第四種辦法

F8 將暫停除錯。

滑鼠懸停在工具提示上，並在顯示時按 F8 。

您現在可以使用檢查器來檢視 CSS 。

第五種辦法

對我來說，接受的答案沒有起作用：點選 DevTools 立即關閉工具提示。

但是，我發現 https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution 幫助了我：

  1. 在控制檯:, 執行：
    window.addEventListener('keydown', function(e) {
    if (e.keyCode == 123) debugger;
    });

  2. 用檢查器突出顯示元素

  3. 擊中 F12

您現在可以檢查元素，JavaScript 已暫停，因此 DOM 不會更改。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。