kintoneのカスタマイズのデバッグでよくChrome開発者ツールを使っていましたが、以前勉強会に参加したときにいくつか面白い機能を教わったのでナレッジノートで共有します。
Chrome開発者ツールって何？と思われた方はまずこちらをご参照くださいm(_ _)m
■動かない？そんな時はデバッグをしてみよう！入門編
https://cybozu.dev/ja/id/276232e9085ee17acad8a860/
■目次
- コンソールから簡単にREST APIのサンプル実行できる！
- ショートカットキー「h」で要素非表示できる！
①コンソールから簡単にREST APIのサンプル実行できる！
kintone REST APIのドキュメントにJavaScriptサンプルコードがいくつか記載されています。
例：)レコードの取得（1件）
これらのコードですが、毎回JSを作って編集して試さなくてもChrome開発者ツールなら簡単に試すことができます。
[F12]キーを押して開発者ツールを起動し、コンソールタブを開いて上記のサンプルコードを張り付けてコピーします。
対象のアプリIDとレコードIDは書き換えます。
あとは[Enter]キーで実行するとその場でAPIの動作確認ができます！あまり扱ったことがないAPIもこれなら一瞬で試せますね。
ついでにconsole.log(resp)のところは普通JSON形式で返ってきますが、console.log(JSON.stringify(resp,null," "))とすると、
レスポンスをいい感じに整形した文字列で返してくれます。
コピペに便利なのでこちら是非使ってみてください:)
②ショートカットキー「h」で要素非表示できる！
今度はElementsタブをいじります。ElementsタブではHTMLを表示することができ、スタイルの変更やhtmlの編集等が行えます。
特にプラグインの設定画面やカスタマイズビューをいじるとき、フィールドの要素を取得して色々いじるときに使いますね。
このときよく特定の要素を非表示にしたいのですが、一々編集して消すのは面倒です。そこでショートカットキーのhを押すと・・・
↓ここのラベルの要素が・・・
↓非表示に！「●」マークが横に付くので非表示にした際の目印になります。
使ってみると地味に便利なのでHTML周りで苦戦されている方は是非試してみてください:)
また何か便利そうなネタを見つけたらナレッジノートで紹介させていただきます！
こんなネタあるよ！ってものありましたら是非コメントでもお願いします。