2013-02-18

Tincrを使って、Chrome Developer Toolsでの変更をソースコードに反映する

JS開発ツールの話。Cmd+Opt+j や Cmd+Opt+i が手癖になってる人向け。タイトルのTincrはChrome Developer Toolsのプラグインで、ファイルシステム上の変更を検知してブラウザをリロードするのと、その逆方向であるDeveloper Tools上で加えた変更をファイルに反映してくれる。前者はyeoman serverも同じ事ができるが、後者の機能は無い。

Tincrのインストール

Chrome Developer Toolsに追加されればOK

プロジェクトの設定

Tincrに用意されているプロジェクトタイプは次の5つ。
  • Ruby on Rails
  • Chrome Extension
  • Http Web Server
  • Atlassian Plugin
  • Configuration File
yeoman server だったり python -m SimpleHTTPServer でサーバー起動して動作確認をする場合はHttp ServerでOK。URL Rewriteしている場合はマッピングが必要なのでConfiguration Fileを選択して設定ファイルを書く必要がある。
試しに次のようなファイル構成の時に、ローカルでWebサーバーを起動してブラウザで開く。

--> tree app
app
├── 404.html
├── favicon.ico
├── index.html
├── robots.txt
├── scripts
│   ├── main.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
└── styles
    └── main.css
Chrome Developer ToolsのTincrタブでProject Typeを選択、Http Serverの場合はルートディレクトリの設定のみ。
Enable Loggingにチェックを入れておくとConsoleタブにログが出てくる。
Content for url http://localhost:8000/scripts/main.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/main.js
Content for url http://localhost:8000/scripts/vendor/modernizr.min.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/vendor/modernizr.min.js
Content for url http://localhost:8000/styles/main.css matches local file /Users/tnishibayashi/dev/test/tinkr/app/styles/main.css
ローカルからロードしているmain.jsとmain.css、modernizr.min.jsが見つかった事が出力される。

ファイルの修正と同期

Sourcesタブでmain.js, main.cssをおもむろに修正して保存(Cmd+s)するとページとローカルファイルの両方に反映される。Sassもそのままいける。JSファイルであればブレークポイントとの組みあわせで見つけたバグをその場で修正できる。
Sourcesタブの他には、Elementsタブでタグを選択してMatched CSS Rulesに出てきたスタイルに加えた変更がファイルに反映される。もちろん同期対象のcssファイル内で定義されている物に限る。


最近のトレンドとか

今のトレンドはビルドパイプラインも使いつつ、開発中は個々のファイルを未加工のままブラウザにロードするスタイルだろう。特にTincrでは結合後のJSファイルやコンパイル後のsassを編集できてもあまり嬉しくない。ファイルが大量になってくるとロードするのも大変だけど、そこはRequire.jsあたりにまかせても良さげ。



このエントリーをはてなブックマークに追加