忍者ブログ

そうだったのかブログ

初心者がゲームつくりに、プログラミングに、悪戦苦闘するブログ。

Chromeのデベロッパーツールは便利で面白い


スマホで表示されたホームページ画面。

位置ズレを起こしてました。

必死でなおしたんですが、そのとき便利だったのが…

そう、これです。




 Chromeデベロッパーツール



初心者の私は、デベロッパーツールなど知りませんでした。

Chromeが起動している状態で【 F12 】か、【 ctrl + shift + I 】でモードが起動します。



何やら、文字がいっぱい、謎の領域がChrome右側に現れました。

これがデベロッパーツールなのですな(?)




 初心者のデベロッパーツール



なにかにつけて初心者の私。

そのデベロッパーツールで何が便利だったか、記します。



1.スマホ画面が疑似的に表示される。



 デベロッパーツールを知らないとき。
  1 HTML、CSS、JSをなおす。
  2 PCのChromeで一応確認。
  3 FTPでアップする。
  4 スマホで表示結果を確認する。
 繰り返し。

 それが、こうなりました。
  1 HTML、CSS、JSをなおす。
  2 Chromeの疑似スマホ画面で確認する。
 繰り返し。

 さらに、こうなりました。
  1 Chromeで修正箇所を実験、確認をする。
  2 確認に基づいてHTML、CSS、JSを修正。
 繰り返し。

 FTPの手間、スマホ実機の確認の手間が大幅に減り、作業時間が短縮されました!
 たすかるわぁ。



2.数字とか、プロパティとか、いろいろいじれる


 
 デベロッパーツール内での話なんだと思いますが。

 「ここの数字を10から30にかえたら、どうなるかな?」
 「ここのスタイルの、このプロパティを外したら、どうだろう?」

 というようなことができました。

 エディタの起動、ブラウザでの確認作業の時間が短縮されたと思います。
 たすかるわぁ。



3.リロードを覚えたら手間が減った


 自分のPCにあるファイルを、自分のPCのブラウザで読み込んでいるわけで。
  
  1 ソースとなるHTML、CSS、JSをいじる。
  2 ブラウザをリロードする。
  3 表示が更新される。

 バカみたいな話ですが、HTML等をいじるたび新たにChromeを呼び出してタグを増やし続け、閉じていた私です。
 
 リロードするだけで更新が反映されるのは、結構な発見でした。


 PC上表示からスマホ表示に切り替えた直後はリロードしないと、正しいスマホ表示確認にならないみたい。

 リロードは【 F5 】で簡単です。
 たすかるわぁ。


…それくらいかな(笑)




 これから試したいデベロッパーツールの機能など



まず、何ができるのか、確認したいですね(笑)

表示された、どのWEBページでも同じようにデベロッパーツールで表示できるみたいなので…。

・いろんなページの中身をのぞいてみよう。
・のぞいたページの中身をいじってみよう。
・なんか楽しくお勉強できそうな気がする。
・学んだことを自分のHPに適用させよう。

使えば使うほど、もっと便利になることでしょう。きっと。




 参考記事




 Chrome デベロッパーツールの使い方まとめ

拍手[0回]

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

トラックバック

プロフィール



HN:
ほしなとおる
性別:
男性
自己紹介:
PCで創作活動してます。
作画ツールはFireAlpaca、GIMP。
最近UNITYをお勉強中。

フリーエリア

P R