IE8 開発者ツール メニューの説明

IE8「開発者ツール」の使い方の詳しい説明（メニューの各階層の詳しい説明）
IE8の正式版がリリースされました。この記事では、「Chrome の JavaScript 実行能力は IE8 の 15 倍である」、「IE8 のページ レンダリング速度は Safari の 2.456 倍である」、「IE8 のブルート フォース攻撃への耐性は Firefox の 1.235 倍である」といったばかげた評価やばかげた結論を出すつもりはありません。誰が誰より優れているかをなぜ気にする必要があるのでしょうか?私が知っていることといえば、Windows 7 がリリースされると、IE8 の市場シェアのせいで、フロントエンド開発者が「IE8 については心配しないでください。使用している人はほとんどいません」と言うことは不可能になるということです。したがって、この記事では、IE8 が開発者にとって親しみやすい唯一の「開発者ツール」である可能性があることを非常に実用的な方法で説明します。同時に、関連する情報や知識も広めていきます。ですので、IE8 に対する偏見を捨てて、辛抱強く読み進めてください。

IE8をまだインストールしていませんか？

フロントエンド開発者であれば、これをインストールしてください。正式版がリリースされたからです。以前のベータ版とは異なり、今回は真剣に注意を払う必要があります。ダウンロードしてインストールしてください。ダウンロードアドレスはこちらです——

IE8 中国語版ダウンロードリスト

ウィンドウズ
ウィンドウズビスタ
Windows Server 2003
Windows Server 2008
Windows XP 64 ビット
Windows Vista 64 ビット
Windows Server 2003 64 ビット
Windows Server 2008 64 ビット

IE8 英語版ダウンロードリスト

ウィンドウズ
Windows XP 64 ビット
ウィンドウズビスタ
Windows Vista 64 ビット
Windows Server 2003
Windows Server 2003 64 ビット
Windows Server 2008
Windows Server 2008 64 ビット

ああ、おそらく、システム上の IE6 または IE7 が壊れているのではないかと心配しているのでしょう。はい、可能です。ただし、次のツールを試すことができます。複数のバージョンの IE を共存させることができます - IE マルチバージョン共存ソリューション - IETester
Microsoft の Web 開発およびデバッグ ツール SuperPreview (ダウンロードに添付)
開発者ツールの紹介

これは流行りの名前ですが、新しいものではありません。その前身は「IEdevtoolbar」です。しかし、以前は単なる IE のプラグインでした。 IE8 では、ブラウザに自動的にこの機能が組み込まれました。やや素朴な名前が付けられただけでなく、機能も大幅に強化されました。
開発者ツールは IE8 の [ツール] メニューの下にあります。または、F12 ショートカット キーを押すだけで呼び出すことができます。

紹介する前に、これが何ができるのかについて話しましょう。ブラウザを使ってウェブサイトを閲覧するだけであれば、ページがどのように作られているかを気にする必要はありません。それではこのページを離れてもいいと思います。
一般的に、開発者ツールは、フロントエンド開発者がページを開発するために設計されたツールです。 HTML コード、CSS コード、JavaScript コードなどのページ内のバグを簡単に見つけることができる一連の小さなツールを提供します。同時に、カラーピッキングやスクリーンルーラーなど、比較的役に立たないけれどもそれでも便利な小さなツールもいくつか提供しています。
はい、私たちはそれを見て、それが何をするのかを知っています。メニューの順番に一つずつ紹介していきましょう～

この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【ファイル】メニュー

【全キャンセル】
開発者ツールでの以前の操作はすべてキャンセルされ、ページと DOM 構造が更新されます。
[Internet Explorer のソース表示をカスタマイズ]
【出典を試みた】なんという名詞だ。より一般的な言い方は、「Web ページのソース ファイルを表示するために使用するエディター」です。たとえば、私はEditPlusを使用しています。
【やめる】
あなたの知性を侮辱しないために、これについてはこれ以上は言いません。ちなみに、F12 は奇数と偶数のショートカット キーです。
[検索]メニューをクリックして要素を選択します

ショートカット キー Ctrl + B は、図のマウスの ICO ボタンをクリックするのと同じ効果があります。最もよく使用される機能。偶数奇数スイッチでもあります。開いたら、ページ上の要素をマウスでクリックすると、その要素が選択され、その DOM 構造、CSS スタイルなどの情報が一覧表示されます。

