特集
カテゴリー
タグ
メディア

(非開発者でも使える)「Chrome Developer Tools」を使ってみよう!

  • カテゴリー:
  • TOOL
(非開発者でも使える)「Chrome Developer Tools」を使ってみよう!

Digital Inspiration:Google Chromeはすばらしいブラウザですが、あまり知られていない優れた機能を隠し持っています。それが「Chrome Developer Tools」。開発者向けのツールに見えますが、一般ユーザーも十分に使いこなせます。

ChromeをウェブページのWYSIWYGエディタとして使えるのをご存知ですか? 計算機になるのは? カレンダーの日数を計算できるのは? 以下のビデオはDevelopers Toolsでできることをざっと紹介しています。

それではさっそくChrome Developer Toolsを試してみましょう!

非開発者のための「Chrome Developer Tools」入門

デスクトップのChromeでこちらのデモページを開き、「Ctrl + Shift + I」(MacはOpt + Cmd + I)を押してください。Chrome Dev Toolsが開いたら、画面左下の虫めがねアイコンをクリック、ページの上にマウスを持って行くと、各要素がハイライトされますので、例えば「Royal baby born: It's a girl」という見出し部分を選択します。すると、Dev Tools内で見出し部分のHTMLコードが選択状態になるので、そこをダブルクリックすると見出しの語句が編集可能となります。

1.ページ内のテキストや画像を再配置する

Chrome Dev Toolsを使えば、ページ内の要素をドラッグ&ドロップで再配置できます。虫めがねアイコンをクリックしてから、ページ内で移動させたい要素(段落、画像、リストなど)の上にマウスを持っていきクリック、Dev Tools内で要素が選択状態になるので、移動させたい場所にドラッグします。

20130923-chromedevtools01.gif

2.色を変えてみる

ウェブページはたいてい16進法で配色を記述します。「#AABBCC」という記号を見ても意味がわからない人は、Gold、Aquaのように英語で色の名前を指定するのもOK。最初の一文字をタイプすれば、その文字で始まる色名のリストが表示されます。やり方は下のアニメーションを参考。

20130923-chromedevtools02.gif

3.パスワードを表示させる

Chromeはログインフォームにパスワードを自動入力してくれますが、パスワードそのものは「*マーク」で置き換えられて見えません。Chrome Dev Tools内で、パスワード入力欄の「input type」属性を「password」から「text」に変更すれば、隠されていたパスワードが現われます。

4.ウェブページをインライン編集する

ウェブページをワープロみたいにインライン編集する方法もあります。Chrome Dev Toolsを開いて、「Console」タブを選択、コマンドプロンプトに「document.body.contentEditable=true」とタイプします。すると! ウェブページがインラインで編集できるようになりました。

20130923-chromedevtools03.gif

5.Chromeを計算機にする

Console(コンソール)に演算式を書けば、日付間の日数を計算するなど、さまざまなデータ計算を実行できます。JavaScriptのDateオブジェクトの使い方を学んでおくと便利。Chromeは「$_」変数で直近の計算値を保持しており、複雑な計算式に利用できます。

20130923-chromedevtools04.gif

6.ウェブページから情報を抽出する

コンソール画面でマルチラインコマンドを実行すれば、ウェブページからさまざまなデータを抽出できます。例えば、「$$('a')」 セレクターはページに埋め込まれているすべてのハイパーリンクを保持しています。下記のコードをコンソールにタイプすれば、ページ内のハイパーリンクをプレインテキストに書き出せます。

urls = $$('a'); for (url in urls) console.log ( urls[url].href );

20130923-chromedevtools05.gif

7.位置情報を偽装する

ウェブページの中には、あなたの位置情報を要求するものもあります。Chrome Dev Toolsを使えば位置情報を簡単に偽装可能。Dev Toolsの設定アイコンをクリック、「Override」タブの「Override Geolocation」で緯度と経度を書き換えてください。

The Best Feature of Google Chrome You Aren't Using | Digital Inspiration

Amit Agarwal(訳:伊藤貴之)

swiper-button-prev
swiper-button-next