Google Chrome 開発者ツールのTips集 -DOM要素編-

（著者：サイボウズ 江﨑 全英）

Index

• はじめに
• ★DOM操作に関する注意点★
• カスタマイズしたDOM要素を確認したい
• ブラウザ画面上で確認しながらDOM要素を編集したい
  • ・方法その１：Elements 画面上で編集する方法
  • ・方法その２：DOM 要素を変数に格納し、Console 画面上で編集する方法
• ボタン要素に設定したイベントが正しく設定できているか確認したい
  • ・方法その１：getEventListeners() を利用する方法
  • ・方法その２：Elements 画面上の [Event Listeners] タブを確認する方法
• まとめ

はじめに

本記事は、「Google Chrome 開発者ツールのTips集シリーズ」の「DOM要素編」になります。

DOM 要素に関連した、Google Chrome の開発者ツール(以下、開発者ツール)の関する Tips を紹介していきます。

前回の記事と同様に、kintone でやりたいことをベースに Tips をまとめたので、目次から気になる Tips に飛んでみてください。

前回の「kintone 開発特化編」については、以下の記事を覗いてみてください。

▼Google Chrome 開発者ツールのTips集 -kintone開発特化編-
https://developer.cybozu.io/hc/ja/articles/360033708051

また、ブラウザの開発者ツールについてご存知ない方は、まず以下の記事に目を通してみてください。

▼動かない？そんな時はデバッグをしてみよう！入門編
https://developer.cybozu.io/hc/ja/articles/207613916 

★DOM操作に関する注意点★

DOM 操作によるカスタマイズをする際には、以下の点を認識した上で、行うようにしてください。

• 要素を動的に生成するカスタマイズは、脆弱性を生じさせる危険性があります
• 各要素に付与されている id/class 属性の値や DOM 構造は、予告なく変更されることがあるため、
  将来のバージョンでカスタマイズが動作しなくなる可能性があります

詳しくは以下のページを参照ください。

▼kintone JavaScript コーディングガイドライン
https://developer.cybozu.io/hc/ja/articles/201793484

▼JavaScript でセキュアなコーディングをするために気をつけること
https://developer.cybozu.io/hc/ja/articles/201850320 

カスタマイズした DOM 要素を確認したい

利用シーン

• レコード一覧画面や詳細画面でカスタマイズした空白要素の中身を確認したい時
• ポータルカスタマイズやレコード一覧画面のカスタマイズビューの中身を確認したい時

便利ポイント

• DOM 要素をブラウザ画面上から直接選択して、要素の中身を確認できる

実現方法

まず、カスタマイズを確認する kintone の画面上で、開発者ツールのConsole画面を開きます。
次に、開発者ツール Console 画面左上の [Select an element in the page to inspect it] アイコンをクリックし(※1)、
画面上の確認したい要素をクリックします。すると、該当する DOM 要素がハイライトされます。

※1 Windows：Ctrl + Shift + c （Mac：Command + Shift + c） を入力して
[Select an element in the page to inspect it] アイコンをクリックした状態にすることもできます。

この方法はブラウザ上で DOM 操作のデバッグをする際に、
よく活用されるベースとなるテクニックなので、
覚えておくと色んなことに応用できます。

本記事の以下で紹介する全てのテクニックでこの方法を利用していますので、
ぜひマスターしてください。

ブラウザ画面上で確認しながら DOM 要素を編集したい

利用シーン

• レコード一覧画面/詳細画面で取得できる空白要素のカスタマイズをする時
• ポータルやレコード一覧画面のカスタマイズビューのカスタマイズをする時

便利ポイント

• カスタマイズの動作確認をする際に、ブラウザ上で動作を確認しながら実装できる

注意点

下記「実現方法」で紹介する方法を利用して、ブラウザ画面上で編集した内容は、
kintone に反映されません。画面をリロードすれば元通りになります。

実現方法

方法その１：Elements 画面上で編集する方法

まず、カスタマイズした DOM 要素を確認したいで紹介した方法を利用して、
確認したい DOM 要素を選択します。

次に、開発者ツール Elements 画面でハイライトされた DOM 要素を右クリックして、
[Edit as HTML] をクリックすると、該当の DOM 要素を編集することができます。

また、編集したい DOM 要素がハイライトされている状態で、
同じ画面上の [Styles] タブのところに CSS を書いて、画面上に反映させることもできます。

方法その２：DOM 要素を変数に格納し、Console 画面上で編集する方法

まず、カスタマイズした要素を確認したいで紹介した方法を利用して、
確認したい DOM 要素を選択します。

次に、開発者ツール Elements 画面上でハイライトされた DOM 要素を右クリックして、
[Store as global variable] をクリックすると、Console 画面が立ち上がり、
適当な変数にその DOM 要素が格納されます。

そして、この格納された要素に対して Console 画面上で、DOM を操作するスクリプトを実行することで、
該当の DOM 要素を編集することができます。

ボタン要素に設定したイベントが正しく設定できているか確認したい

利用シーン

• レコード一覧画面や詳細画面などに設置したボタンに設定したイベントが、正しくセットされているかを確認する時

便利ポイント

• addEventListener() 等で DOM 要素に設定したイベントをブラウザ画面上で確認できる

▼ EventTarget.addEventListener()｜MDN web docs
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

実現方法

方法その１：getEventListeners() を利用する方法

まず、カスタマイズした要素を確認したいで紹介した方法を利用して、
確認したい DOM 要素を選択します。

次に、ブラウザ画面上で確認しながらカスタマイズする DOM 要素を編集したい-方法その２で紹介した方法を利用して、 
[Store as global variable] をクリックして適当な変数に該当の DOM 要素を格納します。

そして、Console 画面上で、`getEventListeners({ DOM 要素を格納した変数});` と入力し、
実行することで、DOM 要素に設定されたイベント内容を確認できます。

▼ getEventListeners(object)｜Chrome DevTools -Console Utilities API Reference-
https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

方法その２：Elements 画面上の [Event Listeners] タブを確認する方法

まず、カスタマイズした要素を確認したいで紹介した方法を利用して、
確認したい DOM 要素を選択します。

次に、開発者ツール Elements 画面上の [Event Listeners] タブをクリックし、
カスタマイズで設定したイベントをクリックします。

すると、該当の要素にイベントが設定されているかどうか、
またイベントハンドラーが正しく設定されているかどうかを確認できます。

まとめ

以上、kintone 開発で役に立ちそうな DOM 要素に関する Tips の紹介でした。

Google Chrome の開発者ツールは定期的にいろんな機能が追加されるので、
また役に立ちそうな Tips があれば、本記事に追記していく予定です。

Chrome の最新の情報については、本家のサイトも参照してみてください。

Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/?hl=ja

このTipsは、2020年5月版 kintone で確認したものになります。