【初心者向け解説】minifyされたJavaScript / CSS を元に戻す方法

こんにちは、現役エンジニアの inno_tech です。

minifyされたJavaScript や CSSファイルを元に戻す方法をお探しでしょうか？

本記事を見れば、Google Chrome上を使ってminifyされたファイルを元に戻せるようになります。

本記事では、Google Chromeの開発者ツール(デベロッパーツール)で動作確認しています。

JavaScript / CSSファイルのminify

ウェブアプリケーションのリリースの場面では、JavaScript や CSSファイルのデータサイズを小さくするため、minifyという処理がされることが多いです。

minifyをすると、不要な改行やインデントが削除されファイルサイズが小さくなりますが、人間の目ではとても読める状態ではなくなります。

今回は、minifyされたファイルを自動的にフォーマットし、人間が読める状態にする方法を紹介します。

minifyされたファイルを自動フォーマットする方法

Google Chromeで対象のウェブページにアクセスし、Ctrl + Shift + Iで開発者ツールを起動します。

次に「Sources」パネルを開き、表示されるファイルツリーから確認したいファイルを選択します。

下の例では、minifyされたCSSファイルを開きました。

ソースコードが表示されているパネルの左下に｛ ｝のボタンがあります。これをクリックすると、ソースコードが自動フォーマットされます。

フォーマットにより、改行やタブインデントが復元されていることがわかります。

同様な手順で、JavaScriptファイルもminifyされた状態から元に戻すことができます。

まとめ

楽天市場ランキング1位になったモバイルモニターが気になる方はこちら。USB Type-Cだけで動作し、持ち運びに便利なのでゲームやPC用のサブディスプレイとしても人気があります。

以前書いたモバイルモニターのレビュー記事はこちら。

あわせて読みたい

【電源アダプタ不要】USB TypeCで動作するモバイルモニター EVICIV EVC-1506 独自レビュー ノートPCの画面だけでは作業しづらいため、モバイルモニター EVICIV EVC-1506(15.6inch)を購入しました。 USB経由の電源だけで動作する、モニターです。 電源アダプタ不...

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!