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

[Chrome] DevToolsのWorkspaceでローカルプロジェクトをライブエディット&デバッグする

More than 5 years have passed since last update.

※ 執筆時点ではCanaryで利用できます

ChromeのDevToolsに「Workspace」という機能が追加されました

Workspaceを使うとDevToolsをエディタとして使うことができます

ローカルフォルダの追加

  • DevToolsを開いて歯車アイコンからSettingsを開くと項目に"Workspace"があるので選択
  • Add folderでフォルダを選択
  • リソースへのアクセス許可を求められるので許可を選択

ss01.png

Sourcesパネルに選択したフォルダが追加される

ss02.png

リソースの編集の自動反映を有効にする

ブラウザのリロードなしに編集・保存したファイルが反映されるようになる(htmlはむり?

  • 右クリックメニューから"Map to network resource"を選択

ss03.png

  • ダイアログでDevToolsの再起動を求められるので許可(Chromeの再起動ではない)

ss04.png

  • 右側のエディタ部分でCSSを編集すると保存していなくても反映される

ss06.png

JSの変更も更新なしで反映される

ページ読み込み時の状態
myFuncは空

スクリーン05.png

編集してctrl(cmd)+sで保存

スクリーン06.png

ブラウザの更新をせずにコンソールからmyFuncを呼び出してみると反映されてるのを確認できる

スクリーン07.png

変更履歴を表示する

ファイルを保存する度に更新履歴が作られる

  • 右クリックから"Local modifications"を選択
  • 画面下に履歴がでてくる

スクリーン03.png

スクリーン08.png

変更履歴から元に戻す

  • 戻したい履歴の"apply revision content"をクリックすると

スクリーン09.png

もどる!

スクリーン10.png

Sassの編集と自動反映

chrome://flags/を開いてデベロッパー ツールのテストを有効にするを有効にするとDevToolsでSassのサポート機能が追加されます。

スクリーン11.png

再起動後にDevToolsのSettingsに"Experiments"という項目がでてくるのでその中の"Sass stylesheet debugging"にチェックをつけて再起動します。

スクリーン13.png

そのあと

スクリーン14.png

"General"の中の"Sources"のところにある "Auto-reload CSS upon Sass save"にチェックを入れます。
("Enable source maps"にもチェック

Sourcemapを使うにはSassのコンパイル時に--sourcemapオプションをつけてwatchする必要があります。
(Sassのpre version?じゃないと出来ない?詳しくは参考URL参照…)

Elementsパネルの要素のスタイルのところが'~.scss:5'とかになってればSourcemapでスタイルとsccsがリンクした状態になります。

この状態でworkspaceにある.scssファイルを編集すると保存しなくてもスタイルが反映されるようになる
(らしい。windowsの環境構築で折れたので確認できず。macでできたら追記します…

詳しいことはURLの先にある動画とかで見れます。
Developing With Sass and Chrome DevTools

微妙なAutocomplete機能

Experimentsにある"Enable text editor autocompletion"にチェックをいれるとオートコンプリートが使えます

文字入力してctrl+spaceを押すとそのファイル内にある単語の中から同じ文字列になりそうなやつが補完されます


簡単な使い方としてはこんな感じです。

コードの補完がないのでちょっとした確認や表示の修正なんかには使えそう。
今回しっかり確認できなかったSassの即時反映なんかはイイ感じな気がする。

今後拡張されればデキる子になりそうな予感。


参考:
Improving Your 2013 Productivity With The Chrome DevTools
Editing Local Projects With Chrome DevTools Workspaces
First Look: Workspaces - Simplifying Your Find & Fix Workflow With The Chrome DevTools
Developing With Sass and Chrome DevTools

nakajmg
フロントの人。JavaScript/CSS/HTML
http://nakajmg.github.io/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした