Chrome デベロッパーツール Workspaces機能の設定

Chrome デベロッパーツールにはWorkspacesという、ローカルファイルを直接編集したり保存することができる機能があります。デベロッパーツールを外部エディタとして使い、変更内容がページのリロードなしに即座にブラウザの表示に反映されます。

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 35

Workspaces機能を使うには、以下の2つの設定が必要です。

(1)Workspaceフォルダの追加
ローカルフォルダをデベロッパーツールでアクセスするために、Workspaceフォルダとして追加します。

(2)ネットワークリソースへのマッピング
Workspaceフォルダ内にあるファイルを、ネットワークリソースとしてマッピングします。

Workspaceフォルダの追加

  1. Sourcesタブをクリックし、Sourcesパネルを表示します。
  2. 左側のファイルツリーエリアで右クリックし、[Add folder to workspace]を選択します。
    workspaceフォルダ追加メニュー
  3. 「フォルダーの参照」ダイアログが表示されますので、フォルダを選択しOKをクリックします。
  4. ブラウザにアクセス許可のメッセージが表示されますので、[許可]をクリックします。
    アクセス許可メッセージ
  5. ファイルツリーに選択したフォルダが表示されます。
    Workspaceフォルダの表示

【補足】
設定パネルからも同様にWorkspaceフォルダの追加を行うことができます。

設定パネル

ネットワークリソースへのマッピング

  1. Workspaceフォルダ中のファイルの上で右クリックし、[Map to network resource]を選択します。
    ネットワークリソースへのマッピングメニュー
  2. ファイル名が表示されたボックスが表示されますので、Enterキーを押すかファイル名をクリックします。
    ファイル名表示ボックス
  3. リスタートのメッセージが表示されたら、OKをクリックします。
    リスタートメッセージ

これでWorkspaces機能を使う設定が完了しました。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