tincrのサムネイル

ファイルを編集した際にした際にブラウザをリロードしてくれるツールではCodeKitが有名ですが、Mac専用の上に、有料なので、SassやLESSなどを使用していない限りは使用している人はそんなに多くはないのかなと思ってます。

Tincrは無料で利用できるChromeの拡張機能です。Tincrもブラウザの更新を行ってくれるツールの一つです。

Tincrの使い方

まずTincrをChrome Storeからインストールしましょう。

Tincr

確認ができたら、Googleのディベロッパーツールを開いて下さい。以下のようにTincrという項目が追加されているはずです。もし、項目がなければChromeの設定から拡張機能を選択し、Tincrを有効にしてあげてください。

ディベロッパーツールでTincrを確認

Tincrの項目を選択すると、次のような画面が表示されます。

Tincrセッティング

以下、設定手順です。画像を参考に設定してみて下さい。

  • ローカルホストを設定していないと使えないようなので、XAMPPやMAMPでローカルホストを設定しておきましょう。
  • Project TypeはHTTP Web Serverで問題ないはずです。必要に応じて変更してください。
  • Root Directoryはローカルホストに設定したディレクトリと同じディレクトリにしましょう。
  • Auto-Refreshにチェックを入れると、CSSやJavaScriptに変更を加え保存した時点でブラウザが更新されます。残念ながらHTMLは変更を加えても自動更新されません。
  • Auto-SaveはChromeのディベロッパーツールでCSSを編集した際に、元のCSSにも反映してくれるのでこれが結構便利です。反映されると困るというときはチェックを外しておきましょう。
  • Enable Loggingは必要な方のみチェックを入れてください。

以上です。他にも色々なツールがありますが、Tincrは簡単に扱えるほうだと思うので、よかったら試してみてください。


※この記事は WordPress に投稿した記事を変換したものです。一部不自然な表示があるかも知れません。ご了承ください。