Google ChromeはCSSとjsを変更して同時にファイルに保存します (翻訳)_html/css_WEB-ITnose

この記事のタイトル: Google Chrome は CSS と js を変更し、それらを同時にファイルに保存します。

文章執筆者：こんにゃくリン。

英語の原文: http://www.stephensaw.me/google-chrome-devtools-source-maps/

Google の Chrome DevTools ソース マップ

Google の Chrome DevTools はますます良く開発されており、特にその急速な開発のパフォーマンスBlink と V8 の統合により、DevTools がより優れたものになります。最近、ソース コードを編集する正しい方法は、ソース マップされた Chrome DevTools を使用することであることを発見しました。

ソース マップ

ソース マップがオンになっていることを確認するには、DevTools 設定の歯車アイコンに移動し、ソース マップ オプションが選択されていることを確認します。

(F12 を押して歯車アイコンをクリックします。)

ワークスペースを設定する

この機能を有効にした後、ワークスペースを設定する必要があります。これは、ソースコードが配置されているフォルダー (またはローカルフォルダー)サーバースクリプト）。

メニューから開発者ツールを開き、ショートカット F12 を押すか、ページ上の任意の要素を調べ、右下隅にある設定歯車アイコンをクリックして設定ダイアログをポップアップし、ワークスペースの左パネルをクリックしてフォルダーを参照しますそこにソースの場所があり、Chrome が許可をリクエストできるようにします。

これで、Chrome ブラウザがローカル フォルダーに正しくマッピングされました。これで、Chrome のフォルダーからページをロードできるようになりました (ブラウズ ローカル IP を使用できることに注意してください)。

index.html という HTML ページ、app.js という JavaScript ファイル、app.css という CSS ファイルがあるとしましょう。次のようになります

アイテムが 2 つあります (いいえ、気に入っています) big)、そのうちの 1 つは ID を持ち、ボタンがクリックされたときにテキストを表示するために使用されます。クリックイベントに接続されるボタンをページに配置し、JavaScript 関数で CSS は色と背景色を変更するだけです。

JavaScript の編集

これで、開発者ツールの [ソース] タブに移動し、パネルから JavaScript ファイルを見つけて、Chrome からソース コードにアクセスできるようになります。

ワークスペースにフォルダーを追加しないと、そこにある ChromeDev フォルダーが表示されません。

フォルダーが表示されないという問題が時々発生しますが、DevTools ではどのファイルにマップすればよいかわからないため、マップしたいコードを右クリックして [ファイル システム リソースにマップ] を選択する必要があります。

その後、一致するファイル名のリストから必要なものを選択します。

これまでのところ、そこにあるボタンは何もしません。DevTools 内に関数 SayWhat を直接追加しましょう。コードを編集すると、変更を加えて保存しなかったことを示す小さな * タグが表示されます。

それでは、Cmd + S または Ctrl + S を押してコードを保存してください。この場合、ページをリロードしたり、コードをリロードしたりする必要はなく、ボタンをもう一度クリックするだけで機能します。私の経験から言えば、JavaScript をデバッグする場合でも、JavaScript は非常に強力に機能し、同様に効果的です。

すべての変更に満足したら、ローカル フォルダーに戻り、DevTools で行った変更がソース コードに永続化されていることを確認します。

調整中

ちょっと待ってください！変更したコードを戻したいのに、開発ツールによってソース コードが上書きされてしまった場合はどうすればよいですか?

問題ありません。DevTools はコードを変更し続けるのに役立ちます。作業中のファイルを右クリックし、「ローカル変更」を選択するだけです。

変更履歴が表示され、特定のリビジョンに戻すことができます。

DevTools は変更を追跡する便利な方法を提供しますが、私は念のためにコピーで作業することを好みます。

これらは DevTools でできることのほんの一部であり、Chrome チームはさらに機能的なツールを追加し続けると確信しています。

タグ: chrome、devtools、JavaScript、ソースマップ