Google Chromeのディベロッパーツールの使い方メモ
PythonのRequestsを使い、ログイン認証が必要なWebスクレイピングをしたい。
サイトのヘッダーにログインボタンがあり、ダイアログがでてくる仕様になっているサイト。
Chrome上で「F12」ボタン押下しディベロッパーツールを開く。
ElementsパネルでHTMLを見てログインのformを確認してみた。
<div id="login-form" class="modal fade" role="dialog" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <span>ログイン</span> <button type="button" class="close" data-dismiss="modal">× 閉じる</button> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="fl-form-line form-group"> <label for="email" class="require">メールアドレス/<br>ログインID</label> <div class="fl-form pb20"> <input type="text" class="form-control" id="email" placeholder="メールアドレスを入力してください" autocomplete="username"> </div> </div> <div class="fl-form-line form-group"> <label for="password" class="require">パスワード</label> <div class="fl-form pb20"> <input type="password" class="form-control" id="password" placeholder="パスワードを入力してください" autocomplete="current-password"> <div class="checkbox pt0"> <label> <input type="checkbox" class="pwd-toggle" data-target="password"> <span>パスワードを表示する</span> </label> </div> </div> </div> <div class="form-group right mr10 font13"> <a href="/user/forgotpwd">パスワードを忘れた方はこちら</a> </div> <div class="form-group center mt30"> <button type="button" class="btn btn-fl-sm btn-fl-cancel arrow-left-white" data-dismiss="modal"> <span class="pr20 pl30">キャンセル</span> </button> <button type="submit" class="btn btn-fl-sm btn-fl-submit arrow-right-white"> <span class="pr50 pl40">ログイン</span> </button> </div> </form> </div> <div class="modal-footer"> <div>SNSでログイン</div> <div class="mb10"> <button class="link social-button facebook" data-url="/sns/login/facebook" data-ga-cat="User" data-ga-act="Login" data-ga-opt="Facebook"> <span>facebook</span> </button> <button class="link social-button twitter" data-url="/sns/login/twitter" data-ga-cat="User" data-ga-act="Login" data-ga-opt="Twitter"> <span>twitter</span> </button> </div> </div> </div> </div> </div>
ログイン認証の方法について調べると、formからPOSTする要素のname属性やvalue属性を探せばいいみたいだが。。。
ありませんね。。。
ってことで実際に通信を確認しよう。
Networkタグをクリックして開く
Networkタグを開いたままログインしてみる
一瞬「Name」のところに「login」が見えたがどっかいったー
フィルターで「login」を探したがヒットしない
ページ移管したことでクリアされてしまったようだ
ログを保存しておける「Preserve log」にチェックをいれておけば消えないらしい
再度ログイン・・・
「login」見つかりました!
Headersタグを見て「Form Data」にPOSTされたデータが見つかった
ユーザがinputするメールアドレスとパスワード以外はPOSTされるデータがないことが分かった
あと、参考に。
ダイアログでのログインformだったのでrequestsのPOSTするurlはホームにしていたらエラーになったのでなんでかと思ったら
「https://…/login」だったらしい。
これはカーソルをのせたらURLがでてきて判明したのでメモ書き。
とりあえず以上