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

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

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

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

ブラウザのブックマークを作り方と同じで、適当なページでURL入力する場所にある『☆』を押します。
適当な名前を付けて保存。

その作ったブックマークを右クリックして『編集』
『URL』にこんな感じ↓でJavaScriptを入力して保存。

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');