web-dev-qa-db-ja.com

chromeでDOMブレークポイントを設定する方法

私はチュートリアルをフォローしようとしています here 。

セクションDOMブレークポイント（下部近く）に引っかかっています。

例のサイト に行ってきました。押した ctrl+shift+i [要素]タブに移動しました。要素タブで、次のhtmlセクションを見つけました。

<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>

今、私はコンテキストメニューを見つけようとして立ち往生しています：

#profileCard要素のコンテキストメニューを表示し、中断するイベント（サブツリーの変更、属性の変更、ノードの削除）を選択します

ここに私がどこにいるかを示すスクリーンショットがあります：

ss

javascriptdebugginggoogle-chromegoogle-chrome-devtools
42
robert king

Chromeでブレークポイントを設定するには、上に示したようにインスペクターを呼び出して、上部のスクリプトオプションをクリックします。これにより、ページで使用されているスクリプトを見て、そのページにブレークポイントを挿入するだけでなく、ステップスルーやその他の便利なデバッグオプションをステップスルーします。

上記はjavascriptの場合です。dom要素でブレークするには、ブレークする要素（インスペクターの内部）を右クリックします。コンテキストメニューが表示され、サブツリーの変更などを中断できます。

40
Ryan

要素パネルで要素を右クリックして、次の場所に移動できることを追加したいだけです。

Break On...およびSubtree modifications、Attributes modifications、またはNode removalを選択します

enter image description here

25
Hanna
  1. devToolsで要素パネルを開きます。
  2. dOM要素を調べます。
  3. それを右クリックし、ブレークを選択...

サブツリーの修正子要素が追加、削除、または移動されると、サブツリー修正ブレークポイントがトリガーされます。

Attributes Modifications属性の変更は、要素の属性（class、id、name）が動的に変更されました。

Node Removal問題のノードがDOMから削除されると、ノード削除の変更がトリガーされます。

ここにエクササイズのリンクを入力してください、お楽しみください:) DOM Breakpoints Exercise

9
Shawn Wu