Web 開発者は、編集環境でのコードのオーサリングに多くの時間を費やしています。次に、ブラウザーにジャンプして、組み込みの開発者ツールを使用して、製品の UI をデバッグおよび微調整します。これの問題は、微調整とデバッグの結果がソース コードに反映されないことです。 Microsoft Edge では、現在、議論のために公開されているいくつかのソリューションに取り組んでいます。それらについてのフィードバック
本を読むよりビデオを見たい場合は、こちら3 分間の紹介:
開発者ツールの微調整と変更に関する現在の問題
現在、ブラウザーの DevTools は、非常に洗練されたビジュアル ツールを提供しており、使用中に CSS 構文などを学習できます。これらのツールは、物事を視覚的に変化させます。たとえば、任意の CSS フレックスボックス プロパティの横にある「フレックスボックス」アイコンをクリックすると、そのスタイル変更の結果をプレビューするポップアップが表示されます。
これは優れたデバッグ エクスペリエンスであり、CSS 構文を常に検索する必要がなくなります。
スタイル エディターは、現在のコードの部分的なビューのみを表示することで機能します。ブラウザで選択された要素. そのコードが Web ページの残りの CSS のどこにどのように収まるかわかりません. スクロールして残りのコードを表示することはできますが、元のコードも表示する方がよいのではないでしょうか. CSS ファイル?
CSS ファイル自体へのリンクをクリックすると、そこにアクセスできます。これにより、ソース ツールに移動し、スタイル エディターから離れます。
これは編集者ですブラウザの開発者ツールに組み込まれていて、出てきたときには気の利いたものでしたが、最近のエディタに期待するものと比べると輝きがありません。ツールをドッキング解除して独自のウィンドウで使用しない限り、便利な編集作業を行うための十分な画面領域もありません。
ビジュアル ツールを使用して CSS を微調整するか、ソース エディターを使用するかにかかわらず、1 つの問題が残ります。
Changes ツールがあることをご存知ですか?
Browser Developer Tools には、これに役立つ機能は、あまり使用されておらず、ほとんど知られていない変更と呼ばれます。コマンド メニューまたはコンテキスト メニューからアクセスでき、このセッションで変更したすべてのファイルの差分ビューが表示されます。このツールを使用して、変更をコピーしてソース ファイルに貼り付けることができます。
Firefox では、変更をライブで更新する変更ツールのアプローチが少し異なります。また、コピーして貼り付けるための CSS ファイルも作成されます。このファイルには、これらの変更を貼り付けるファイルと、削除または追加された内容を説明するコメントが含まれています。
これは正しい方向への良い一歩ですが、コードをコピーして貼り付けるための追加の手順が必要です
Visual Studio Code を含む改善されたワークスペース フローワークスペース は長い間使用されてきましたが、あまり使用されていません。そのため、ブラウザーの DevTools とコード エディターの間で変更をライブ同期できることをより明確にしたいと考えました。また、ソース ツールのエディターは、ユーザーが使用したいものではないことにも気付きました。
既に使用しているエディターの利便性と、ワークスペースのファイルへのライブ変更の利点が得られるとしたら?
Microsoft Edge のバージョン 96 以降、「Visual Studio Code でソース ファイルを開く“.
これを有効にして開発者ツールを再起動したら、ハード ドライブ上のファイルまたは次のようなローカル サーバー アドレスに移動します。 localhost または 127.0.0.1 を実行すると、このファイルのルート フォルダーを識別するように求められるプロンプトが表示されます。セッションをオプトアウトするか、このオプションを表示しないこともできます。
一度フォルダーを選択すると、ブラウザーはそのフォルダーへのアクセス許可を求めます。これは、ソース ツールでワークスペースを使用する場合と同様です。
[スタイル] ペインで何らかの変更を行うと、ディスク上のファイルが変更されます。違いは、Visual Studio Code をコンピューターのエディターとして使用している場合、ファイルへのリンクをクリックすると、ソース ツールのエディターではなく、このエディターでファイルが開かれることです。追加したすべてのカスタマイズと拡張機能を使用して、慣れ親しんだ環境にとどまります。
CSS の変更が永続的になるので、これは素晴らしいことです。問題は、それらがあまりにも邪魔になる可能性があることです.サイズを 1 単位ずつ変更するなど、スタイル ツールを変更すると、ハード ドライブ上のファイルが変更されます。ライブ リロード サーバー ソリューションを使用したり、フォルダーを監視してビルド プロセスをトリガーするスクリプトを使用したりすると、すぐに面倒になる可能性があります。
CSS ミラー編集
最新バージョンのEdge DevTools for Visual Studio Code 拡張機能では、「CSS ミラー編集」と呼ばれるオーサリング/デバッグ ループを閉じる別の方法を導入しました。必要に応じて、40 秒の紹介ビデオをご覧ください。
この機能を有効にすると、スタイル ツールで行った変更はソース コードにも影響しますが、ファイルは Visual Studio Code に保存するまで変更されません。変更内容が失われないという利点があり、ハード ドライブ上のファイルを完全に制御できます。
バージョン管理を使用すると、行ったすべての変更をファイルを保存したら、差分ビュー。これにより、ファイルへの変更が少なくて済み、Workspaces ワークフローのすべての利便性が得られます。
このエクスペリエンスを改善するにはどうすればよいですか?
適切なコンポーネントがすべて揃っているようです。開発者とエンドツーエンドのオーサリングおよびデバッグの経験を提供する場所。これらのアプローチについてご意見をお聞かせください。
フィードバックがある場合は、Twitter (@EdgeDevTools、CSS ミラー編集に関する GitHub のこの問題 にコメントしてくださいa> または、ブラウザーの DevTools に組み込まれているフィードバック ツールを使用します。
– Chris Heilmann、プリンシパル プログラム マネージャー、Microsoft Edge
