イイダリョウのブログ。JSWebサイト制作で欠かせないChrome「デベロッパーツール」。HTML、CSS、JSのリアルタイム修正から入るのがおすすめ。開き方Chromeを開くまずPCのChromeブラウザを開きます。Chromeが入っていない場合はこちらからインストールしてください。ヘルプ検証したいサイトを開きます。今回は私が以前(2014年)に作ったポートフォリオサイトを見てみましょう。画面上で右クリックを開くといくつかメニューがあります。「ページのソースを表示」を開いてみると...新規タブでHTMLのソースが表示されます。この画面ではソースを直接修正することはできません。検証(デベロッパーツール)のElementsパネル次に右クリックの「検証」を開いてみると...これが「デベロッパーツール」です!「Elements」パネルが開きます。左カラムは一見すると先ほどの「ソース」と似ていますね。こちらは要素が三角アイコンで「開閉式」になっているのがソースと違うところです。見た目がスッキリしていて、DOMの階層がわかりやすい!*1なお、右のカラムにはCSSのスタイルが見受けられます。(こちらは後ほど解説します)HTMLの修正それでは早速HTMLを修正してみましょう!要素の選択まず修正したい要素を選択します。左上の「矢印アイコン」を選択してください。カーソルを動かすと、画面上の要素に色がついて要素の選択ができるようになります。*2ここではグローバルメニューの2番目「portfolio」を選択しました。Elementsパネルの色が反転している行が選択した要素の行です。先ほどは閉じていましたが選択すると開きます。*3ここをHTMLを直接打ち替えて修正ができます!行の一部の打ち替え修正したいところをWクリックすると打ち替えができます。テキストを「ぽーとふぉりお」と平仮名に打ち替えてみます。メニューがリアルタイムで打ち変わりました!楽チンですね!!テキストだけでなくタグ名やタグの中の属性(class名など)も修正が可能です。HTML」を選択テキストエリアが表示されて、要素を全体的に打ち替えることができます!a要素を複製してみます。a要素が増殖しました!!テキストや属性だけでなく、要素自体もここで足したり消したりできるわけです。次はCSSの修正をしてみましょう。StylesパネルCSSの修正は右カラムの「Styles」パネルです。選択した要素に当たっているスタイルが表示されています。最初にスタイルの解除をしてみましょう。noneのチェックボックスのチェックを外します。スタイルに打ち消し線が入りますね。ブラウザデフォルトの下線設定が復活して、線が現れました!値の打ち替え次に値の打ち替えをしてみましょう。#666を適当な数値#338822と打ち替えてみます。お、文字の色が変わりました!この数値は緑だったんですね(笑)*5新規スタイルの入力これまでは「style.css」の「133行目」を修正していました。上のElement.styleにCSSを書くと、選択した要素だけ修正できます。font-sizeを20pxにしてみす。選択した要素の文字サイズだけ大きくなりました!このように、値の変化が画面にどう反映されるかリアルタイムで直接確認できるわけです。Computedパネル(計算済みスタイル)「Styles」パネルの隣にある「Computed」パネル。ここではCSSの最終的な設定値(計算済みスタイル)を見ることができます。*6例えば文字カラーcolorの値は#666です。三角アイコンを開くとどの行のCSSが最終的に優先されたかがわかります。上の「style.css」の133行目が適用されていますね。他の行は打ち消し線になっています。同じ箇所へのスタイルを何度も上書きすると、最終的にどこの何が当たってるかわかりにくくなります。ここで最終確認ができるわけです。最後にJSの修正を行いましょう。Listners」パネルを開きます。「click」「load」などのイベントが並んでいます。クリックイベントの設定を見たいので「click」を開きます。「script.js」の9行目が該当箇所です。ここをクリック!Sourcesパネル「Sources」パネルが開きます。「script.js」の9行目が表示されています。ここでJSを直接打ち替えて修正ができます!*7値の打ち替え11行目変数speedの値を1000から100に打ち替えてみます。「command(Windowsはcontrol)+S」で保存すると適用されます。メニューの「Portforio」をクリックするとページ内リンクのスクロールがギュン!と表示。これは早すぎます!1000ミリ秒ということは100は0.1秒ですね。今度はspeedの値を100から10000に打ち替えてみます。「command+S」で保存。メニューの「Top」をクリック。今度はジリジリジリ...とゆっくりしたスピードで戻ります。今度は遅すぎる!10000は10秒ですね。1000の1秒くらいが最適とわかります。このように、いろいろな設定値がどう反映されるのかリアルタイムで確かめることができるわけです。次に変数hrefの中の$(this)を$(that)に打ち替えてみる。「command+S」で保存。「エラー:thatなんて無いYo!」と怒られてしまいました。console.log()でデバック次にconsole.log()を1行ごとに追加してみる。引数の中にはok1、ok2、ok3と入力。「command+S」で保存。「console」パネルに結果を出力します。メニューの「portfolio」をクリック。移動しちゃって、ページ内スクロールのアニメが効いていません!「console」パネルを開いてみましょう。「console」パネルには先ほどのエラーのログが表示されていますね。お、その下にok1、ok2という値が出力されています!ok2までは処理が実行されているということですね。ok3が動いていないということは、その上の行で処理が止まっているということです。その行に問題がある、ということがわかります!エラーコードは必ず表示されるわけではなく、表示されないレベルの問題もあります。console.log()なら自力で問題を探すことができます。使うと、期待通りならない箇所の原因を調べたり、設定の変更で画面がどう変わるかを試すことができます。直感的ですよね!これを使わないとテキストエディタを修正→保存→ブラウザ確認、と繰り返す必要があります。デベロッパーツールは私もまだ真髄までは全然使いこなせていないので、シリーズ化して順次機能を紹介をしていきますねー。それでは!※参考:Web開発環境の記事まとめqiita.com*1:なお、Elementsパネルの内容はJS操作などの反映によってHTMLの元ソースと異なる場合があります*2:この時、marginやpaddingなどの余白設定のサイズも確認できます*3:ちなみに検証したい要素の上で右クリックで開いてもこの状態になります*4:さらに:hovでホバー状態のスタイルが確認できます。:clsでclass名を追加できます*5:ちなみに数値の横の四角い色をクリックするとカラーピッカーが開きます。直感的!*6:上にある四角の図はサイズです。22:33Tweet関連記事2019-11-27【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的...Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。前回まではJSONファイルの読み込みをしまし...2018-11-27黒い画面だけでWebページを作成-後編:viエディタでコーディング!「前編」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。