本記事は、Google Chrome 開発者ツールの Tips 集シリーズの DOM 要素編になります。
DOM 要素に関連した Google Chrome の開発者ツール（以下、開発者ツール）の関する Tips を紹介していきます。
前回の記事と同じく kintone でやりたいことをベースとして Tips をまとめました。目次から気になる Tips へ飛んでみてください。
前回の記事は Google Chrome 開発者ツールの Tips 集 -kintone 開発特化編- を覗いてみてください。
ブラウザーの開発者ツールについては 動かない？そんな時はデバッグをしてみよう！入門編 を見てみてください。

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

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

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

• kintone コーディングガイドライン
• JavaScript でセキュアなコーディングをするために気をつけること

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

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

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

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

以降紹介するすべての Tips でこの方法を利用しているので、ぜひマスターしてください。

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

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

次の 実現方法 で紹介する方法を使ってブラウザー画面上で編集した内容は 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 を参照してください。

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

まず、 カスタマイズした要素を確認したい で紹介した方法を利用して確認したい DOM 要素を選択します。
次に、 ブラウザー画面上で確認しながら DOM 要素を編集したい の実現方法 > 方法その 2 で紹介した方法を利用して「Store as global variable」をクリックし、適当な変数に該当の DOM 要素を格納します。
そして、Console 画面上で getEventListeners({ DOM 要素を格納した変数}); と入力し、実行することで DOM 要素に設定されたイベント内容を確認できます。

getEventListeners（object） については Chrome DevTools の Console Utilities API reference を参照してください。

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

まず、 カスタマイズした要素を確認したい で紹介した方法を利用して確認したい DOM 要素を選択します。
次に、開発者ツール Elements 画面上の「Event Listeners」タブをクリックし、カスタマイズで設定したイベントをクリックします。
すると、該当の要素にイベントが設定されているか、またはイベントハンドラーが正しく設定されているかを確認できます。

kintone 開発で役に立ちそうな DOM 要素に関する Tips の紹介でした。
Google Chrome の開発者ツールは定期的にいろんな機能が追加されるので、役に立ちそうな Tips があれば本記事に追記していく予定です。
Chrome の最新の情報については、 Chrome DevTools も参照してみてください。