「JavaScript」タグアーカイブ

Chromeの開発機能を使用してWEBページのセレクタを簡単に見つける方法


WEBページのスクレイピングをする際に、特定の要素のHTMLを知りたい場合があります。

地道にそのコードを目視で追いかける事も可能ですが、てっとり早く調べるには、Chromeの開発機能を使います。

いや~、昔と違って今は便利だな~とつくづく思います。

無茶苦茶便利です。

ChromeでスクレイピングしたいWEBサイトを開きます。

右クリック > Copy

すると色々と表示されます。

Copy element

Copy outerHTML

Copy JS path

Copy styles

Copy XPath

Copy full XPath

これらの何れかを選択します。するとセレクタの文字列がクリップボードにコピーされます。

私はよく、

Copy JS pathやCopy XPathを使用していますが、好みで選択してください。


Google Chrome(グーグルクロム)でJavaScriptのデバッグ方法


JavaScriptの開発・デバッグにはChromeが最適

更新日:2023/1/7

JavaScriptのデバッグを行う場合、Eclipseやサクラエディタでコードを書いて、実際にコードを動かしてデバッグをする場合、Google Chromeが最適です。

IEにも標準で開発ツールがありますが、Chromeの方がサクサク動くので良いです。

あと、序に言うとGoogle Chromeを「クローム」と呼んでいる人がいますが間違いです。正確には「クロム」です

このページではGoogle Chromeを使ったJavaScriptのデバッグテクニックを纏めていきます。

デスマの続く開発現場には、人員不足の為に開発スキルの低い初心者が偽装派遣で送られて来る事があります。

そんな時にベテランPGがいちいちコーディング方法やデバッグ方法を教えると時間のロスです。

このページではChromeを使ったデバッグ方法を自分で言うのもあれですが、かなり細かく解説したつもりです。

開発経験の浅い新人君でも、余程バカで無い限りこのページを読んでもらえれば、簡単にJavaScriptの開発・デバッグが出来る様になると思います。

Google ChromeでJavaScriptをデバッグをする際のポイント

覚えておくべきポイントなどまとめていきます。

WEBページ上で

右クリック > 検証(I) 

を行います。

するとJavaScriptの開発用の画面が開きます。

開発画面が起動したら

①Sourcesタブをクリックします。

すると右側にWEBページで使用されているJavascriptのソースファイルがタブ表示されます。

デバッグを行いたいファイルタブをクリックします。

②ソース(プログラム)の行番号です。

ここをクリックする事でブレークポイントを設定する事が出来ます。

ブレークポイントを外す場合には、もう一度クリックします。

デバッグで使用頻度の高いポイント

以下で紹介して行くデバッグ方法は、全て重要なので覚えておきましょう。

ツールバー上のデバッグアイコンをクリックしてもデバッグできなくは無いですが、効率が悪過ぎます。

このマークをクリックすると、設定済のブレークポイントを一時的に無効にしたり、有効にしたり切り替える事が出来ます。

Deactivate breakpoints 

ショートカット:Control + F8

です。

ステップオーバーボタンです。

Step over next function call 

ショートカット:F10

このステップオーバーというのは、デバッグ中に現在のカーソールを1行ずつ次に進めて行くのに使います。

Visual Studioでのデバッグに慣れてい人には、要らない説明かもしれませんが、初心者用に細かく解説しています。

そしてこれがステップアウトボタンです。

Step out of current function 

ショートカット:Shift + F11

ステップアウトという機能は、ブレークポイントを複数貼ってある状態で、カーソース行を次の行まで進める場合に使用します。

このボタンを押すと、カレント行から次のブレークポイントを貼っている場所までプログラムを一気に走らせる事が出来ます。

リズームボタンと呼ぶことにします。

Resume script execution 

ショートカット:F8

次のデバッグポイントまで結構な行数があったりする場合、ステップイン(F11)を押してチマチマ移動させるよりも、このリズーム機能を使うと効率が良いです。

これはステップインボタンです。

Step into next function call

ショートカット:F11

この機能は、デバッグ中に他の関数(ファンクション)を呼び出している部分で実行すると、その関数の中にデバッグ中のカーソールが移動します。

掘り下げてデバッグを行う場合に使用します。

デバッグ中に変数の上にマウスカーソールを当てると、その変数に格納されている値が吹き出しで表示されます。

ここでは、

var selected_year で定義した値が “2017” と吹き出し表示されていますね。

また、その他にも変数の値を確認する方法があります。

定義済の変数をダブルクリックで選択 >  右クリック > Add selected text to watches

とするとWatchダイアログに変数名とその変数に格納されている値が表示されます。

デバッグを進めていく中で変数の値の変遷をモニタリングしたい場合には、こちらの方法がおすすめです。

この様にして1行ずつそのタイミングにおける変数の値を確認していきます。

また、Control + G ボタンを押すと

Go to line xxx.

という入力項目が起動します。

