本記事は、Google Chrome開発者ツールのTips集シリーズのデバッグ効率化編になります。
カスタマイズのデバッグを効率化してくれるGoogle Chromeの開発者ツール（以下、開発者ツール）に関するTipsを紹介していきます。
本記事でも、kintoneのカスタマイズでやりたいことをベースとしてTipsをまとめました。
目次から気になるTipsへ飛んでください。

本シリーズの過去の記事もぜひ覗いてみてください。

• Google Chrome開発者ツールのTips集 -kintone開発特化編
• Google Chrome開発者ツールのTips集 -DOM操作編-

ブラウザーの開発者ツールについては 動かない？そんな時はデバッグをしてみよう！入門編 を見てみてください。

ブラウザーのコンソール画面上で、頻繁に実行するスクリプトがある時
例：kintone.app.record.get();のような レコード詳細画面で、recordオブジェクトの中身を確認したい 場合。

コンソール画面で何度も同じスクリプトを手入力したり、コピペしたりする必要がありません。

まず、Sources > Snippetsタブをクリックし、+ New snippetの+ボタンをクリックします。
すると、新しくsnippetとして登録するスクリプトの画面が表示されるので、snippet名と実行するスクリプトを入力します。
スクリプトを入力し終わったら、以下のコマンドで入力したsnippetを実行できます。

• Windows：Ctrl + Enter
• Mac：Command + Enter

画面右下の再生ボタンをクリックしても実行されます。

一度作成して実行したsnippetは手動で削除しない限り開発者ツール内に保存されるので、再利用できます。
すでに作成したsnippetを利用する場合も、実行手順は同じです。
開発者ツール内のコマンドを利用してSources > Snippets画面を開くこともできます。

開発者ツールのコマンドを実行する画面は、画面右上の[Customize and control Devtools]>[Run command]をクリックして開くことができます。
開発者ツール画面を開いた状態で、以下のコマンドで開くこともできます。

• Windows：Ctrl + Shift + p
• Mac：Command + Shift + p

アプリに適用しているカスタマイズファイルを修正したいが、デバッグの度にカスタマイズファイルをアップロードしたくない時。

ローカルで修正したカスタマイズファイルをアプリの設定画面からアップロードせずに、ブラウザー上で修正したカスタマイズの動作確認ができます。

この方法はローカルにダウンロードしたカスタマイズファイルを実行する方法です。
kintoneアプリに適用しているカスタマイズファイルを直接編集している訳ではないため、ローカルのカスタマイズファイルの編集が終わった後は、別途アプリに適用しているカスタマイズファイルを変更する必要があります。

1. ローカルに任意のフォルダーを用意します。
   Google Chromeからアクセスしても問題ないフォルダーを用意してください。

2. カスタマイズを適用しているkintoneアプリを表示している画面上で、開発者ツールを開きます。

3. Sources > Overridesタブをクリック、[Select folder for overrides]の[+]ボタンを押下し、先ほど作成したフォルダーを選択します。

4. ブラウザーのヘッダー部分に「デベロッパーツールが選択したフォルダーへのアクセスを許可するか」を選択するボタンが現れるので、「許可」をクリックします。

5. Sources > Pageタブをクリックし、アプリに適用しているカスタマイズファイルを選択し、右クリック >[Save for overrides]をクリックします。

   

6. ローカルの作成したフォルダー内に、先ほど選択したカスタマイズファイルがあるので、そのファイルを任意のテキストエディタで開いて、編集して保存します。

7. するとファイルの保存と同時に、ブラウザーに表示されているアプリのカスタマイズファイルも変更されます。

   

開発者ツールを開いた状態で、Sources > Overridesタブ画面上部の[Enable Local Overrides]にチェックが入っている間は、画面をリロードしてもローカルのカスタマイズファイルが適用されます。
[Enable Local Overrides]のチェックを外せば、この状態は解除されます。
ローカルで編集したファイルもそのまま残ります。

ちなみに、ここで紹介した方法の他にもカスタマイズファイルをデバッグする方法をまとめた記事があります。
ぜひ自分の開発環境に最適なデバッグ方法を見つけてみてください！

kintoneカスタマイズファイルのアップロード方法まとめ

画面遷移を伴うカスタマイズのデバッグをする時。

画面遷移しても、コンソール画面に出力されたログを出力し続けられます。
レコード追加/編集画面の保存実行前/保存成功後イベントのイベントハンドラー内での処理をデバッグする時に活用できます。

開発者ツールのConsole画面を開き、画面右上の[Console settings]をクリックします。
表示されたチェックボックスのうち、[Preserve log]にチェックを入れて完了です。

ブラウザー画面全体がわかる画像（スクリーンショット）が欲しい時。

OS毎に搭載されている機能や専用ソフトウェアを利用することなく、ブラウザー画面全体のスクリーンショットを取得できます。

まず、スクリーンショットを取得したい画面上で、開発者ツールを開きます。
画面右上の[Customize and control Devtools]>[Run command]をクリックしてコマンドを実行する画面を表示します。
開発者ツール画面を開いた状態で、以下のコマンドで開くこともできます。

• Windows：Ctrl + Shift + p
• Mac：Command + Shift + p

次に、コマンドを入力する画面で「Capture full size screenshot」を入力すると、以下のコマンドが出てきます。

そのままEnterを押下すると、今表示しているブラウザー画面のスクリーンショットがダウンロードされます。

カスタマイズのデバッグを効率化できそうなGoogle Chrome開発者ツールのTipsの紹介でした。
地味に使えるTipsばかりなので、ぜひフル活用してデバッグにかける時間を減らしていきましょう。
もっと詳しいカスタマイズのデバッグ方法や流れを知りたい方には、 kintoneカスタマイズの基本的なデバッグの流れを身につけよう もおすすめです。
Chromeの最新の情報については、 Chrome DevTools も参照してみてください。

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