4

強調表示機能を Firefox DevTools デバッガーに追加しようとしてきたので、[HTMLAnchorElement] などを表示するだけでなく、要素を強調表示します。someElement.style.border='1px solid blue'時計のように設定または類似することができ、要素を強調表示するので、それが可能であることはわかっています. では、現在の境界線を保存し、 を使用してマウスオーバーで表示し、element.style.border='1px solid blue'マウスアウトで復元してみませんか? ウォッチ式のこれらの要素のドキュメントがどこにあるかを検査できません。

Firefox devtools でデバッグしているときに、右側のウォッチ パネルの要素に変数名の行があることに気付きました。実際には、「document.getelementsbytagname('a')36」ID の親要素の下に、「46439」のような奇妙な ID が与えられています。これらの ID は何を意味しますか? 表示要素をページ内のターゲット要素にマップできますか? Venkman から試しwindow.DebuggerView.WatchExpressions.getItemForElementましたが、null が返されます。このソース ファイルから、デバッガー ウォッチのターゲット要素を提供する別の関数はありますか?

理想的にはdocument.getElementsByTagName('a')、デバッグ コンテキストで、またはローカル変数などのアイテムを「監視」し、Chromium/Firebug などのページ内のアイテムを強調表示できるようにする必要があります。しかし、Firefox 拡張機能からこの機能を追加する方法がわかりません。

更新：

さらに作業を進めると、 を使用しDebuggerView.StackFrames.evaluateて、ブレークポイントで停止している間にコードを実行することが可能になるようですchrome://browser/content/devtools/debugger-controller.js。残念ながら、ブレークポイントで停止したときにこのコードを実行しDebuggerView.StackFrames.evaluate、[void] voidVenkman にいます。この評価コマンドは何らかの形で非表示または非公開ですか、それとも初期化されていませんか?

4

2 に答える 2

6

デバッガーからハイライターを直接使用することはまだできません。ハイライターを他のツールでより一般的に利用できるようにするために、バグを公開しています ( https://bugzilla.mozilla.org/show_bug.cgi?id=653545 )。

独自のセレクターがある場合は、コマンド ライン (Shift-F2 を押して開発者ツールバーを開く) を使用して、次の方法で要素を調べることができます。

inspect unique-selector

Firefox 開発者ツールの今後のバージョンでは、どこでも DOM オブジェクトを強調表示できるようにする予定です。

編集 - この機能が追加され、変数ビューとコンソールから機能するようになりました。2014 年 3 月に Firefox 30 で導入されました。

https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/

于 2013-06-27T15:35:39.837 に答える
2

組み込みのデバッガに力を入れすぎていると思いますが、

JavaScript をデバッグするには、最高のツールである fireBug を使用する必要があります。

このリンクは firebug のアドオン用です。わずか 2 MB のアドオンをダウンロードしてインストールすると、デバッグを楽しむことができます.. :)

編集：デバッガーのセレクター

私はあなたの特定の質問に対する答えを探していましたが、これを見つけました

Web Console Method

ここで、デバッグ、要素の取得、セレクターの詳細の取得もできるようになりました.. (基本的な使用法を参照してください)

ページで定義された変数に直接アクセスできます。

> $ function(selector, context){
   return new jQuery.fn.init(selector,context);
}

詳細については、上記のリンクを参照してください。

ネイティブ コンソールが利用できない場合は、このリンクを参照してください。

Microsoft Windows では、次のコマンドを使用して Firefox を起動し、ネイティブ コンソールを使用する必要があります。

firefox.exe -console

これにより、コンソールでFirefoxを起動できるようになります..

編集: ログ テストされた要素をログに記録するには>>同じように動作する pprint() を参照するこのリンクを参照してください。

またConsole API、そこを参照してくださいconsole.log

これが役立つことを願っています..

于 2013-06-27T09:00:56.437 に答える