Chrome デベロッパーツール Sourcesパネルの使い方

Chrome デベロッパーツールのSourcesパネルでは、Webページで使用しているCSSやJavaScriptファイルを編集し、表示に反映させることができます。またJavaScriptのデバッグもこのパネルで行うことができます。

Sourcesパネルでは具体的に以下のことが可能です。

  • ページで読み込んでいるファイル(css/js/php/htmlなど)を検索する。
  • ファイル中の文字列を検索する。
  • CSSやJavaScriptファイルを編集して表示に反映させる。
  • 編集したファイルをローカルに保存する。
  • ローカルに保存したファイルを反映させる。
  • JavaScriptコードのデバッグをする。

【コンテンツ】

  1. Sourcesパネル外観
  2. ファイルの検索と表示
  3. 文字の検索と置換
  4. コードの編集と保存
  5. コードの整形
  6. JavaScriptのデバッグ

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

Sourcesパネル外観

Sourcesパネル外観

1 読み込まれたファイルのツリーを表示するナビゲーターです。

2 開いたファイルの内容を表示するソースビューです。
ファイルは複数開くことができ、タブで切り替えます。

3 デバッグ情報を表示するパネルです。
コントロールボタンといくつかのペインから構成されています。

ファイルの検索と表示

左側のファイルツリーにあるファイル名をクリックすると、ソースビューにタブが追加されファイル内容が表示されます。

ファイル内容の表示

ファイルを検索するには以下のようにします。

[Ctrl]+[O]を押します。

ファイルをリストアップしたソースパネルが表示されますので、開きたいファイルをクリックします。

ソースパネル

サーチボックスに文字を入力すると、フィルターしてファイルをリストアップしてくれます。

サーチボックスへの文字入力

文字の検索と置換

開いたファイル中の文字列を検索するには、[Ctrl]+[F]を押します。

検索ボックスに入力した文字列に、最初にマッチした部分が黄色でハイライトされます。
次のマッチした部分に移動するには下矢印ボタンをクリックします。
上矢印ボタンをクリックすると、ひとつ前のマッチした部分に移動します。

文字列の検索画面

文字列を置換するには、[Replace]にチェックを入れます。

検索ボックスの下に新たにボックスが現れますので、置換後の文字列を入力します。
[Replace]あるいは[Replace All]ボタンをクリックして文字列を置換します。

文字列の置換画面

文字列の検索はすべてのファイルを対象とすることもできます。
その場合は、[Ctrl]+[Shift]+[F]を押します。

Searchパネルが表示されますので、検索ボックスに文字列を入力しEnterキーを押すと、すべてのファイルを対象とした検索結果が表示されます。

すべてのファイルを対象とした検索画面

Searchパネル内の検索結果部分をクリックすると、ソースビューでファイルが開き該当する部分にカーソルが移動します。

なお、Searchパネルを閉じるには、Escキーを押します。

コードの編集と保存

コードはソースビューで直接編集し、ページに反映させることができます。
ただしページをリロードすると、編集内容は消えて元に戻ってしまいます。

編集した内容を保存しておきたいときは、ソースビュー内で右クリックし、[Save as]を選択します。
ファイル保存のダイアログが表示されますので、ローカルにファイルを保存します。

ファイル保存メニュー

次から同じファイルに上書き保存するには、[Ctrl]+[S]を押します。
あるいは右クリックメニューの[Save]でも同じです。

ローカルに保存したファイルは編集履歴をもっており、前のリビジョンに戻すことができます。

前のリビジョンに戻すには、ソースビュー内で右クリックし、[Local modifications]を選択します。

編集履歴メニュー

Historyパネルが表示されますので、戻したいリビジョンの[apply revision content]をクリックします。

Historyパネル

なお、[revert]をクリックすると、編集履歴は消去されオリジナルの状態に戻ります。

コードの整形

インデントや改行コードを削除したMinifiedファイルは、デバッグするには視読性が悪いので、整形して表示することができます。

例えば下記のjQueryのMinifiedファイルを整形するため、[Pretty print]アイコンをクリックします。

Minifiedファイル

ファイル名の後ろに「formatted」が追加されたファイルができ、整形された内容で表示されます。

整形されたファイル

JavaScriptのデバッグ

JavaScriptコードは、ソースビューでブレークポイントを設定してデバッグすることができます。

デベロッパーツールでは多くのデバッグ機能をもっていますので、詳細は別記事で紹介します。

JavaScriptデバッグ画面

スポンサーリンク

特集記事

  • WordPress Image

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

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

オンライン講座

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


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

提供しているサービス

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

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

サービス詳細ページ >>

申し込みフォーム >>


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

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

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