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

著者名:江﨑 全英(サイボウズ株式会社)

目次

はじめに

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

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

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

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

利用シーン

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

便利ポイント

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

実現方法

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

  • Windows:Ctrl + Enter
  • Mac:Command + Enter

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

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

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

開発者ツールのコマンドを実行する画面は、画面右上の[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 (External link) も参照してみてください。

information

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