Chromeの開発ツールのおすすめ機能!さてさて、プログラム言語は常にしかも急速に進化を続けているので開発をする我々としては、最新情報を手に入れて時代の流れに取り残されないようにする必要があります。「急速に進化した」と言われてすぐ思い浮かぶのがインターネットへのアクセスにはなくてはならない「ブラウザ」です。Chromeに切り替えることにしたのかというと、それは「開発ツール」の影響が大きいです。詳しく覚えていないのですが、Firefoxはあるバージョンアップを境にして、それまでできていたことができなくなってしまったんですね。そのときばかりは「これはもうChromeに行くしかないな・・・」と思いました。Chromeに標準でついている開発ツール(DevTools)のメインどころの使い方を紹介したいと思います。Chromeで開発ツールを起動するには、まずあるページにアクセスしてから右クリックをします。下に「検証」という項目が出てくるのでクリックをします。するとブラウザ内に次のようなウィンドウが表示されたと思います。これが開発ツールになります。I」を実行してみてください。小文字のLじゃなく大文字のIです。Inspectorの略だと思われます。次の項目から1つずつ使い方を見ていきましょう。開発ツールの表示を変えるもちろん好みの問題ですが、デフォルトでは表示しているページの中に開発ツールが表示されてしまうので、元々のコンテンツが見にくくなってしまいます。そのため、はじめに開発ツール自体の表示を変更する方法を紹介します。開発ツールの右上にある三点リーダ「...」をクリックしてください。side」から好きなものを選んでください。内容は以下のとおりです。別ウィンドウで開発ツールを表示します。画面右に開発ツールを表示では、次は各タブごとに説明をしていきます。各タブで出来ることElementsHTMLを確認するデフォルトで左側に大きく表示されている部分になります。ここで表示されているものは「ページのソース」とは同じではなく、JavaScriptなどを実行した後のHTMLだということに気をつけてください。ReactやVueでループさせるなどして表示したものは全てHTMLタグとしてこの部分に表示されることになります。各HTMLタグにマウスカーソルを合わせると以下のように対応する部分がハイライトされることになります。Elementsのすごいところは、リアルタイムでHTMLを編集することができるという部分です。Tools」というテキスト部分を「開発ツール」に変更するとそれがそのまま元ページにも反映されます。このでの変更はもちろん元ファイルとは関係ありませんので、リロードすると全て変更はクリアされることになります。CSSを確認する次に、選択されているHTMLタグにはどのようなCSS(スタイルシート)が適用されているかを確認する方法です。CSSは右側にデフォルト表示されています。(タブはStyles)もちろんこのスタイルシート部分でも内容の編集をすることができて、チェックボックスを外せばそのスタイルシートを適用しない場合のレイアウトを表示してくれますし、また例えばpaddingを15pxに変更すると瞬時にそのレイアウトへ変更してくれることになります。各スタイルシートがどこで定義されているのかも表示してくれていて、クリックするとその場所を表示してくれます。ページの見た目を調整したい場合にページを見ながら変更してみて、気に入ったものが見つかれば実際にHTMLやPHPなどのソースコードを変更するという流れになるかと思います。{}と書かれた場所では、全く新しいスタイルシートを追加することもできます。マウスカーソルを合わせた状態のレイアウトを確認したい場合は「:hov」をクリックして「:hover」にチェックを入れると、選択されている要素がマウスカーソルされたときの表示になります。その他のものチェックを入れた場合もフォーカスや一度表示したことがある場合のレイアウト表示になります。要素のサイズを確認する例えば、あるHTMLタグの高さ、横幅などのサイズについての詳細を知りたい場合は、Computedのタブをクリックしてください。ここでは、以下の4つの情報を知ることができます。上記3つを全て含めた高さと横幅もし指定したはずのサイズ変更がここに反映されていない場合は、他で指定したものが適用されている可能性がありますので、先ほどのStylesの中で探してみて、必要なら!importantをつけるなどして修正するといいでしょう。コンソールの内容を確認する(エラー、警告など)続いて、「Console」タブをクリックするとJavaScriptのエラー、コンソール表示、それから画像、CSSが存在しない場合のエラーメッセージを確認することができます。ちなみにJavaScriptでこのコンソールに表示をするためにはconsole.log('コンソールに表示するテキスト');としてください。何か開発をしていてうまくいかなかったらまずこの「console」を確認して何かエラーが表示されていないか確認することをおすすめします。(ただし、Vue.jsなどの場合のようにうまくいかないのにエラーが全く表示されない場合もありますので注意してください)アクセスしているファイルを確認する私が開発でよく使うのが「Network」です。このエリアでは、今アクセスしているページに関する以下のようなファイル(URL)についての情報を知ることができます。今アクセスしているページAjaxでアクセスされたページ画像CSSファイルJSファイルなどなど。アクセスされた各ファイルをクリックするとさらに以下の項目を表示することができます。ブラウザで見た場合どうなるかを表示してくれます。jsonなどもきれいに表示してくれるのでAjaxのテストにはもってこいです。ソース(HTMLタグなど)です。クッキーの内容また、もしファイルの種類別で表示にフィルターをかけたい場合は以下の部分で選択することができます。内容は以下のとおりです。これは、もう一度同じAjax通信を実行することができるので、例えばPHPなどのサーバーサイドにAjaxでアクセスする場合、エラー内容を確認しながら開発をすすめることが出来ます。新しく送信したページも最後に追加されますので、プレビューやヘッダー内容も確認することができます。一つ開発者ならチェックを入れておきたい項目があります。それは、「キャッシュを無効化する」チェックボックスです。あると思うのですが、CSSやJSファイルを変更したのにブラウザでリロードしても変化がなかったりします。それは、表示を高速化するためのキャッシュがブラウザに残っていて変更内容が適用されていないからです。そこで、このチェックボックスでキャッシュを無効にしておくとよりテンポよく開発をすすめることができるんじゃないでしょうか。Chromeの開発ツールには、スマートフォン向けの機能も含まれています。やり方は次のとおりです。Elementsの横にあるスマートフォン/タブレット・マークをクリックします。すると次のように縦長のスマートフォン形式の表示になります。ヘッダー部分ではスマートフォンの機種を選択することもできます。おわりにということで、今回はいつもとは少し趣向を変えて「ブラウザ」にフォーカスした記事をお届けしました。Chromeにはお世話になりそうです。(ただ、最近はFirefoxもQuantumなどいろいろ工夫もしているようなので、今後はどうなるかはわかりませんが😊)もし今回の記事で使えそうなものがあったら、ぜひ開発の効率化に役立ててほしいです。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。