たとえば、上の写真。左側の領域には、このハイパーリンク要素の DOM 情報が表示されます。親要素、子要素、兄弟要素が明確に確認できます。
右側の領域には、要素のスタイル情報が表示されます。線で消されたスタイルは、そのスタイルの優先度が十分に高くないために効果がなくなったことを示します。デバッグ時には、その前のボックスのチェックを外すことができます。チェックを外すと、このスタイルが強制的に削除されます。さらに、各スタイルのプロパティは、マウスをクリックするだけですぐに変更できます。これにより、変更されたページの効果が即座に確認できるため、非常に便利です。
FireFox で FireBug を使用したことがある友人なら、間違いなくこれに馴染みがあるでしょう。唯一の違いは、FireBug では優先順位の低いスタイルが下部に配置されることです。

[トラッキング スタイル] ビューと [スタイル] ビューの機能は同じで、どちらも選択した要素のスタイル情報を表示するために使用されます。唯一の違いは、表示方法が変わることです。どちらのビューに慣れるかは、好みによって異なります。

この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。


[レイアウト]ビューでは、選択した要素のボックスモデル情報を表示できます。 FireBug よりも多くの情報を表示できますが、私はやはり、FireBug がカラー ブロックを使用してページ上に直接情報を表示する方法の方が好きです。

[プロパティ] ビューでは、選択した要素のプロパティ情報を表示できます。良い点は、プロパティを即座に追加または削除できるため、ページをすばやくデバッグできることです。
ああ、そうだ。開発者ツールで選択した要素のスタイルや属性を変更しても、それは一時的なデバッグに過ぎず、Web ページのソース コードは変更されないことに注意してください。
[無効]メニュー

【スクリプト】
ページ上での JavaScript または VBScript スクリプトの使用を禁止します。なぜ無効にするのですか?ページの堅牢性をテストします。ページ デザインに対して高い要求を持つ顧客の中には、「顧客がスクリプトを無効にしても、このページは使用できますか?」と尋ねる人もいるかもしれません。はい、この機能は、こうしたおかしな顧客の倒錯したニーズをテストするために使用されます。
ポップアップブロッカー
ポップアップ ウィンドウのフィルター。 「ブラウザやセキュリティ ソフトウェアによるポップアップ ウィンドウのフィルタリングを防ぐにはどうすればよいか」といったことをテストするために使用されます。
【CSS】
「CSS Naked Festival」開催中！これを使用して、CSS が未適用のときのページの動作をテストします。これは、ページの堅牢性とアクセシビリティを確認するための重要なテストでもあります。しかし、中国ではウェブにアクセスできる視覚障害者は多くありません。

この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【表示】メニュー

【クラスとID情報】
ショートカットキーはCtrl+Iで、奇数と偶数を切り替えます。開くと、ページが密集した赤いブロックで覆われていることがわかります。クラス名やID名も表示されます。はい、これはクラスと ID 情報を表示した場合の効果です。しかし正直に言うと、この赤い糞の山に誰が興味を持つでしょうか?ページが継ぎ接ぎの乞食の服のように見えるだけでなく、完全に不明瞭になります-_-b...

【リンクパス】
同上。ページ上のすべてのハイパーリンクが赤いボックスで囲まれ、リンク アドレスが表示されます。

【リンクレポート】
リンク レポート機能を使用すると、開発者ツールはこのページのリンク レポートを生成するのに役立ちます。リンクの数、リンク アドレス、新しいウィンドウが開かれるかどうかなどの情報が含まれます。しかし、これは具体的に何に使われるのでしょうか?私も分かりません。

タブインデックス
tabindex 属性を持つすべての要素を強調表示します。 tabindex 属性を設定すると、Web ページ要素がフォーカスを取得する順序を変更できます。

この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【アクセスキー】
「accesskey 属性」を含むすべての要素を強調表示します。 accesskey 属性を設定することで、要素がフォーカスを取得するためのショートカット キーを設定できます。

