Google Chrome 開発者ツールのTips集 -デバッグ効率化編-

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

Index

• はじめに
• ブラウザのコンソール画面上で同じスクリプトを何度も実行したい
• 修正したカスタマイズファイルを何度もアップロードしなくて済むようにしたい
• 画面遷移した時もコンソール画面に出力されたログを残したい
• ブラウザ画面全体のスクリーンショットを取得したい
• まとめ

はじめに

本記事は、「Google Chrome 開発者ツールのTips集シリーズ」の「デバッグ効率化編」になります。

カスタマイズのデバッグを効率化してくれる、Google Chrome の開発者ツール(以下、開発者ツール)の関する Tips を紹介していきます。

本記事でも、kintone のカスタマイズでやりたいことをベースに Tips をまとめているので、目次から気になる Tips に飛んでください。

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

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

▼Google Chrome 開発者ツールのTips集 -DOM操作編-
https://developer.cybozu.io/hc/ja/articles/900000911023

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

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

ブラウザのコンソール画面上で同じスクリプトを何度も実行したい

利用シーン

• ブラウザのコンソール画面上で、頻繁に実行するスクリプトがある時
  • 例：レコード詳細画面上で、レコード情報取得APIを実行してレコードデータを確認するスクリプト

便利ポイント

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

実現方法

まず、Sources > Snippets タブをクリックし、「+ New snippet」の + ボタンをクリックします。

すると、新しくsnippetとして登録するスクリプトの画面が表示されるので、
snippet名と実行するスクリプトを入力します。

そして、スクリプトを入力し終わったら、Ctrl + Enter(Windows) もしくは
Command + Enter(Mac)を押下することで、入力したsnippetが実行されます(※1)。

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

 

一度作成して実行したsnippetは手動で削除しない限り開発者ツール内に保存されるので、再利用することができます。

既に作成した snippet を利用する場合も、実行手順は同じです。

ちなみに開発者ツール内のコマンドを利用して、Sources > Snippets 画面を開くこともできます。

コマンド名	実行される内容
Create new snippet	snippetの新規作成画面を表示
Show snippets	snippetの既存一覧画面を表示

開発者ツールのコマンドを実行する画面は、
画面右上の[Customize and control Devtools] > [Run command]をクリックすることで開くことができます(※2)。

※2 開発者ツール画面を開いた状態で、Ctrl + Shift + p(Windows) もしくは Command + Shift + p(Mac) を押下することで開くこともできます

修正したカスタマイズファイルを何度もアップロードしなくて済むようにしたい

利用シーン

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

便利ポイント

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

注意点

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

実現方法

1. ローカルに任意のフォルダを用意します(※3)。

※3 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 カスタマイズファイルのアップロード方法まとめ
https://developer.cybozu.io/hc/ja/articles/360030433312

画面遷移した時もコンソール画面に出力されたログを残したい

利用シーン

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

便利ポイント

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

実現方法

開発者ツールの Console 画面を開き、画面右上の [Console settings]をクリックします。

表示されたチェックボックスのうち、[Preserve log] にチェックを入れて完了です。

ブラウザ画面全体のスクリーンショットを取得したい

利用シーン

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

便利ポイント

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

実現方法

まず、スクリーンショットを取得したい画面上で、開発者ツールを開いて、
画面右上の[Customize and control Devtools] > [Run command]をクリックしてコマンドを実行する画面を表示します(※4)。

※4 開発者ツール画面を開いた状態で、Ctrl + Shift + p(Windows) もしくは Command + Shift + p(Mac) を押下することで開くこともできます

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

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

まとめ

以上、カスタマイズのデバッグを効率化できそうな Google Chrome 開発者ツールの Tips の紹介でした。

地味に使える Tips ばかりなので、ぜひフル活用して、デバッグにかける時間を減らしていきましょう。

もっと詳しいカスタマイズのデバッグ方法や流れを知りたい方には、
以下の記事もオススメです。

▼kintoneカスタマイズの基本的なデバッグの流れを身につけよう
https://developer.cybozu.io/hc/ja/articles/360038920252

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

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

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