デベロッパーツールでHTML構成が確認できません

質問

スクレイピングするため、このサイトのHTML構成を確認しようと思ったのですが、添付画像のようにエラーが発生します。

https://data.wingarc.com/scraping-27053
このサイトを見ながら記事のタイトルの情報をスクレイピングしようと思ったのですが、セレクトボタンを押し、スクレイピングしたい範囲を選択しても、手に入れたいデータを指定するタグが見つかりません。マウスカーソルの左上部分に四角い枠が表示されるのですが、この中に目的の情報があるのでしょうか？

回答No.1

4017B · ベストアンサー

質問者が開いているのは [コンソール] になので、これはJS実行時などにシステム側から返されるエラーメッセージ等が一覧表示されるウィンドウです。そのwebページのHTMLタグ等を確認するためには、[要素] という名前のタブ(ウィンドウ)を開けば、いわゆるそのwebページを構成しているHTMLタグを見る事が出来ます。

通常はDefaultなら、ブラウザの [デベロッパーモード:F12] に入ると最初は [要素] がアクティブウィンドウになっているはずですが…何か余計な操作でもしましたか？しかも質問者の環境、何故か [コンソール] 以外のタブが全て非表示になっていますね。ちょっと変です。

とりあえず "MS Edge: DevTools" で行くのであれば、[コンソール] の右に表示されている ＋ をクリックすれば、その他のメニュータブの一覧がずらっと表示されますので。その中から [要素] を選んでみてください。恐らく一番下にあると思いますが…もし無かったら "詰み" ですね。

P.S.
解説記事では「ブラウザはGoogle Chromeを使います」と書いてあるのだから、最低限その通りにして貰わないと最初から詰んでしまい回復不可能になります。

たまに居ますよね。RPGとかの最初の "はじまりの町" でゲーム開始時に「まちを出たら南に行くのじゃ」と言われているのに、何故か無視してズンズンと上に行って倒せない敵に出会って即ゲームオーバーになるのを何回も繰り返す人…言葉は通じるのに話が通じない人(笑)。ま、今後も道中、お気をつけて。

お礼

使用するブラウザの種類がそんなに重要だとは思いませんでした。回答ありがとうございます。

回答No.2

AsarKingChang

先の方と同じ回答になっちゃいますが。
console画面とelement画面がごっちゃ＾＾
まず、言われた通りやってみよう～って
思ったのを先の方がすでに書いてて、
正直その通りだなと。