[ソース ファイル] 「スタイル付き要素ソース」
選択した要素のスタイル、HTML コード、Web ページ レベルの情報を含むソース ファイルを生成します。
このコマンドが機能するには、要素を選択する必要があります。生成されたソース ファイルは、選択した要素にのみ関連します。
[ソースファイル] 「DOM (要素)」
ショートカットキーはCtrl+Tです。ソースファイルを生成します。このソース ファイルには、選択した要素の DOM 構造情報のみが含まれます。 FireBug を使用したことがある人は、「要素の HTML コードをコピー」というコマンドを思い浮かべるかもしれません。実はこれもそれに似ています。唯一の違いは、FireBug ではクリップボードに直接コピーされるのに対し、これはウィンドウ内に生成されることです。
[ソースファイル] 「DOM (ページ)」
ショートカットキー Ctrl + G。ソースファイルを生成します。このソース ファイルには、ページ全体の DOM 情報構造が含まれています。これは非常に迷惑な機能です。バグによるものかどうかはわかりませんが、この機能は実際には「Webページのソースコードを表示する」機能です。生成されるソースコードにはDOM情報だけでなく、CSSやスクリプト情報も含まれるためです。
[ソースファイル] 「元の状態」
これは非常に迷惑な機能で、実際には「Web ページのソース コードを表示する」ものです。誰もがマウスの右ボタンを使用して Web ページを直接クリックすることを好むと思います。
[概要] メニュー

[アウトライン] メニューは、当然ですが条件に合致する要素をアウトラインして表示するコマンドです。
表セル
フォームの各セルをオレンジ色の線で囲むだけです。念のため言っておきますが、ああ。これはテーブルのセルであることがわかります。

【表面】
フォームをオレンジ色の線で囲むだけです。念のため言っておきますが、ああ。これがその形であることが判明しました。
[DIV要素]
ページ上のすべての div 要素を緑の線で囲むだけです。念のため言っておきますが、ああ。これらはすべて div 要素であることがわかりました。


この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【画像】
ページ上のすべての img 要素を紫色の線で囲むだけです。念のため言っておきますが、ああ。これらはすべて img 要素であることがわかりました。

任意の要素
こっちの方が強力です。ラベルとそのア​​ウトラインの色をカスタマイズできます。このメニューをクリックすると、次のダイアログボックスがポップアップ表示されます。とても簡単です。これ以上の説明はありません。

[配置要素] - 「相対的」
position:relative スタイルのすべての要素は緑色で囲まれます。
【ポジショニング要素】「絶対」
position: absolute スタイルのすべての要素は黒で囲まれます。
[要素の配置] - 「固定」
position:static スタイルのすべての要素は青色で囲まれます。
[配置要素] - 「フローティング」
フロート スタイルのすべての要素は黄色で囲まれます。
【明確なアウトライン】
ページがさまざまな色の線で Excel スプレッドシートのように作成されている場合は、このコマンドを使用してすべての線をクリアできます。


この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【画像】メニュー

明らかに、このコマンドはページ上のさまざまな画像を制御するために使用されます。
画像を無効にする
あなたの知性を侮辱しないために、これについては話しません。説明する必要がある唯一のことは、img 要素だけでなく、要素の背景画像も無効になるということです。
【表示画像サイズ】
とても素晴らしい機能です。画像のプロパティを確認しなくても、各画像のサイズがすぐにわかります。もちろん単位はピクセルです。

[画像ファイルサイズを表示]
とても素晴らしい機能です。画像のプロパティを確認しなくても、各画像のファイルサイズがすぐにわかります。もちろん単位はバイトです。

【画像パスを表示】
とても素晴らしい機能です。画像のプロパティを確認しなくても各画像の URL パスをすぐに知ることができ、コピーすることもできます。

【代替テキストを表示】
img要素のalt属性のテキストを表示できます。ちなみに、画像の alt にはキーワードを詰め込まないでください。そうしないと、SEO の過剰最適化と簡単にみなされてしまいます。

【画像レポートを見る】
変更されたページの詳細なグラフィック レポートを生成します。各画像に関する非常に詳細な情報が含まれています。


この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
[キャッシュ]メニュー

