Web Essentials のブラウザ Link_html/css_WEB-ITnose

Web Essentials の機能ディレクトリに戻る

この記事のディレクトリ

• 機能

ブラウザ リンクが実行されている場合、メニューが Web サイトに挿入され、Web Essentials はすべての機能を使用できますメニューitems 利用可能な一連のブラウザ リンク機能。

ブラウザ リンクの詳細については、下の画像をクリックしてください:

ブラウザ リンクを有効にした後、Web サイトを開くと、以下に示すようにフローティング ツールバーが表示されます:

以下では、ブラウザ リンクのすべての機能を紹介します。このツールバーを 1 つずつ表示します:

自動非表示

このメニューを常に表示したくない場合は、チェックボックスを選択してデフォルトで非表示にすることができます。このメニューの表示/非表示を切り替えるには、Ctrl キーを押すだけです。

検査モード

ブラウザ ページの DOM 要素の上にマウスを置くと、Visual Studio はソース ファイルを開き、その特定の DOM 要素が生成された正確な場所を見つけます。

デザイン モード

は

検査モード に似ていますが、最終的にブラウザーで DOM 要素をクリックすると、要素が編集可能になります。編集内容はリアルタイムで Visual Studio に渡され、ソース ファイルが更新されます。以下の図に示すように:

F12 変更を保存

複数のブラウザーの開発者ツールで編集を行う場合、

F12 変更を保存 をクリックして、変更された内容を Visual Studio のソース ファイルに転送できます。 。これは CSS でのみ機能します。下の図にあるブラウザ コンソールと VS のコードの変更を注意深く観察してください。

F12 自動同期

[

F12 変更を保存] を手動でクリックする必要はなく、変更を Visual Studio にリアルタイムでストリーミングできます。私はこれを試しません、あなた自身で試してみてください！

未使用の CSS を検索

このボタンをクリックすると、Web サイトで使用されているさまざまな CSS ルールの記録が開始されます。サイト内を移動し、完了したらボタンをもう一度クリックするだけです。未使用の CSS のリストが Visual Studio エラー リストに生成されます。下の図からわかるように、更新しなくても、未使用の CSS が見つかりました。

ベスト プラクティス

Web Essentials は、

webdevchecklist.com のいくつかのルールをベスト プラクティスとして使用します。違反が見つかった場合は、エラー リストにメッセージが表示されます。