【Chrome Developer Tools入門】SourcesパネルでCSSやJavaScriptを編集しよう！

Sourcesパネルでは下記のことを行うことができます。

●CSSやJavascriptの編集

SourcesパネルでCSSやJavascriptを編集することができます。ただし、大元のファイルを編集しているわけではなく、あくまでブラウザ上での変更となります。更新すると編集個所は元に戻ります。また、いろいろ試して「Ctrl」＋「ｓ」で保存していくと編集履歴が残ります。右クリックメニューの「Local Modifications」メニューで履歴を確認することができます。

●編集結果をファイルに出力

SourcesパネルでCSSやJavascriptを編集し、右クリックメニューの「SaveAs」をクリックするとファイルとして保存することができます。このファイルと元のファイルと差し替えることで編集結果を反映させることができます。

●Javascriptの修正①

SourcesパネルではJavascriptの記述内容に誤りがある場合は赤い×印でエラー表示されます。例えば「SyntaxError　～」「myscript.js:2」のようにエラーの内容とエラーの場所が表示されますのでエラーとなっている箇所の確認が容易にできます。なお、エラー個所を修正しても大元のファイルは修正できませんので、右クリックメニューの「SaveAs」よりファイルを上書き保存して修正する必要があります。