クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう

Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの? まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ!

【目次】

※参考:HTML、CSS、JSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと

※参考:Web開発環境の記事まとめ
qiita.com

Chromeデベロッパーツール の開き方

Chromeを開く

まずPCのChromeブラウザを開きます。 Chromeが入っていない場合はこちらからインストールしてください。

※参考: Google Chrome をダウンロードしてインストールする - パソコン - Google Chrome ヘルプ

検証したいサイトを開きます。 f:id:idr_zz:20181112212946j:plain

今回は私が以前(2014年)に作ったポートフォリオサイトを見てみましょう。

※参考:イイダリョウ|神奈川県に住むWebデザイナー

ソースを表示

画面上で右クリックを開くといくつかメニューがあります。

「ページのソースを表示」を開いてみると… f:id:idr_zz:20181112212954j:plain

新規タブでHTMLのソースが表示されます。 f:id:idr_zz:20181112213000j:plain

この画面ではソースを直接修正することはできません。

検証(デベロッパーツール)のElementsパネル

次に右クリックの「検証」を開いてみると… f:id:idr_zz:20181112213008j:plain

これが「デベロッパーツール」です! f:id:idr_zz:20181112213014j:plain

「Elements」パネルが開きます。左カラムは一見すると先ほどの「ソース」と似ていますね。

しかしこちらは要素が三角アイコンで「開閉式」になっているのがソースと違うところです。見た目がスッキリしていて、DOMの階層がわかりやすい!*1

なお、右のカラムにはCSSのスタイルが見受けられます。(こちらは後ほど解説します)

HTMLの修正

それでは早速HTMLを修正してみましょう!

要素の選択

まず修正したい要素を選択します。

デベロッパーツール の左上の「矢印アイコン」を選択してください。

カーソルを動かすと、画面上の要素に色がついて要素の選択ができるようになります。*2 f:id:idr_zz:20181112213219j:plain

ここではグローバルメニューの2番目「portfolio」を選択しました。

Elementsパネルの色が反転している行が選択した要素の行です。先ほどは閉じていましたが選択すると開きます。*3 f:id:idr_zz:20181112213227j:plain

ここをHTMLを直接打ち替えて修正ができます!

行の一部の打ち替え

修正したいところをWクリックすると打ち替えができます。 f:id:idr_zz:20181112213233j:plain

テキストを「ぽーとふぉりお」と平仮名に打ち替えてみます。 f:id:idr_zz:20181112213240j:plain

メニューがリアルタイムで打ち変わりました!楽チンですね!! f:id:idr_zz:20181112213246j:plain

テキストだけでなくタグ名やタグの中の属性(class名など)も修正が可能です。

要素全体の打ち替え

右クリック「Edit as HTML」を選択 f:id:idr_zz:20181112213253j:plain

テキストエリアが表示されて、要素を全体的に打ち替えることができます!

a要素を複製してみます。 f:id:idr_zz:20181112213259j:plain

a要素が増殖しました!! f:id:idr_zz:20181112213306j:plain

テキストや属性だけでなく、要素自体もここで足したり消したりできるわけです。

CSSの修正

次はCSSの修正をしてみましょう。

Stylesパネル

CSSの修正は右カラムの「Styles」パネルです。選択した要素に当たっているスタイルが表示されています。 f:id:idr_zz:20181112213349j:plain

ここでCSSを直接打ち替えて修正ができます!*4

スタイルの解除

最初にスタイルの解除をしてみましょう。text-decoration: noneのチェックボックスのチェックを外します。スタイルに打ち消し線が入りますね。 f:id:idr_zz:20181112213358j:plain

ブラウザデフォルトの下線設定が復活して、線が現れました! f:id:idr_zz:20181112213402j:plain

値の打ち替え

次に値の打ち替えをしてみましょう。color: #666を適当な数値#338822と打ち替えてみます。 f:id:idr_zz:20181112213409j:plain

お、文字の色が変わりました!この数値は緑だったんですね(笑)*5 f:id:idr_zz:20181112213415j:plain

新規スタイルの入力

これまでは「style.css」の「133行目」を修正していました。スタイルは.menu li a全体にかかります。

一番上のElement.styleにCSSを書くと、選択した要素だけ修正できます。font-size20pxにしてみす。 f:id:idr_zz:20181112213422j:plain

選択した要素の文字サイズだけ大きくなりました! f:id:idr_zz:20181112213426j:plain

このように、値の変化が画面にどう反映されるかリアルタイムで直接確認できるわけです。

Computedパネル(計算済みスタイル)

「Styles」パネルの隣にある「Computed」パネル。

