LoginSignup
19

More than 5 years have passed since last update.

Chrome Dev Toolsの"Workspace"を使う方法

Posted at

こちらの記事で
http://www.atmarkit.co.jp/ait/articles/1308/06/news086.html
Chrome上からHTMLを編集できると聞いたので、
Chrome Dev Toolsの"Workspace"を早速試してみた。

以下手順---------------------------------

01.ブラウザでこのURLを開いて
chrome://flags

02."デベロッパー ツールのテストを有効にする"を有効にする

03.Chrome再起動

04.適当なページを開いてChrome Developper Toolsを起動(F12でもok)

05.右下の設定ボタンを押してオプションを開く

06.左メニューの"Experoments"を開く

07."File system folders in Sources Panel"を有効にする

08.Chrome Developper Toolsを一度閉じて、もう一度開く

※これで"Workspace"が使えるようになる

09.右下の設定ボタンを押してオプションを開く

10.左メニューの"Workspace"を開く

11.どのURLはどのローカルファイルに対応する?を設定する。

12."File systems"にプロジェクトのフォルダを設定する。

13.確認ダイアログが出るから"許可"する

14."Mappings"に"どのURLが""どのフォルダか"追加する。
 IDEでいうところのプロジェクトを決めるみたいな。

※これでプロジェクトの設定が完了

15."Mappings"のURLにブラウザアクセス

16.Chrome Developper Toolsを開く

17."Source"タブからファイルを選び、ガンガンHTMLを書く

18.Ctrl + Sでファイル保存

19.あら不思議!ローカルファイルが更新されています!

----------------手順ここまで

感想
ブラウザ上で直接編集なんで、スピードがめちゃ早い。
入力補完が聞いたら最高

実用にはあと一声!

PHPとかどうやって編集するんだろう?
もうちょっと調べてみよう;

今後に期待です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19