【Mac】ドシロウトがChromeでJavaScriptをデバック(確認)してみる

2013年8月28日水曜日

mac アクセス解析

t f B! P L
Th app

はじめに

【Blogger】ブログのクリックイベントをGoogleアナリティクスで計測する簡単な方法という記事で、見ていただいた方からご質問いただきまして、そういえば設置した後にちゃんと動いているか確認するのってどうやるんだろう?と思ってこうやれば確認できるのかな?いや、違うな、などやっていたら完全にハマってしまいました。

自分がずっと適当にやってきていて本当には何も知らないことにいまさら気づきました。
本当にこれで正しいのか未だにわかっていないのですが、悪戦苦闘している姿を書いておきます。






まず基本の基からやってみる

まずChromeで開発ツールを立ち上げてみます。

Macでは、
キー+キー+I
で立ち上がります。

command+option+i
です。

立ち上がったら、Sourcesタブをクリックして、navigatorボタンをクリックします。
あ、VとBを間違えたけど、まぁいいか。
Th Chrome1

該当の記事のhtmlをクリックします。

Th Chrome2

一番下にクリック計測用のjQueryが記載されています。

Th Chrome3

確認したいステップの番号をクリックします。

Th Chrome4


試しに外部リンクをクリックしてみます。

Th Chrome5

デバックモードで止まりました。ずっとこれがちゃんと動いてくれなくて困っていたのですが、記事を書くためにやってみたらなぜかうまくいきました。。なぜだろう。

Th Chrome6

ステップインで確認してみます。

Th Chrome7

外部リンククリック部分が動きました。

Th Chrome8

最後に

なぜ今までうまく動いてくれなかったものが記事を書こうとおもった瞬間にうまく行ったのか全くわかっていなくてすいません。

今まではステップでデバックしようと思っても、リンクした先のjQueryで止まる挙動をしていてなんでだろう?実はちゃんと動いていないのかな?
と思っていたのですが、今回のでちゃんと動いていることが確認できました。

もうちょっとちゃんと勉強します。

以上です。

過去の記事

ラベル

アプリ (545) iPhone (485) mac (244) 買い物 (89) 番外 (87) ブログ (74) 書評 (68) 写真 (64) Blogger (63) 仕事 (55) webサービス (51) 生活 (50) todo (38) tips (36) rss (33) DVD (24) DraftPad (23) music (19) 外食 (14) 機種変更 (14) メール (13) ニュース (12) お出かけ (11) まとめ (11) アクセス解析 (11) HTML (9) ドラマ (8) vba (7) 絵本 (7) Excel (6) Textwell (6) web (4) libreoffice (3) twitter (3) 勉強 (3) basic (2) 素材 (2)

ブログを検索

QooQ