Chrome開発者ツールのTips集シリーズのデバッグ効率化編になります。Chromeの開発者ツール(以下、開発者ツール)に関するTipsを紹介していきます。本記事でも、kintoneのカスタマイズでやりたいことをベースとしてTipsをまとめました。目次から気になるTipsへ飛んでください。本シリーズの過去の記事もぜひ覗いてみてください。動かない?そんな時はデバッグをしてみよう!入門編を見てみてください。レコード詳細画面で、recordオブジェクトの中身を確認したい場合。便利ポイント固定リンクがコピーされましたコンソール画面で何度も同じスクリプトを手入力したり、コピペしたりする必要がありません。snippetの+ボタンをクリックします。すると、新しくsnippetとして登録するスクリプトの画面が表示されるので、snippet名と実行するスクリプトを入力します。スクリプトを入力し終わったら、以下のコマンドで入力したsnippetを実行できます。Enter画面右下の再生ボタンをクリックしても実行されます。一度作成して実行したsnippetは手動で削除しない限り開発者ツール内に保存されるので、再利用できます。作成したsnippetを利用する場合も、実行手順は同じです。Snippets画面を開くこともできます。command]をクリックして開くことができます。開発者ツール画面を開いた状態で、以下のコマンドで開くこともできます。p修正したカスタマイズファイルを何度もアップロードしなくて済むようにしたい固定リンクがコピーされました利用シーン固定リンクがコピーされましたアプリに適用しているカスタマイズファイルを修正したいが、デバッグの度にカスタマイズファイルをアップロードしたくない時。便利ポイント固定リンクがコピーされましたローカルで修正したカスタマイズファイルをアプリの設定画面からアップロードせずに、ブラウザー上で修正したカスタマイズの動作確認ができます。固定リンクがコピーされましたこの方法はローカルにダウンロードしたカスタマイズファイルを実行する方法です。kintoneアプリに適用しているカスタマイズファイルを直接編集している訳ではないため、ローカルのカスタマイズファイルの編集が終わった後は、別途アプリに適用しているカスタマイズファイルを変更する必要があります。固定リンクがコピーされましたローカルに任意のフォルダーを用意します。Chromeからアクセスしても問題ないフォルダーを用意してください。カスタマイズを適用しているkintoneアプリを表示している画面上で、開発者ツールを開きます。overrides]の[+]ボタンを押下し、先ほど作成したフォルダーを選択します。ブラウザーのヘッダー部分に「デベロッパーツールが選択したフォルダーへのアクセスを許可するか」を選択するボタンが現れるので、「許可」をクリックします。overrides]をクリックします。ローカルの作成したフォルダー内に、先ほど選択したカスタマイズファイルがあるので、そのファイルを任意のテキストエディタで開いて、編集して保存します。するとファイルの保存と同時に、ブラウザーに表示されているアプリのカスタマイズファイルも変更されます。Overrides]にチェックが入っている間は、画面をリロードしてもローカルのカスタマイズファイルが適用されます。Overrides]のチェックを外せば、この状態は解除されます。ローカルで編集したファイルもそのまま残ります。ちなみに、ここで紹介した方法の他にもカスタマイズファイルをデバッグする方法をまとめた記事があります。自分の開発環境に最適なデバッグ方法を見つけてみてください!kintoneカスタマイズファイルのアップロード方法まとめ画面遷移した時もコンソール画面に出力されたログを残したい固定リンクがコピーされました利用シーン固定リンクがコピーされました画面遷移を伴うカスタマイズのデバッグをする時。便利ポイント固定リンクがコピーされました画面遷移しても、コンソール画面に出力されたログを出力し続けられます。レコード追加/編集画面の保存実行前/保存成功後イベントのイベントハンドラー内での処理をデバッグする時に活用できます。settings]をクリックします。log]にチェックを入れて完了です。ブラウザー画面全体のスクリーンショットを取得したい固定リンクがコピーされました利用シーン固定リンクがコピーされましたブラウザー画面全体がわかる画像(スクリーンショット)が欲しい時。便利ポイント固定リンクがコピーされましたOS毎に搭載されている機能や専用ソフトウェアを利用することなく、ブラウザー画面全体のスクリーンショットを取得できます。固定リンクがコピーされましたまず、スクリーンショットを取得したい画面上で、開発者ツールを開きます。command]をクリックしてコマンドを実行する画面を表示します。開発者ツール画面を開いた状態で、以下のコマンドで開くこともできます。screenshot」を入力すると、以下のコマンドが出てきます。そのままEnterを押下すると、今表示しているブラウザー画面のスクリーンショットがダウンロードされます。Chrome開発者ツールのTipsの紹介でした。地味に使えるTipsばかりなので、ぜひフル活用してデバッグにかける時間を減らしていきましょう。kintoneカスタマイズの基本的なデバッグの流れを身につけようもおすすめです。参照してみてください。このTipsは、2020年5月版kintoneで動作を確認しています。(cybozu.cn)。