デベロッパー ツール 使い方。 3.デベロッパーツールを使ってみよう

Chromeのデベロッパーツール(検証機能)の使い方!開発者モードで編集!

デベロッパー ツール 使い方

chromeデベロッパーツール(開発者ツール)とは デベロッパーツールとは Webサイトがどのように作られているか確認することができる機能です。 Web制作をするなら必ず使用することになるので使い方を見ていきましょう。 WebサイトのHTMLやCSSのコードを見る• HTMLやCSSを書き換えてテストする• スマホサイズでどう表示されるか確認する• 自分のサイトや世の中のサイト全てを検証することができるのでどんな作りになっているか確認すると非常に勉強になります。 chromeデベロッパーツール(開発者ツール)の使い方を紹介 それでは実際にデベロッパーツールを使っていきましょう。 今回は Googleの検索ページを検証してみます。 をGoogle Chromeで開きましょう。 以下の画像の赤枠部分のようにデベロッパーツールが現れます。 これがデベロッパーツールです。 画面右ではなく下に表示されることもありますがどちらも同じものです。 ここからサイトののHTMLやCSSのコードが確認できます。 タブを確認しよう.

次の

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

デベロッパー ツール 使い方

ホームページの作成・管理に役に立つ「chromeデベロッパーツールの使い方」をご紹介します。 Google Chrome デベロッパーツールは、Google の提供するブラウザ「Google Chrome」で利用でき、Webサイト制作時に役立つ豊富な機能が搭載されています。 Webサイトの要素に適用されている HTMLやCSS を確認したり、JavaScript のエラーを確認したりできます。 Webサイト管理時には欠かせないものになりつつあります。 chromeデベロッパーツールは、Google Chromeに搭載されています。 以下のような様々なことを行うことができます。 HTML・CSSの確認と編集• ネットワークの監視• JavaScriptのデバッグ• JavaScriptのパフォーマンスチェック• Cookie, localStorageの確認・編集• レンダリングを含めたパフォーマンスチェック• YSlowのようなパフォーマンスチェックツール• JavaScriptのコマンドラインツール.

次の

Chromeデベロッパーツール(検証モード)の基本的な使い方を解説|ferret

デベロッパー ツール 使い方

