本記事は、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 も参照してみてください。

このTipsは、2020年5月版kintoneで動作を確認しています。