ここではCSSの最終的な設定値(計算済みスタイル)を見ることができます。*6 f:id:idr_zz:20181112213435j:plain

例えば文字カラーcolorの値は#666です。三角アイコンを開くとどの行のCSSが最終的に優先されたかがわかります。 f:id:idr_zz:20181112213443j:plain

一番上の「style.css」の133行目が適用されていますね。他の行は打ち消し線になっています。

同じ箇所へのスタイルを何度も上書きすると、最終的にどこの何が当たってるかわかりにくくなります。ここで最終確認ができるわけです。

JSの修正

最後にJSの修正を行いましょう。

Event Listnersパネル(clickイベント)

「Computed」パネルの隣の「Event Listners」パネルを開きます。 f:id:idr_zz:20181112213507j:plain

「click」「load」などのイベントが並んでいます。

クリックイベントの設定を見たいので「click」を開きます。「script.js」の9行目が該当箇所です。ここをクリック! f:id:idr_zz:20181112213514j:plain

Sourcesパネル

「Sources」パネルが開きます。「script.js」の9行目が表示されています。 f:id:idr_zz:20181112213519j:plain

ここでJSを直接打ち替えて修正ができます!*7

値の打ち替え

11行目変数speedの値を1000から100に打ち替えてみます。「command(Windowsはcontrol)+S」で保存すると適用されます。 f:id:idr_zz:20181112213526j:plain

メニューの「Portforio」をクリックするとページ内リンクのスクロールがギュン!と表示。 f:id:idr_zz:20181112213537j:plain

これは早すぎます!1000ミリ秒ということは100は0.1秒ですね。

今度はspeedの値を100から10000に打ち替えてみます。「command+S」で保存。 f:id:idr_zz:20181112213543j:plain

メニューの「Top」をクリック。今度はジリジリジリ…とゆっくりしたスピードで戻ります。 f:id:idr_zz:20181112213547j:plain

今度は遅すぎる!10000は10秒ですね。やはり1000の1秒くらいが最適とわかります。

このように、いろいろな設定値がどう反映されるのかリアルタイムで確かめることができるわけです。

エラー表示

次に変数hrefの中の$(this)$(that)に打ち替えてみる。「command+S」で保存。 f:id:idr_zz:20181112213554j:plain

「エラー:thatなんて無いYo!」と怒られてしまいました。。 f:id:idr_zz:20181112213600j:plain

console.log()でデバック

次にconsole.log()を1行ごとに追加してみる。引数の中にはok1ok2ok3と入力。「command+S」で保存。 f:id:idr_zz:20181112213604j:plain

console.log()という命令は、デベロッパーツール の「console」パネルに結果を出力します。

メニューの「portfolio」をクリック。パッと移動しちゃって、ページ内スクロールのアニメが効いていません!

「console」パネルを開いてみましょう。 f:id:idr_zz:20181112213609j:plain

「console」パネルには先ほどのエラーのログが表示されていますね。

お、その下にok1ok2という値が出力されています!ok2までは処理が実行されているということですね。 f:id:idr_zz:20181112213617j:plain

ok3が動いていないということは、その上の行で処理が止まっているということです。 つまりその行に問題がある、ということがわかります!

エラーコードは必ず表示されるわけではなく、表示されないレベルの問題もあります。console.log()なら自力で問題を探すことができます。

console.log()は他にも変数に入っている値を調べるなど、いろいろなことに使えます!

※参考:JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita

最後に

デベロッパーツール を使うと、期待通りならない箇所の原因を調べたり、設定の変更で画面がどう変わるかを試すことができます。かなり直感的ですよね!

これを使わないとテキストエディタを修正→保存→ブラウザ確認、と繰り返す必要があります。

デベロッパーツールは私もまだ真髄までは全然使いこなせていないので、シリーズ化して順次機能を紹介をしていきますねー。それでは!


※参考:Web開発環境の記事まとめ
qiita.com

*1:なお、Elementsパネルの内容はJS操作などの反映によってHTMLの元ソースと異なる場合があります

*2:この時、marginやpaddingなどの余白設定のサイズも確認できます

*3:ちなみに検証したい要素の上で右クリックで開いてもこの状態になります

*4:さらに:hovでホバー状態のスタイルが確認できます。:clsでclass名を追加できます

*5:ちなみに数値の横の四角い色をクリックするとカラーピッカーが開きます。さらに直感的!

*6:上にある四角の図はサイズです。margin、paddingなしのautoを意味します

*7:もしコードが見えにくい場合は左下の「{ }」アイコンをクリックするとコードが整形されます