問題タブ [web-developer-toolbar]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
5 に答える
39104 参照

firefox - Firefox で「生成された HTML コード」を表示するには?

Firebug を使用している場合は、HTML タブをクリックし、クリックして各要素を展開し、生成された HTML コードを表示します。すべてを展開する方法や、プレーン テキスト ファイルを取得する方法はありますか?

たまたま、Firebug である必要さえないことに気付きました。Web ページで CTRL-A (すべてを選択) を押し、右クリックして [選択ソースの表示] を選択すると、「現在の HTML コード」のプレーン テキスト ファイルが取得されます<div><body>Firebug が開いている場合、タグの前にある Firebug パネル。しかし、これを呼び出すのは奇妙な方法のようです。他に方法はありますか?

(更新: 生成された HTML は、通常、JavaScript が DOM を変更した後の HTML を参照します。元のソース コードではなく、現在の DOM ツリーです)

0 投票する
5 に答える
2178 参照

css - firefox webdeveloper ツールバーを使用して CSS を編集する場合、ツールバーが開いていると一部の画像が消えるのはなぜですか?

HTML ドキュメントのスタイルシートを編集および構築するための私の典型的なワークフローは、Firefox Web 開発者ツールバーの [CSS の編集] パネルを開き、ブラウザー ウィンドウで直接編集することです。

ほとんどの場合、これは魔法のように機能します。ただし、[CSS の編集] パネルを開くと、特定の画像が消えることがありますが、その理由はわかりません。さらに奇妙なことに、ツールバーを開いた状態で追加した画像が、ツールバーを閉じると表示されないことがあります。(主に、CSS の background-image ルールで追加された画像について話しています)。

ここにいくつかの例があります...

http://kenbrook.org - [CSS の編集] パネルを開くと、ボディの背景画像がいくつかの div 背景とともに消えます。実際、CSSの背景画像の画像はほとんど消えていると思います。私はこのサイトのマークアップとほとんどのスタイルを書きませんでしたが、それらを編集して完成させる責任があります。なぜこれが起こるのか、何か考えはありますか?

http://joelglovier.com - これも確認してください。これは、私が今自分で構築してスタイルを書いているところです (現在、ページにはいくつかの要素しかありません)。ヘッダー div には、画像を入れる空の div があります。[CSS の編集] を開くと、画像が期待どおりに表示されます。ただし、閉じていると、画像は表示されませんが、firebug を使用すると、スタイルが確実に適用され、div があるべき場所にあることがわかります。

説明はありますか??

0 投票する
2 に答える
5942 参照

internet-explorer-6 - IE6開発者ツールバーはどうなりましたか?

それはこのリンクにあるはずです:

http://www.microsoft.com/downloads/en/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

「想定」が有効な言葉です!

何か案は?

マイクロソフトはそれを削除しましたか、それとも誤ってリンクを壊しましたか?

0 投票する
2 に答える
687 参照

installation - corp から Firefox 3.6 用の Web 開発者プラグインをインストールしています。通信網

Web 開発者プラグインをインストールしようとしましたが、「Web 開発者 1.1.8 は Firefox 3.6.13 と互換性がないため、インストールできませんでした」というメッセージが表示されて失敗します。

実際に互換性がないとは思いません。むしろ、問題は検証チェック中にインストールが失敗したためだと思います。おそらく、corp. ネットワークが接続を混乱させています。私が受け取るメッセージは次のとおりです。

services.addons.mozilla.org が無効なセキュリティ証明書を使用しています

証明書を表示すると、mozilla ではなく、ネットワーク グループによって発行されています。

インストールできるようにバージョン チェックをバイパスする方法はありますか?

0 投票する
3 に答える
4044 参照

css - IE9 F12 開発者ツールを使用したきめ細かな DOM/CSS 編集: 可能ですか?

厄介な IE のみのレイアウトと CSS の問題を解決するために、IE9 の開発者ツールを使用して HTML と CSS を繰り返し編集しようとしています。理想的には、Firebug と Webkit の Inspector で慣れている DOM/CSS 操作ワークフローと同等のものを得ることができます。

言い換えれば、単一の要素または要素のグループの HTML と CSS を繰り返し編集し、変更をすぐに画面に反映できるようにしたいと考えています。

F12 ツールの「フルページ」編集機能を理解しました。この機能では、ページ全体の HTML またはすべての CSS をブロックとして編集できますが、ツールを数時間使用した後でも、オンライン ヘルプと多くの Google 検索を読んでいます。 、私はまだ、Firebug で慣れ親しんだ、よりきめ細かい編集に​​苦労しています。

