Web開発者として、編集環境でコードを作成する時間をたくさん費やします。その後、内蔵の開発者ツールを使用して製品UIをデバッグして微調整するために、ブラウザに飛び越えます。これに関する問題は、微調整およびデバッグの結果がソースコードに反映されていないということです。 Microsoft Edgeでは、現在ディスカッションのために開かれているいくつかのソリューションに取り組んでいます。

読む代わりにビデオを見ることを好む場合は、ここに3分の紹介があります。

埋め込みビデオはInternet Explorerではサポートされていません – YouTubeの時計

開発者ツールの調整と変更に関する現在の問題

今日、ブラウザのDevToolsはあなたがそれらを使用しながらあなたに教える高度に洗練された視覚的なツールを提供します。これらのツールは物事を視覚的に変えます。たとえば、任意のCSS FlexBoxプロパティの横にある[FlexBox]アイコンをクリックすると、そのスタイルの変更の結果のプレビューが表示されます。

これは優れたデバッグ体験であり、常にCSS構文を検索する必要があるのを防ぎます。ただし、これらのデバッグワークフローに表示されているコードがコードエディタで書いているものではないため、切断があります。

スタイルエディタは、ブラウザで選択されている現在の要素のコードの部分的なビューのみを表示することによって機能します。そのコードがどこでWebページであなたのCSSの残りの部分にどのように収まるのか知りません。スクロールしてコードの残りの部分を表示することができますが、元のCSSファイルも表示されないほうがいいですか?

CSSファイル自体へのリンクをクリックすることによって、それにアクセスすることができます。これにより、ツールをソースとスタイルエディタから離します。

これは、彼らが出てきたときに気の利いたものであるが、最近編集者から予想されるものと比較して輝かないブラウザの開発者ツールに埋め込まれたエディタです。ツールをドッキングして自分のウィンドウでそれらを使用しない限り、便利な編集経験のために十分なスクリーンエステートがありません。あなたがあなたのCSS、またはソースエディタを微調整するためにビジュアルツールを使用しているのですが、1つの問題が残っています。多くのことを変更しました、そして、あなたが望ましい結果に到着しました、あなたはどのようにしてあなたのソースコードにどのような変更を返しますか?

変更ツールがあることを知っていましたか?

ブラウザ開発者ツールには、これを使用していない変更が多く、ほとんど不明であるという機能があります。コマンドメニューまたはコンテキストメニューからアクセスでき、このセッションで変更したすべてのファイルの差分ビューを表示できます。このツールを使用して、変更をソースファイルにコピーして貼り付けることができます。

Firefoxは、変更された変更でライブを更新する変更ツールのわずかに異なるアプローチを使用します。コピーして、コピーしてコメントを貼り付けるためのCSSファイルを作成し、これらの変更を取り消すか削除または追加されたものを貼り付けます。

これは正しい方向に良いステップですが、コードをコピーしてエディタに貼り付けるための追加の手順が必要です。

Chromium Developer ToolsのVisual Studio CodeworkSpacesを含む改善されたワークスペースフローは長い間歩み続けていますが、その多くの使用を見ていません。だからこそ、ブラウザのDevToolsとコードエディタの間の変更のライブ同期を持つことができることをより明白にしたかった理由です。また、Sourcesツールのエディタが人々が使用したいものではないことも認識しました。

あなたがすでに使用しているエディタの利便性とワークスペースのファイルへのライブ変更の利点がある場合はどうなりますか?Microsoft Edgeのバージョン96から、「Visual Studio Codeのオープンソースファイル」というDevToolsで新しい実験を見つけることができます。 。

これをオンにして開始した開発者ツールを回復したら、ハードドライブ上のファイルに移動したり、localhostや127.0.0.1のようなローカル・サーバー・アドレスに移動したりすると、このファイルのルートフォルダを識別するように求めるプロンプトが表示されます。セッションをオプトアウトすることも、再度このオプションを表示しないでください。

フォルダを選択すると、ブラウザはそのフォルダへのアクセスを許可するための許可を求めます – [ソース]ツールでワークスペースを使用しているときに必要なように、あなたがたくさんのように似ています。

[スタイル]ウィンドウの変更を開始したら、ファイルはディスク上で変更されます。違いは、コンピュータ上のあなたのエディタとしてVisual Studioコードがある場合、ファイルへのリンクをクリックすると、ソースツールの1つの代わりにこのエディタでそれらが開きます。あなたがそれに追加したすべてのカスタマイズと拡張機能を使って使用している環境に滞在します。

これはあなたのCSSの変更が今恒久的なものです。問題は彼らが邪魔になり過ぎるかもしれないことです。サイズを1つの単位で変更するようなスタイルツールの変更は、ハードドライブの変更のファイルになります。 Live Reload Serverソリューションまたはフォルダを視聴してビルドプロセスをトリガーするスクリプトを使用する場合、これは迅速にMessyになることがあります。

CSSミラー編集

最新バージョンのEdge DevToolsのVisual Studioコード拡張機能では、「CSSミラー編集」というオーサリング/デバッグループを閉じるためのさまざまな方法が導入されました。あなたが望むなら、あなたはこの40秒のビデオの紹介を見ることができます。

埋め込みビデオはインターネットエクスプローラでサポートされていません – Watch On YouTubeifこの機能を有効にすると、スタイルツールで行われた変更もソースコードに影響を与えますが、ファイルはVisual Studioコードで保存するまでファイルは変更されません。あなたはあなたの変更を失っていないという利点を得て、あなたはハードドライブ上のファイルを完全に制御し続けます。

バージョンコントロールを使用する場合は、ファイルを保存したら、差分ビューとして行ったすべての変更を確認できます。これにより、ファイルへの変更が少ないワークスペースのワークフローのすべての利便性があります。

この経験をよりよくするために何をするべきですか?

開発者とエンドツーエンドのオーサリングとデバッグの経験を与えるための適切なコンポーネントがすべての場所にあるようです。私たちはあなたがこれらのアプローチとあなたが好むものについてどう思うか知りたいと思います。

フィードバックがある場合は、TwitterのEdge Devtoolsチームに@edgedevtoolsで、Githubでこの問題についてコメントしてください。

出典: https://blogs.windows.com/msedev/…l-studio-code/

By admin

Leave a Reply

Your email address will not be published.