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

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

  • ,,,,, - By

    香川博人

    LIKE

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    Sponsored

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    2020年に向けて進むキャッシュレス化。 企業にとっての「電子決済」のメリットとは?

    先日、政府は2017年度から公共料金や備品経費の支払いを全面的に電子決済にすることで、30億円の人件費削減が期待できるという発表をしました。 電子マネーやクレジットカード、ネットバンキングの普及により、私たちは現金だけではなく、時間と手間のかからない電子決済を活用する機会が増えていますが、それは企業や法人にとっても大きなメリットがあるようです。 そこで今回、現金決済から電子決済へとキャッシュレス  05:00 PM

MORE FROM LIFEHACKER

powered by
    
    
    
  

lifehacker

Recommended

© mediagene Inc.