あきらめる前に、F12ツールを使用して...

  • ...一度にページ全体ではなく、特定の要素とその子を編集しますか? (firebug の「HTML の編集」コンテキスト メニューのように)
  • ...変更を確認するために編集ビューを終了するのではなく、編集ビューで行われた変更がブラウザにすぐに表示されるのを確認しますか?
  • ...編集ビューで現在選択されている要素 (周囲に青い四角がある要素) を簡単に見つけるには?
  • ...単一の要素を削除しますか? (firebugでは、要素を選択して「削除」をクリックするだけです)
  • ...ドキュメント内のすべてのスタイルを調べて、関心のある要素に適用されるスタイルを見つける必要なく、新しいスタイルをクラスに追加しますか? (firebug では、右ペインのスタイルをダブルクリックするだけです)。

上記のことが IE の F12 ツールでは不可能な場合、DOM/CSS 編集用の適切な代替プラグインはありますか?

ところで、この質問に対する私の意図は、IE9 開発ツールを打ち負かすことではなく (Microsoft がこれらをすぐに使用できるようにしてくれたことを称賛します)、それらを使用してより生産的になる方法を学ぶことです。

また、ところで、私はすでに IE での firebug に相当するものに関する 20 ほどの他の StackOverflow の質問を読みましたが、それらのほとんどは JavaScript のデバッグと読み取り専用の DOM インスペクションに関するものであるようです。DOM/CSS の記述に関する最近の (IE9) ものは見つかりませんでした。したがって、このトピックについてさらに別の質問をしています...これがだまされている場合は申し訳ありません。

0 投票する
4 に答える
511 参照

css - IE 7 の Web ページのデバッグ

IE 7 の Web ページをテストしています。現在、IE Tester を使用してテストしています。他のブラウザーで表示される adivが IE 7 では表示されないz-indexという問題があります。それが問題であるかどうかを確認するために を増やしてみましたが、うまくいきませんでした。

私が苦労している主な理由は、実際に何が間違っているのか、なぜdiv希望どおりに表示されないのかがわからないためです。通常、私はすべての css 作業をfirebugや google や Opera に相当するものなどのデバッグ ツールの助けを借りて行っていますが、IE Tester デバッガーでできることはほとんどまたはまったくないことに気付きました。

要するにcss、IE 7 でのデバッグに使用できる適切なデバッグ ツールはありますか?

0 投票する
1 に答える
241 参照

jquery - Firefox 3.6アドオンの開発:XULテンプレートにjqueryを含めると、Webdeveloperツールバーが不安定になります

Firefox拡張機能を開発しています。私は私のxuljqueryの1つに含めました。さて、Firefox 3.6では、jqueryによってWebdeveloperツールバーが不安定になることに気づきました。消える!

私はすでにvar $j = jQuery.noConflict();ソリューションをテストしましたが、それは私を助けません。

他の解決策はありますか?

0 投票する
3 に答える
6990 参照

firefox - 目に見えるパディング、マージン、ボーダーで HTML 要素のアウトラインを作成するには、何を使用できますか?

私は通常、Chrome Web Developer 拡張機能を使用して、要素の概要を説明したり、CSS をデバッグしたりしています。それができない場合は、Firefox バージョン (元の優れたバージョン) を使用しますが、 「コア」要素、そのパディング、実際の幅の境界線、およびそのマージンを示す要素の「フットプリント」を概説できるツールです。

Chrome 用、または Firefox 用のそのようなツールはありますか?

0 投票する
1 に答える
182 参照

jquery - Firefox Web 開発者ツールバーが奇妙な動作を引き起こす

Web Developer(1.1.19) アドオンと Firebug 1.8.4 を備えた Firefox 8 を使用しています。

Firefox 6 または 7 以降、おかしな動作をするようになりました。たとえば、URL フィールドに入力すると、URL 履歴内の一致が適切に検索されますが、これを実行している間、入力している URL フィールドが空白になります。

フォームに入力する場合と同様の動作をします。Web サイトに 2 つのユーザー アカウントがあり、メール アドレスを入力し始めると、2 つのユーザー名が表示されます。ただし、ユーザーアカウントフィールドが空になるため、それらのいずれかを選択するのは非常に困難です。

Firefox がこの風変わりなモードになるのは、約半分の時間だけです。再起動すると治ることが多いです。

これに対する解決策はありますか?

Web Developer アドオンの更新された代替品はありますか? 私は仕事のためにそれを頼りにしています。

0 投票する
0 に答える
626 参照

google-chrome - 開発者ツールバーを開くと、ChromeでJavascriptの実行が停止します

Chromeで開発しているときはいつでも、Chromeデベロッパーツールバーが開いているときにスクリプトを実行してみるまで問題はありません。開いているときに、(たとえば)イベントが関連付けられている要素をクリックすると、ツールバーが[スクリプト]タブに切り替わり、下に添付したものが表示されます。

ツールバーを閉じると、スクリプトの実行により、待機していたアクションが取得されて実行されているようです。

JSにエラーはなく、ツールバーを閉じると完全に実行されることに注意してください。Chromeの設定には、ツールバーが開いている間、JavaScriptの実行を一時停止するものが含まれている必要があります。

すべての拡張機能を無効にし、ブラウザを再起動しても効果がありません。

Chromeデベロッパーツール