問題タブ [web-inspector]

Chromeで開発者ツールを開いて[リソース]タブに移動すると、リソース名の右側に番号が付いた赤い丸が付いたリソースが表示されることがあります。

その数は何ですか？あなたはこのサイトでそれを見ることができます：http：//www.realclearpolitics.com/？state = noad

愚かなWeb要素インスペクター（サファリ/クローム）の質問ですが、一部のプロパティが淡色表示されている理由がわかりません。

Safari と Chrome の開発者ツール (Webkit インスペクタ) はかなり高度になっているようです。私は Firebug に非常に慣れていて、開発にはこれに依存していますが、Chrome に完全に切り替えようとする考えに本当にいちゃつきます (私はほとんど Chrome だけを使ってブラウジングしているため)。それは Web 開発者ツールです。

Firebug とは機能が少し異なりますが、マークアップや CSS ルールの値をその場で簡単に変更できることに気付きました。インターフェイスの基本的な違いは別として、webkit の Web インスペクターは firebug の適切な代替品になりましたか?

注: 主に HTML と CSS の作業を行うフロント エンド デザイナー/開発者の観点から質問しています。私は実際にはJavaScriptにはあまり触れていません-まだ。

JavaScript コードに無限ループを記述しました。WebKit の Web Inspector を使用して、実行を終了するにはどうすればよいですか? Safari を終了し、再度開く必要があります (もちろんコードを変更した後)。

編集:より具体的には、ループを実行しているプロセス/スレッドに入って、ループが終了しない理由を確認する方法を探しています。類推は、^C を実行してプロセスに割り込むことができる GDB にあります。Web ブラウザを強制終了する方法を探しているわけではありません。私はすでにそれがかなり得意です。

Webインスペクターのソースビューではなく、直接TextMateでWebインスペクターのサイドバーからリソースを開くとよいと思いましたが、

inspector.htmlへのアクセスは機能しませんでした。イベントリスナーは追加されますが、起動されることはありません。なぜこれがこのようになるのか、誰かが経験を持っていますか？

Webkitベースのブラウザ（ChromeとSafariでテスト済み）でランダムな問題が発生しました。私が維持しているWebサイトでは、エラーメッセージに使用するアートワークを更新しており、Webkitベースのブラウザーを除くすべてのブラウザーで見栄えがします。WebインスペクターでCSSルールのオンとオフを切り替えると、私が抱えている問題は解消されたようです。

問題：

テキストサイズコントロールの上のスペースはそこにあるべきではなく、次のようになります。

厄介なのは、Web Inspectorでcssプロパティを切り替えると、間隔が消えることです。

ポップアップのHTMLは次のとおりです。

そして、CSSの重要な部分は次のとおりです。

適用される場所.block：

なぜこれが発生するのか、回避策があるかどうかを誰かが知っていますか？

更新：ライブの例（古いグラフィックを使用していますが）はこちらから入手できます。Webkitブラウザで「MedicalExpenses」などの項目をクリックすると、間隔エラーのあるポップアップが表示されます。

黄色いボックスを削除するにはどうすればよいですか? カーソルをどこに移動しても、同じ場所にとどまります。外部モニターを使用していない場合、その黄色いボックスが画面の半分を占めていました:(

ありがとう！

PS: 公式の webkit/safari クラウドに質問するのに適したフォーラムがないように思われるか、単に見逃しているが、webkit.org ではないため、ここで質問しています。

FirebugまたはWebInspector（おそらくOpera Dragonfly / IE Developersツールバー）でXHRが発行された行とファイル名を特定する方法はありますか？ない場合、それを見つけるための最良の方法は何ですか？コードベースで呼び出されたURIを検索するだけですか？（ただし、多くの場合、構築されます）

Safariのデバッガーにページの更新全体でブレークポイントを永続化させるにはどうすればよいですか？onLoadで実行されるコードをデバッグしようとしているので、コードが実行される前にブレークポイントを設定する時間がありません。ブレークポイントを設定した後にページを更新すると、ブレークポイントが失われます。

（問題のコードはDojoウィジェットにあるため、重要な場合はXHRを介してロードされます。）

厄介な 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) ものは見つかりませんでした。したがって、このトピックについてさらに別の質問をしています...これがだまされている場合は申し訳ありません。