ソースファイルをChromeで直接編集する方法

ChromeブラウザでWebページソースコードを直接編集し、退屈な編集に別れを告げる - 更新ループ！この記事では、Chrome開発者ツールを使用してHTML、CSS、およびJavaScriptファイルを直接編集し、開発を迅速に繰り返す方法をガイドします。

Web開発者の毎日のワークフローは通常、エディターにHTML、CSS、およびJavaScriptコードを記述し、ブラウザでページを開き、開発者ツールを使用して問題を発見した後にデバッグし、コードを変更してコピーしてコピーします。編集者、その後ページをリロードします...ホットリロードのようなツールはプロセスを簡素化しますが、多くの開発者はまだ開発者ツールと編集者を切り替えます。 実際、Chromeを使用すると、変更されたコンテンツがファイルシステムに自動的に保存され、エディターに更新されます（エディターがファイルの変更の自動更新をサポートしていると仮定します）。

ステップ1：開発者ツールを開始

Chromeを開き、ローカルファイルシステムまたはサーバーにページをロードしてから、[Tools More]メニューを介して開発者ツールを開きます。 > Shift i （オペレーティングシステムに応じて）。 [ソース]タブに切り替えて、ファイルエクスプローラーを表示します： このビューでは、CSSおよびJavaScriptファイルを直接開いて編集できますが、ページを更新した後にこれらの変更が失われることに注意してください。

ステップ2：ワークスペースフォルダーを関連付けます

[Filessystem]タブをクリックし、[ワークスペースにフォルダを追加]をクリックします。作業フォルダーを選択するように求められ、Chromeがフォルダーにアクセスできるようにするように求められます。 Explorerがシステム上にファイルを表示します。クリックして開くことができます。

ステップ3：コードを編集して保存

ここで、コードを直接編集できます。未保存の編集には、ファイルラベルにアスタリスク（*）がマークされています。

CSSの変更はすぐに更新されますが、HTMLとJavaScriptの場合、通常、ファイルをファイルシステムに保存してブラウザを更新して表示するには、

CTRL/CMDs

を押す必要があります。効果。

また、ファイルラベルを右クリックして「As ...」を選択して、ファイルのコピーを別の場所に保存することもできます。 ステップ4：変更を表示および元に戻す

変更を表示するには、ファイルラベルを右クリックして、コンテキストメニューから「ローカル変更...」を選択します。

diffに似たビューが表示されます。ペインの左下隅にある矢印アイコンは、すべての変更を元に戻し、ファイルを元の状態に復元します。

Chromeの開発者ツールは、一般的に使用されるコードエディターの完全な代替品ではありませんが、迅速な変更を加えたり、エディターがインストールされていない他のコンピューターで作業する場合、非常に便利なツールです。

Chromeがソースファイルを直接編集するためのよくある質問

Chromeでソースコードを編集できますか？

はい、Chromeの組み込み開発者ツールを使用して、Webページのソースコードを直接編集できます。 開発者ツール（F12またはCTRL Shift Iを押す）を開き、[Elements]タブに移動します。編集するHTML要素を見つけ、HTMLとして右クリックして編集するか、コードをダブルクリックします。変更を行った後、Enterを押して変更を適用すると、ページがすぐに更新されます。これらの変更は一時的なものであり、現在のブラウザセッションにのみ影響します。

Chromeの「HTMLとして編集」のショートカットキーは何ですか？

Chrome開発者ツールの「HTMLとして編集」専用のショートカットはありません。ただし、Ctrl Shift C（MacのCMDオプションC）を使用して「検査」モードをアクティブにし、編集する要素をクリックして同じ機能を達成することができます。

Chrome開発者ツールでJSファイルを編集する方法は？

Chrome開発者ツールで[ソース]タブを開き、編集するJavaScriptファイルを見つけ、クリックして右側のコードエディターパネルで開き、変更を行います。編集が完了した後、Ctrl s（CMD s on Mac）を押して変更を保存します。これらの変更は一時的なものであり、現在のブラウザセッションにのみ適用されることを忘れないでください。 WebサイトのJavaScriptファイルを永続的に変更するには、ファイルをホストするサーバーにアクセスし、サーバーで直接編集できる必要があります。

以上がソースファイルをChromeで直接編集する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。