ブラウザで見ている画面を動かす歴戦ブックマークレット使ってる？
ブックマークレット (Bookmarklet) とは？
ユーザーがウェブブラウザのブックマークなどから起動して、ウェブブラウザで簡単な処理を行う簡易的なプログラム。
カンタンにいうと
人様のサイトを、自分が使いやすくするために使うよ
人様のサイトを、自分が使いやすくするために使うよ
ブックマークの詳しい説明・作り方・使い方はコチラのページ⇩を見て下さい。
Bookmarklet（ブックマークレット）って何？登録方法と使い方をやさしく解説
Bookmarklet（ブックマークレット）とは？ 登録方法と使い方この作業、毎回手動でやるの面倒だな…そんなときにこっそり活躍してくれるのが Bookmarklet（ブックマークレット） です。実はこれ、ブラウザのブックマークに登録するだ...
qooga.jb-jk.net
作るのはカンタン、でもデバッグの仕方知ってる？
これまでは「多分原因あれや！」て勘と決め打ちで直してた。
長文になったり複雑化して初めて
あー原因わからねー…
調べ方が…あーーーーー!!!!
調べ方が…あーーーーー!!!!
というわけで調べてみました。
デバッグの手順
コンソールを使用する
ブラウザの開発者ツールを開く
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');
コメント