キャッシュと Cookie を管理するためのメニュー グループ。これは開発者にとって非常に魅力的な機能となるでしょう。
【常にサーバーから更新】
非常に意味深な命令のようです。つまり、「ブラウザ キャッシュの使用を無効にする」という意味です。
【ブラウザのキャッシュをクリアする】
ショートカットキー Ctrl R。特に言うことはありませんが、これまでの操作手順を簡略化するだけです。
メニューの[ブラウザのキャッシュをクリア]の後の3つのドットに気づいたかどうかわかりません。つまり、このメニューをクリックすると確認ダイアログボックスが表示されます。
このドメインのブラウザキャッシュをクリアする
ショートカットキー Ctrl D。特に言うことはありませんが、このドメインのブラウザ キャッシュをクリアするだけです。
【Cookieを無効にする】
何も良いことは言えません。クッキーはもうありません。
【セッションクッキーをクリアする】
ブラウザからすべての Cookie を消去します。おそらく、フォーラムやコミュニティはあなたが再度ログインするのを待っているでしょう。
ドメインクッキーを消去する
このドメインの Cookie のみをクリアします。
【Cookie情報を見る】
このページに含まれる Cookie に関する情報を表示します。考えないでください。パスワードを取得できなくなります。
【ツール】メニュー

開発者ツールには便利な小さなツールがいくつか付属していますが、他の専門的な関連ツールと比較すると少し弱いです。しかし、緊急時には十分です。
【サイズ変更】
とても便利な小さなツールです。ブラウザ ウィンドウは適切なサイズに素早く調整できます。これにより、Web ページの解像度の互換性のテストがはるかに簡単になります。
【定規を表示】
シンプルな定規ツール。長さ、距離、その他の情報を測定するために使用できます。線の色は変更できます。複数のタイトルを作成することも可能です。領域が小さすぎる場合は、虫眼鏡機能を使用できます。

カラーピッカーを表示
シンプルな色選択ツール。マウスをクリックして色を選択します。ただし、別のツール「My Work Toolbox - Color Picker (ColorPic)」をお勧めします。比較すると、開発者ツールのこのツールは単純すぎます。


この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
【検証】メニュー

このメニューは、武術界に血の嵐を巻き起こすこと間違いなしです（この慣用句を突然忘れていたので、思い出させてくれたXiaoqiに感謝します。悲しいことに、最近武術小説をあまり読んでいないからかもしれませんが、最近は「息が切れる」などの慣用句に馴染みがあるようです）。近い将来、孔一基は無数に出現するでしょう。
【HTML】
ページの HTML コードを確認します。このページは w3c html 検証ツールに送信され、検証レポートが取得されます。
【CSS】
ページの CSS コードを検証します。このページは w3c css 検証ツールに送信され、検証レポートが取得されます。
【ソース】
ページのソースコードを確認します。このページは feedvalidator.org 検証ツールに送信され、検証レポートが取得されます。
【リンク】
確認ページへのリンク。このページは w3c 検証ツールに送信され、検証レポートが取得されます。
【ローカルHTML】
ローカル ページを検証するには、w3c html 検証ツールを開きます。
ローカル CSS
w3c CSS 検証ツールを開いて、ローカル ページを検証します。
【アクセシビリティ】WCAG チェックリスト
ページの WCAG (Web コンテンツ アクセシビリティ レポート) を確認します。このページは contentquality.com 検証ツールに送信され、検証レポートが取得されます。
[アクセシビリティ] セクション 508 チェックリスト
ページが 508 標準に準拠していることを確認します。このページは contentquality.com 検証ツールに送信され、検証レポートが取得されます。
【多重検証】
同時検証では、複数の仕様に対してページを検証します。

ページの検証に関して、2 つのことを申し上げたいと思います。実際のところ、ページはオンラインになる前に検証に合格する必要があるのでしょうか?個人的には全く不要だと感じています。あなたが学生なら、象牙の塔に横たわっているでしょう。あなたは顧客であり、時間があるので、自分のページで何でも好きなことができます。ただし、商用プロジェクトの場合、「PASS」のためだけに貴重なプロジェクト リソースを無駄にする必要はまったくありません。 「ほら、私が作ったこのページは、多くの点で W3C によって検証されています」などと気にする顧客はいないからです。本当に気にする顧客がいるのなら、私はあなたの「ふざける」能力を賞賛するしかありません。

次回もお楽しみに

この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。この強力なツールは誰でも簡単に使用できると思います。
しかし、より強力な機能についてはまだ触れていません。それでは、次回の記事もお楽しみに。次の記事では、JavaScript デバッグ、ブラウザ モード、テキスト モードなどの機能の使用について詳しく説明します。