app/Vivaldi/DevTool - 豚吐露＠wiki

Developer Tools

Developer Toolsの使い方のmemo。

Debug

• debugger;

script自体に記載可能なbreak point。
この記述があってdebug toolが利用可能であれば、この構文を実行したタイミングで、勝手にdebug toolが起動してくれる。
VivaldiやChrome、Edgeとかなら"Developer Tools"がそれ。
source fileからbreak pointを指定することが困難な状況で重宝する。

Console

• console.log('%cSTRING', 'css syle')

logにcssが適用される。

• console.table(OBJECT)

指定したobjectを表形式で出力してくれる。
Listの表示とかで便利。

• $

"document.querySelector"のalias。

• $$

"document.querySelectorAll"のalias。

• $0

選択中のDOMを指す。

• $_

直前の式の結果を保持している。

• copy(OBJECT)

OBJECTに変数を指定すると、そのOBJECTの内容を良い感じにclipboardにcopyしてくれる。

• monitorEvents(DOM, EVENT_TYPE)

指定イベントが対象のDOMで発生する度にconsole出力してくれる。

• ライブ式

コンソールタブのフィルタ左の目のアイコン。
変数の値をリアルタイムで表示してくれる。

• console.logがコンソールに表示されない

いくつか理由がある。
1. フィルタが設定されている
以前入力したフィルタが残っていて表示されないパターン。
2. サイドバーの選択を誤っている
エラーが見たいのに、警告を選択している。ユーザーlog(ユーザーメッセージ)を見たいのに、エラーを選択している。など。
とりあえず、サイドバーの一番上の項目を選択しておけばok。
3. コンソールの設定
変な設定になってる。例えば"選択したコンテンツのみ"にcheckが入ってて誤った項目を選択してるなど...

Network

---

更新日： 2023年08月09日 (水) 13時07分36秒