この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
IE8開発者ツールの使用に関する詳細な説明（あらゆるレベルでのメニューの詳細な説明）
IE8の公式バージョンがリリースされました。この記事では、非常にナンセンスでコメントすることはありません。その後、ChromeにはIE8の15倍のJavaScriptを実行する能力があるという結論を下します。IE8はSafariの2.456倍、IE8のFirefoxの1.235倍高くなっています。私は誰よりも気にしますか？私が知っているのは、Windows 7がリリースされると、IE8ブラウザの市場シェアがフロントエンド開発者に言えないようにすることです。IE8について心配しないでください。したがって、この記事では非常に実用的に説明します。 IE8は、開発者を友好的に感じさせる唯一の開発者ツールかもしれません。同時に、関連する情報と知識を拡張します。だから、IE8に対するあなたの偏見を放棄し、辛抱強く見続けてください。
IE8はまだインストールされていませんか？
あなたがフロントエンド開発者の場合は、このことをインストールしてください。公式バージョンがリリースされたためです。以前のベータ版とは異なり、今回は真剣に注意を払う必要があります。行ってダウンロードしてインストールしてください。以下はダウンロードアドレスです -
IE8中国語バージョンのダウンロードリスト
Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64ビット
Windows Vista 64ビット
Windows Server 2003 64ビット
Windows Server 2008 64ビット
IE8英語バージョンのダウンロードリスト
Windows XP
Windows XP 64ビット
Windows Vista
Windows Vista 64ビット
Windows Server 2003
Windows Server 2003 64ビット
Windows Server 2008
Windows Server 2008 64ビット
ああ、システム内のIE6またはIE7が終わったことを心配するかもしれません。はい、確かに、これは可能です。ただし、次のツールを試すことができます。これにより、複数のバージョンの複数のバージョンと共存することができます-IE -IETESTERの複数のバージョンの共存のためのソリューション
SuperPreview（ダウンロード付き）
開発者ツールに会いますこのことはファッショナブルな名前を変更しましたが、新しいものではありません。その前身はIedevtoolbarでした。ただし、以前はIEのプラグインだけでした。 IE8では、ブラウザはこのことを自動的に統合しました。これにより、少し素朴な名前が変更されただけでなく、機能の多くの強化もあります。
開発者ツールは、IE8のツールメニューで呼び出されるか、F12ショートカットキーを直接クリックすることもできます。
紹介する前に、このことができることについて話しましょう。ブラウザを使用してウェブサイトを閲覧するだけで、ページの作成方法を心配することなく。その後、このページを離れることができると思います。
全体として、開発者ツールは、フロントエンド開発者がページを開発するために設計されたツールです。一連のガジェットを提供して、HTMLコード、CSSコード、JavaScriptコードなど、ページバグを簡単に見つけることができます。同時に、彼はまた、非常に役に立たないが、カラーピッキング、スクリーンルーラーなどの匂いを叩くことができるいくつかの小さなツールを提供します。
わかりました、私たちはそれを見て、それが何ができるかを知っています。次に、メニューの順序に従って1つずつ紹介しましょう。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【ファイル】メニュー【すべてを取り消す】
開発者ツールで実行されるすべての操作はキャンセルされ、ページとDOMの構造が更新されています。
【カスタムインターネットエクスプローラー試行ソース】
sourceソースを試してください。なんてクソ名詞。簡単に言えば、それは次のとおりです。Webソースファイルを表示するために使用するエディター。たとえば、editplusを使用しています。
【やめる】
あなたのIQをs辱しないために、私はこれについてあまり言いません。さて、F12はパリティショートカットキーです。ちなみにこれについて言及しましょう。
【メニューを見つけます
クリックして要素を選択します
ショートカットキーCtrl Bは、写真のマウスICOボタンをクリックすることと同じ効果があります。最も一般的に使用される機能。また、パリティスイッチです。開くと、マウスでページ上の要素をクリックすると、変更された要素が選択され、DOM構造、CSSスタイル、および変更された要素のその他の情報がリストされます。
たとえば、上記の写真。左側の領域には、このハイパーリンク要素のDOM情報が表示されます。その親、子供、兄弟の要素ははっきりと見ることができます。
右側の領域には、要素スタイルの情報が表示されます。ラインによって取り消されるスタイルは、優先順位が十分に高くないため、スタイルが機能しなくなったことを意味します。デバッグ中、前のフックをフックオフできます。接続すると、このスタイルが削除されることを余儀なくされていることを意味します。さらに、各スタイルのプロパティは、マウスでクリックした直後に変更できます。これにより、修正されたページ効果が即座に表示されます。これは非常に便利です。
FirefoxのFirebugを使用した友人はこれに精通しているに違いありません。唯一の違いは、FireBugが下の優先度の低いスタイルを配置することです。それだけです。
[トレーススタイル]と[スタイル]ビューの機能は同じであり、選択した要素のスタイル情報を表示するために使用されます。唯一の違いは、視聴方法を変更したことです。あなたの習慣の特定の見方は、あなた自身の好みに依存します。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
[レイアウト]ビューは、選択した要素の箱入りモデル情報を表示できます。 Firebugよりも多くの情報を表示できますが、Firebugの方法は、カラーブロックを使用してページで直接表現する方法を好みます。
[プロパティ]ビューは、選択した要素の属性情報を表示できます。非常に満足しています。いくつかのプロパティをすぐに追加または削除して、ページをすばやくデバッグできます。
ああ、そうです。開発者ツールで選択した要素のスタイルまたは属性を変更するかどうかにかかわらず、それらは一時的なデバッグであり、Webページソースコードを変更しないことに注意する必要があります。
【無効になります】メニュー
【スクリプト】
ページ上のJavaScriptまたはVBScriptスクリプトは禁止されています。なぜそれを無効にするのですか？ページの堅牢性をテストします。ページデザインの要件が高い顧客の中には、顧客がスクリプトを無効にする場合、このページを使用できますか？まあ、はい、この関数は、これらのクソ顧客の倒錯したニーズをテストするために使用されます。
【ポップアップウィンドウブロッカー】
ポップアップウィンドウのフィルター。どのブラウザまたはセキュリティソフトウェアをポップアップウィンドウをフィルタリングできるかをテストするために使用されます。
【CSS】
CSSヌードフェスティバルが来ています！これを使用して、CSSで裸で実行するときにページの姿勢をテストします。これは、ページの堅牢性とアクセシビリティを検証するための重要なテストでもあります。ただし、現在中国のWebページにアクセスできる盲人はあまりいません。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【メニューを表示します【クラスとID情報】
ショートカットキーは、パリティスイッチであるCtrl Iです。開いた後、ページには密な赤い色のブロックが覆われていることがわかります。クラス名またはID名が表示されます。はい、これはクラスとIDの情報を表示する効果です。しかし、正直に言うと、この赤いスツールに誰が興味を持っているでしょうか？ページはパッチでいっぱいのbe食の服のように見えるだけでなく、それを完全に知らない-_- B ...
【リンクパス】
同上。ページ内のすべてのハイパーリンクを赤のすべてのボックスにし、リンクアドレスを表示します。
【リンクレポート】
リンクレポート機能を使用すると、開発者ツールはこのページのリンクレポートを生成するのに役立ちます。リンクの数、リンクアドレス、新しいウィンドウが開いているかどうかなどの情報が含まれていますが、このことの使用は何ですか？私も知りません。
【タブインデックス】
Tabindex属性を含むすべての要素を強調表示します。 Tabindexプロパティの設定は、Webページ要素がフォーカスを取得する順序を変更できます。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【アクセスキー】
AccessKey属性を含むすべての要素を強調表示します。 AccessKey属性を設定して、要素のショートカットキーを設定してフォーカスを取得します。
Source Sourceファイル】スタイル付きの要素ソース
選択した要素スタイル、HTMLコード、およびWebレベルの情報を含むソースファイルを生成します。
このコマンドが有効になる前に、要素を選択する必要があります。さらに、生成されたソースファイルは、選択した要素にのみ関連しています。
【ソースファイルdom（要素）
ショートカットキーはCtrl Tです。ソースファイルを生成します。このソースファイルには、選択した要素のDOM構造情報のみが含まれています。 FireBugを使用した友人は、コマンドコピー要素HTMLコードを考えることができます。実際、これはそれに似ています。これがウィンドウに生成され、FireBugがクリップボードに直接コピーされることだけです。
【ソースファイルdom（ページ）
ショートカットキーCtrl G.ソースファイルを生成します。このソースファイルには、ページ全体のDOM情報構造が含まれています。とてもクソ機能です。バグのせいかどうかはわかりません。この機能は、実際にWebページソースコードを表示することです。生成されたソースコードはDOM情報だけでなく、CSSおよびスクリプト情報でもあるためです。
【ソースファイルの元のステータス】
非常にクソ機能は、実際にWebページソースコードを表示することです。誰もが正しいマウスボタンを使用して、Webページを直接クリックすることを好む必要があります。
Autlineラインメニュー[概要]メニューは、明らかに条件を満たして表示する要素を概説するコマンドです。
【テーブルセル】
フォームテーブルの各セルをオレンジ色のワイヤーフレームでフレーム化することです。お知らせください。これがテーブルのセルであることがわかります。
【表面】
フォームをオレンジ色のワイヤーフレームに組み立てることです。お知らせください。これがフォームフォームであることがわかります。
【div要素】
ページ内のすべてのdiv要素にグリーンワイヤフレームを使用することです。お知らせください。これらはdiv要素であることがわかります。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【画像】
これは、ページ内のすべてのIMG要素を紫色のワイヤーフレームでフレーム化することです。お知らせください。これらはすべてIMG要素であることがわかります。
【任意の要素】
これはより強力です。任意のラベルと、ワイヤーフレームアウトに使用する色をカスタマイズできます。このメニューをクリックすると、下のダイアログボックスがポップアップします。とてもシンプルです。これ以上の説明はありません。
【位置決め要素】相対
それは緑に囲まれ、すべての要素が位置を持つ相対スタイルに囲まれます。
【位置決め要素】絶対
それは黒いワイヤーフレームで囲まれ、すべての要素が位置：絶対的なスタイル。
【位置決め要素】固定
それは青でフレーム化され、すべての要素が位置を持つもの：静的スタイル。
【位置決め要素】フロート
フロートスタイルのすべての要素、黄色のワイヤーフレームでフレーム化されます。
【クリアアウトライン】
Excelテーブルのようなさまざまな色のラインでページが作成されたら、このコマンドを使用してすべての行をクリアできます。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【画像】メニュー明らかに、このコマンドはページ上のさまざまな写真を制御します。
【画像を無効にする】
あなたのIQをs辱しないために、私はこれを言いません。説明すべき唯一のことは、IMG要素だけでなく、要素の背景画像も無効になるということです。
【画像サイズを表示】
とても良い機能。画像属性をチェックせずに、各画像のサイズをすばやく知ることができます。もちろん、ユニットはピクセルです。
【画像ファイルサイズを表示
とても良い機能。画像プロパティをチェックせずに、各画像のファイルサイズをすばやく知ることができます。もちろん、ユニットはバイトです。
【イメージパスを表示】
とても良い機能。画像属性をチェックせずに各画像のURLパスをすばやく知ることができます。また、コピーすることもできます。
【altテキストを表示】
IMG要素のalt属性のテキストを表示できます。ちなみに、写真のキーワードを積み上げないでください。そうしないと、SEO遷移最適化と簡単に考慮されます。
【画像レポートを見る】
ページを変更するための詳細な画像レポートを生成します。画像ごとに非常に詳細な情報が含まれています。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【キャッシュメニューキャッシュとクッキーメニューグループを管理します。これは、開発者にとって非常に快適な機能になります。
【サーバーから常に更新
非常に深いコマンドのようです。言い換えれば、ブラウザキャッシュを使用することは禁止されています。
【クリアブラウザキャッシュ】
ショートカットキーCtrl R.言うことは何もありません。以前の操作手順を簡素化するだけです。
メニューに[クリアブラウザーキャッシュ]に3つのドットがあることに気付いたかどうかはわかりません。これは、このメニューをクリックした後にダイアログボックスが確認されることを意味します。
【このドメインのブラウザキャッシュをクリア
ショートカットキーCtrl D.言うことは何もありません。このドメインのブラウザキャッシュをクリアするだけです。
cookieを無効にする】
言うことはありません。ビスケットは許可されていません。
【クリアセッションクッキー】
ブラウザ内のすべてのCookieをクリアします。あなたのフォーラムとコミュニティは再びログインするのを待っています。
domainドメインクッキーをクリア
このドメインでのクリアクッキーのみ。
cookieクッキー情報を見る】
このページに含まれるCookie情報を表示します。考えさえしないでください、パスワードは取得できません。
【ツール】メニューいくつかの有用なガジェットは、開発者ツールに含まれていますが、他の特殊な関連ツールよりも少し弱いです。しかし、緊急対応ではまだ十分です。
【サイズを変更する】
非常に便利なガジェット。ブラウザウィンドウを関連するサイズにすばやく調整できます。このようにして、Web解像度の互換性をテストする方がはるかに便利です。
【ルーラーを表示
簡単なルーラーツール。それを使用して、長さ、距離、その他の情報を測定します。ラインの色を変更できます。複数のタイトルも作成できます。薄すぎる場合は、拡大ガラス機能を使用できます。
【カラーピッカーを表示
シンプルなカラーピッキングツール。マウスをクリックして色を選択します。ただし、開発者ツールではあまりにも単純すぎる、私の作業ツールボックス-Colorpic -My Work Toolbox -Colorpicをお勧めします。
この記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。
【検証】メニューそれは間違いなく世界に血なまぐさい嵐を引き起こします（私が突然忘れてしまったこのイディオムを思い出させてくれたXiaoqiに感謝します。近い将来、数え切れないほどのKong Yijiが確実に生産されます。
【HTML】
ページのHTMLコードを確認します。このページは、W3CのHTML検証ツールに送信され、検証レポートが取得されます。
【CSS】
ページのCSSコードを確認します。このページは、W3CのCSS検証ツールに送信され、検証レポートが取得されます。
【ソース】
ページのソースファイルコードを確認します。このページはFeedValidator.org検証ツールに送信され、検証レポートが取得されます。
【リンク】
ページへのリンクを確認します。このページはW3Cの検証ツールに送信され、検証レポートが取得されます。
【ローカルHTML】
W3CのHTML検証ツールを開き、ローカルページを確認します。
【ローカルCSS】
W3CのCSS検証ツールを開き、ローカルページを確認します。
【アクセシティブ関数】wcagリスト
ページのWCAG（Webコンテンツアクセシビリティレポートページアクセシビリティ）を確認します。このページはContentQuality.com検証ツールに送信され、検証レポートが取得されます。
[アクセシブ関数]のリスト
508ページの標準を確認します。このページはContentQuality.com検証ツールに送信され、検証レポートが取得されます。
【複数の検証】
複数の仕様を確認するには、ページを同時に確認します。
ページの確認に関して、私はいくつかの言葉を言いたいです。実際、ページを起動する前にページを渡す必要がありますか？私はそれが完全に不要だと個人的に感じています。あなたが学生なら、象牙の塔の中に横たわってください。あなたは顧客であり、時間があるので、いつでもページを投げることができます。ただし、商業プロジェクトのためのパスに貴重なプロジェクトリソースを無駄にする必要はありません。顧客があなたのことを気にかけていないため、私が作ったページは多くの面でW3Cによって検証されています。本当に気にする顧客がいれば、私はあなたの欺ce能力を賞賛することしか言うことができません。
次のエピソードにご期待くださいこの記事では、開発者ツールのさまざまなメニューを簡単に説明しました。誰もがこの強力なツールを簡単に使用できると思います。しかし、より強力な機能についてはまったく言及していません。すべて、次の記事を楽しみにしています。次の記事では、JavaScriptデバッグ、ブラウザーモード、テキストモード、その他の機能の使用について詳しく説明します。