ブックマークレットを作ってデバッグしたいんじゃ

ブラウザで見ている画面を動かす歴戦ブックマークレット使ってる？

ユーザーがウェブブラウザのブックマークなどから起動して、ウェブブラウザで簡単な処理を行う簡易的なプログラム。
使っていて「足りないなー」という機能を補ったり、ウェブアプリケーションの処理を起動する為に使われる。

とにかく使い勝手が悪いサイトを、自分が使いやすいように使うために使うよ

自分知らなかったので、「多分原因あれや！」て決め打ちで直してた。
でも、長文になったり「原因がわからん！」てとき困った。
なったことなかったのだ、今まで。

というわけで調べてみました。

ブラウザのブックマークを作ります。
本来はURLを入力するところに

javascript:(function() { /*　この中にJavaScriptで処理を書く　*/ })();

を作ります。

例えばアラートを出す場合

javascript:(function() { alert("アラートが出る例"); })();

ブラウザで使いたいサイトを表示させ、先程作ったブックマークを押します。
いつものブックマークを開く感じですね。
先ほどのソースで作っていた場合、アラートが出てきます。

では、次からお待ちかね

Chrome: F12 もしくは Ctrl + Shift + I
Firefox: F12 もしくは Ctrl + Shift + I
Edge: F12 もしくは Ctrl + Shift + I
Safari: メニューから「開発」>「コンソールを表示」

開発者ツールの中の「Console」タブを選択します。

実行後、ここにエラーが出ていたら解りやすいんだけど
元々のソースのエラーもあったりするから、何が原因か読み取れないんだよね

そこで

作ったブックマーカーのソースを丸っとコンソールに貼り付け、Enterキーを押せば実行できます。

ブックマークレットのコードを直接コンソールで実行することで、
そのソース自体の実行結果や取得情報、エラーや警告メッセージを見ることができる。
べんり。

コンソールにエラーメッセージが表示される場合、そこから問題を特定できます。
例えば、要素が見つからなかった場合は「null」や「undefined」と表示されるかと。

ここまでで基本的には解決できる。

そもそもの要素が正しく取得できていないかも？
以下のようにコンソールで1個1個クエリを実行して、要素が取れているか確認してみて。

document.querySelectorAll('.comment');