ブラウザ上のある動作が、どこのJavaScriptのコードで動作しているか検索したい場合

知りたい事

ブラウザ上で要素に適用されている
JavaScriptのコードがどこにあるか
検索を試みたのですが
上手くいかなかったので
改善点などがあれば知りたいです。

やった事

http://upa-pc.blogspot.com/2015/02/javascript-chrome-developer-tool-function-file-line.html

今回は上記のサイトを参照し
自作のボタンを押すだけのページで試してみました。
ボタンのページコードは
下の様なコードになります。

html
1
2<!DOCTYPE html>
3<html lang="en-US">
4  <head>
5    <meta charset="utf-8">
6    <title>Apply JavaScript example</title>
7    <script src="script.js" defer></script>
8  </head>
9  <body>
10    <button class="class1">Click me</button>
11  </body>
12</html>

JavaScript
1function createParagraph() {
2    let para = document.createElement('p');
3    para.textContent = 'ボタンが押されました!';
4    document.body.appendChild(para);
5  }
6  
7  const buttons = document.querySelectorAll('.class1');
8  
9  for(let i = 0; i < buttons.length ; i++) {
10    buttons[i].addEventListener('click', createParagraph);
11  }

ファイル名はこんな感じです

こちらをChromeで開き
問題なく動作することを確認後

参照サイトの通りに
クラス名（class1）をコピーし
開発者ツールを開き
コンソールでペーストして実行してみましたが、
VM1717:1 Uncaught ReferenceError: class1 is not defined
こういったエラーが返ってきます。

調べた事

開発者ツール　JavaScript　どこ
開発者ツール　JavaScript　何行目
開発者ツール　JavaScript　適用　どこ
とかでググってみましたが
今現在の私が参考にできそうなサイトは
上に載せたサイトぐらいした見当たりませんでした。

エラー内容でググたところ
動きを付ける上で「変数」を定義していないから。それかスペルミス。
の様な内容だと見受けられました。
しかし、
今回はちゃんと「変数」を定義しているつもり

なのですが
コンソールでこうでてしまうという事は
何かが問題で変数定義できていない
ということになるのだと思います。

JavaScript　変数
でググって簡単に見てみましたが
おそらく、大丈夫なんじゃないかと思ったので
こちらで質問させていただきました。

質問

何故、クラス名をコンソールに入れてもエラーが出てしまい
適用されているJavaScriptの場所が検索できないのでしょうか？？

教えて頂けると幸いです。
宜しくお願い致します。

行動規範の内容に同意します

回答3件

変数名

VM1717:1 Uncaught ReferenceError: class1 is not defined

コンソールで入力した変数名はclass1ですが、

JavaScript
1const buttons = document.querySelectorAll('.class1');

コード上の変数名はbuttonsです。

DOM

DOM要素ノードはコンソールに出力されても、行数などのコード上の位置情報は出現しません。
HTMLはDOMに変換され、JavaScriptからはDOMとして扱われる為です。
Google Chromeの場合、コンソールに出力した要素ノードを右クリックし、[Reveal in Elements panel] を選択する事で、[Elements] タブ上の要素にジャンプできます。