最初から「:」が頭についていますが、それに続けて数字を入力しEnterを押すとその行にカーソールが自動で移動します。

ここでは、 864と入力してEnterを押して864行目に移動しました。

行数のソースファイルをデバッグする際には大変約に立ちます。覚えておきましょう。

変数の値を確認デバッグ時に変数の値を確認する場合、いちいちデバッグコードを書かなくても、ローカルの中に自動で変数の内容が全て入っています。ここを開けば値を確認する事が出来ます。

また、更にローカルの中に表示された変数の上で

右クリック > プロパティパスを Watch に追加

をクリックすると、「監視」に変数の値が抽出されて表示されます。必要な変数のみ抜き出して表示する事が出来るので大変便利です。

 

最後に

Chromeのデベロッパーツールは無料にも関わらず非常に良く出来ています。ただ、希望を言えば、デバッグ時のショートカットコマンドをVisual Studioと統一して欲しいなーと思います。その方法がIDEごとにショートカットコマンドを覚える必要が無いからです。

 

 


jsoftのプラグインを入れてGoogle Cromeで簡単にJavaScriptの有効・無効を切り替える方法


jsoft(ジェーソフト)というGoogle Crome拡張プラグインをインストールすれば一発

ネットサーフィンをしているとソースコードを見られたくないのか右クリックが出来ない様なサイトがあります。

右クリックさせないサイトがあるとついつい右クリックしてソースを覗きたくなってしまうものです。

この記事ではそういうマニアックな方向けに簡単にJavaScriptをOFFにして右クリックする事ができる方法をご紹介します。
国内版SIMフリー Apple iPhone XR 64GB Red レッド MT062J/A A2106
あれは、JavaScriptで右クリックできなくしているだけです。邪魔臭いですよね。


ソースコードをそもそも見る気がなくてもそんな事をされると見たくなっちゃう!そんな人にお勧めなのは、jsoffというCrome拡張プラグインです。

Cromeからここにアクセスします。
大容量モバイルバッテリー
https://chrome.google.com/webstore/detail/jsoff/kjhbibcocglfnpllfodaiabanmmegomm?hl=ja
大容量 モバイルバッテリー 11200mAh LED
crome%e3%81%ab%e8%bf%bd%e5%8a%a0

アクセスしたらCROMEに追加をクリックします。

jsoff

既に追加済の場合、↑の様な表示になります。

crome%e3%81%ab%e8%bf%bd%e5%8a%a02

初めて追加する場合

「jsoff」を追加しますか?

次の権限にアクセス可能:

・ Cookie、Javascript、プラグイン、位置情報、マイク、カメラなどの機能へのウェブサイトからのアクセスを制御する設定を変更します。

というメッセージが出る場合があります。気にせず

拡張機能を追加をクリックします。

あとは、ブラウザの右上に表示されたこの「ON」をクリックすればJavaScriptを無効に出来ます。

jsoff-on-off


jQueryエラー:js/jquery.min.map 404 (Not Found)


読み込んだ覚えも無いのにcromeでデバッグすると次のエラーメッセージが表示されていました。原因を調べていて解決したのでメモっておきます。

js/jquery.min.map 404 (Not Found) 

 

1つ目の対策

こんなソースを読み込んだ覚えも無かったので調べていたところ

/assets/js/jquery.jsの中に以下のコードを見つけました。

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/

原因はこれなので削除します。

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
*/

こうする事によりJavaScriptのエラーは消えます。

jQueryに手を入れる必要があるのに少し抵抗がある人は2つ目の対策を試してみてください。

 

2つ目の対策

jquery.jsの変更をしたくない場合には、jquery.min.mapをjquery.jsと同じフォルダに置いてあげるとOKです。

 

 


Google Crome を使ってJavaScriptをデバッグするには?


Google Cromeに標準で備わっているJavaScriptデバッガーを使う時の

効率的なショートかっととかのまとめです。

 

一応、Google Cromeの中にある以下のボタンを押す事によりステップオーバー等を行うことも可能ですが、ショートカットコマンドを使った方が効率が良いです。

crome_js

以下にも記していますが、F10のステップオーバーを行う場合には次のアーチ状のアイコンをクリックします。

ステップオーバーするには?

F10を押します。これはVisual Studioと同じデバッグコードです。

crome_f10

 

では、実際によく使うショートカットコマンドを紹介します。

 

ステップオーバーする

F10

ステップインする

F11

JavaScriptのデバッグ実行を有効・無効設定を行う

残念ながらこのショートカットコマンドは、Cromeに用意されていないので以下のアイコンを直接クリックして有効・無効を切り替えます。

crome_stop

 

 

実行中のスコープ内の全変数の値を確認する

Cromeのデバッガを起動すると Scope Variables という部分が表示されるのでそれをクリックします。すると現在デバッグ中のファンクションの中に含まれている全変数の値を確認する事が出来ます。いちいち変数名を選択してAdd Watchなどする必要が無く大変便利な機能です。

crome_scope