リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

Web開発に超便利なChrome Developer Tools


Google Chromeには、Chrome Developer Toolsという機能が標準で搭載されています。

これがかなり高機能でWebサイト/Webシステムの開発にとても便利なので、今日はその機能の一部をご紹介したいと思います。

起動方法

Webページ上で右クリック→「要素を検証(N)」を選択すると、画面の下半分にChrome Developer Toolsが現れます。

この状態だと画面が狭くなって使いづらいので、左下の窓マークのボタン(下記画像の赤枠の部分)をクリックして、別窓表示に切り替えましょう。

画面表示とソースの対応が簡単に確認できる

左下にある虫眼鏡ボタンをクリックしてから、Webページの画面上にマウスポインタを持って行くと、ポイントした要素がハイライト表示され、要素名(タグ名)とピクセルサイズが表示されます。

さらに、そのハイライトされた要素をクリックすると、Developer Tools上で対応するソース箇所が選択されます。

これにより、画面表示とソースの対応を簡単に確認することが出来ます。また、Developer Tools上でソースの行が選択されると、画面右側に、その要素に適用されているCSSが一覧で表示されるので、要素ごとのスタイルも一目で確認できます

JavaScriptのデバッグを強力にサポート

Developer Toolsには、JavaScriptのデバッグをサポートする機能も備わっています。

「Scripts」タブを選択(画像赤枠)すると、JavaScript関係の情報を見る画面になります。画像青枠の部分で、表示するJavaScriptソースを選択できます。

はじめは読み込んでいるソースがそのまま表示されていますが、左下の{ }マークのボタンをクリックすると…

下記画像のように、一瞬でインデント入りの表記に整形してくれます!

さらに、ブレークポイントの設定やステップ実行などもでき、一般的なIDE並みのデバッグ機能が使えます。もはやこれなしではJavaScriptのデバッグは出来ないですね。

 おわりに

他にも便利な機能がたくさんあり、しっかり使いこなせばWeb開発の作業効率を格段にアップさせられます。興味のある方はぜひ一度お試しください。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

Facebookもチェック