デベロッパーツールの開き方 デベロッパーツールの開き方です。 5パターンほどありますが、 自分が使いやすいものを選べばいいかと思います。 Macの方は Commandや Optionなどで置き換えてください。 デベロッパーツールを開く(閉じる)ショートカットキー 以下のどちらかを使うのが一般的な使い方かと思います。 F12の方が多くのブラウザで開発ツールを開くという挙動をするので、覚えておくといいかもしれません。 F12 デベロッパーツールを開くだけでなく、閉じるときも上記のキーで対応できます。 基本的な操作方法 デベロッパーツールを開いたら、「Elements」タブを開いてください。 メインで使うタブになります。 右上の矢印アイコン( )をクリックして確認したい要素をブラウザの画面から選びます。 選択した要素に対して次で紹介するような 値の追加や修正を加えて表示を確認していくといった使い方になります。 HTMLは左側、CSSは右側で表示されます。 ちなみにデベロッパーツールの表示場所は、右上の3点バー(?)みたいなアイコンから変更できます。 ノートパソコンの自分は下部の表示がしっくりきますが、モニターの大きさによって表示場所を変更すると見やすくなるかもしれません。 スポンサード リンク デベロッパーツールでやりたいこと デベロッパーツールでどういったことをやりたいかについて紹介します。 わたしは 大雑把にコーディングしたらデベロッパーツール上で微調整を加えて、確定した状態でコードに反映するといった流れで作っています。 要素に対してどういうCSSが当たっているか? 要素に対してどういうCSSが確認する頻度は高いです。 特に他人のサイトの現状を把握する必要のあるWebサイトの修正案件では頻繁に見ていました。 「見出しを変更したい」であったり、「ボタンのデザインを変えたい」みたいな案件です。 HTMLで確認したい要素を選択すると、右側の「Styles」のタブに当たっているCSSが表示されます。 「なるほど、 border-bottom: 3px solid e44d26;が適応されているんだな」ということが分かるわけです。 CSSの追加、削除、変更 適応されているCSSが分かったら好きな値に変更したり、新しくCSSプロパティを追加したり、削除したり、といったことが可能です。 要素の大きさ余白の確認 CSSの確認用のタブを「Computed」にすると、選択されている要素の高さ、横幅、 padding、 border、 marginを視覚的に確認することができます。 上記の例だと、• 横幅・・・212. 219px• 高さ・・・100px• padding・・・32px(上下左右)• border・・・0(上下左右)• margin・・・0(上下左右) ということが視覚的に分かります。 疑似要素や擬似クラスの確認 一般的な要素だけでなく、疑似要素や擬似クラスも確認したくなると思います。 それぞれ、ちょっと分かりにくいので場所だけ覚えておくといいかもしれません。 疑似要素 ::beforeや ::afterは、HTML側で選択できるようになっています。 ::beforeがある場合は開きタグの直後、 ::afterがある場合は閉じタグの直前にあります。 擬似クラス 主には :hoverを確認するために使っています。 CSS側の「:hov」タブを開いて :hoverにチェック入れると、設定されている要素であれば当たっているCSSが表示されます。 すべての要素で確認するわけではないですが、文字の増減が起こりそうな箇所は見ておくといいかもしれません。 HTMLタグの変更 HTMLタグも簡単に変更できます。 変更したいタグの部分をダブルクリックして片方だけ変更すれば対になっている方も自動で変更されます。 HTMLを丸ごと修正 HTMLタグやテキストだけでなく、1つのHTMLで作られた要素を丸ごと修正したい場合です。 右クリックして「Edit as HTML」で修正することができます。 選択したHTML要素を編集できるテキストボックスが表示されるので、ここにゴリゴリHTMLを書いていきましょう。 チェック機能として使うデベロッパーツール HTMLやCSSの確認や修正のみならず、サイトをチェック(テスト)する目的にも使えます。 コンソールでJavaScriptのエラー有無やメッセージの確認 「Console」タブには、 JavaScriptで何かしらの出力や、エラーがあった時のメッセージが表示されます。 エラーメッセージがあったら、確認して修正するようにしましょう。 JavaScriptはエラー以降の処理が動かなくなるので、サイト上で何かしらの不具合が起こる可能性が高いです・・・。 ネットワークで404や速度の確認 「Network」タブでは、どういう外部ファイルが読み込まれていて、それぞれの読み込みにどれくらいの時間がかかっているか、また、読み込めているかどうか(404でないかどうか)の確認もできます。 確実に確認すべきは、 404で読み込めていないファイルがないかどうかという点ですね。 404のファイルがあれば確認して、必要に応じて削除するなりファイルをアップし直すなりしないといけません。 シミュレーションでレスポンシブ確認 デベロッパーツールでレスポンシブの確認ができます。 ウインドウ幅を自在に変更できるといったものです。 ここでiPhone5の画面幅320pxで表示崩れがないか、iPadの画面幅768pxで表示崩れがないか、みたいなことを確認するわけですね。 ショートカットキーでも開くことができます。 モバイルの「M」って覚えると頭に定着しやすいかもしれません。 個人的に確認しておくべきだと思う幅は、以下のような感じです。 iPhone5(320px)• iPhone6(375px)• iPad(768px)• PC(デザインカンプの幅)• iPadとPCのインナー幅の間(一番崩れやすい…) ちなみに「Edit…」から任意の幅も登録できたりする親切設計です。 Webコーダーのわたしは、デベロッパーツールを使いながら「」で、表示のズレのチェックをしたりしています(Firefoxを使うケースの方が多いかもですが…) おわり.

次の