Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

こちらの記事で
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とかどうやって編集するんだろう?
もうちょっと調べてみよう;

今後に期待です。

nex_32
札幌で色々やってます。 Webとか携帯アプリとか
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away