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内で要素が選択状態になるので、移動させたい場所にドラッグします。
2．色を変えてみる
ウェブページはたいてい16進法で配色を記述します。「#AABBCC」という記号を見ても意味がわからない人は、Gold、Aquaのように英語で色の名前を指定するのもOK。最初の一文字をタイプすれば、その文字で始まる色名のリストが表示されます。やり方は下のアニメーションを参考。
3．パスワードを表示させる
Chromeはログインフォームにパスワードを自動入力してくれますが、パスワードそのものは「＊マーク」で置き換えられて見えません。Chrome Dev Tools内で、パスワード入力欄の「input type」属性を「password」から「text」に変更すれば、隠されていたパスワードが現われます。
4．ウェブページをインライン編集する
ウェブページをワープロみたいにインライン編集する方法もあります。Chrome Dev Toolsを開いて、「Console」タブを選択、コマンドプロンプトに「document.body.contentEditable=true」とタイプします。すると！ ウェブページがインラインで編集できるようになりました。
5．Chromeを計算機にする
Console（コンソール）に演算式を書けば、日付間の日数を計算するなど、さまざまなデータ計算を実行できます。JavaScriptのDateオブジェクトの使い方を学んでおくと便利。Chromeは「$_」変数で直近の計算値を保持しており、複雑な計算式に利用できます。
6．ウェブページから情報を抽出する
コンソール画面でマルチラインコマンドを実行すれば、ウェブページからさまざまなデータを抽出できます。例えば、「$$('a')」 セレクターはページに埋め込まれているすべてのハイパーリンクを保持しています。下記のコードをコンソールにタイプすれば、ページ内のハイパーリンクをプレインテキストに書き出せます。
urls = $$('a'); for (url in urls) console.log ( urls[url].href );
7．位置情報を偽装する
ウェブページの中には、あなたの位置情報を要求するものもあります。Chrome Dev Toolsを使えば位置情報を簡単に偽装可能。Dev Toolsの設定アイコンをクリック、「Override」タブの「Override Geolocation」で緯度と経度を書き換えてください。
The Best Feature of Google Chrome You Aren't Using | Digital Inspiration
Amit Agarwal（訳：伊藤貴之）
