• GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

itouitou  -   10:00 PM

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

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

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(訳:伊藤貴之)

MORE FROM LIFEHACKER

powered by
    
    
    
  

Kotaku

Recommended

© mediagene Inc.