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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

この記事のタイトル: 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 で行った変更がソースコードに永続化されていることを確認します。