QA@IT

特定のHTMLの要素に結びついたJavaScriptのソースを見る方法

2833 PV

現在QA@ITにある、タグ入力フォームに文字が入力されると自動補完してくれる機能を、自分のサイトにも実装したいと思っています。

そこで、このタグフォームに結びつけられたJavaScriptのソースを読みたいと思ったのですが、どうやってそのソースを特定すればいいかわかりません。

何かDeveloperTool等を使って特定する方法はないでしょうか?

自分はCromeのDeveloper Toolを使っていますが、SafariやFireBug等でもかまいません。

回答

最近のjsは難読化されていることもあり、普通に読もうとするのは結構大変かもしれません。またフレームワーク使用により実装者もテスト中に問題が出ない限りはあんまりコード見ないということもあると思います。

  • 実装したい

自分のサイトにも実装したいと思っています。

この点に言及すれば、他のサイトでまずはそういうフレームワークがないか探されると良いかと思います。jQuery tagjQuery autocompleteで検索すればそういったものが出てくるかと思います。

また使用するWebアプリケーションフレームワークによってはそういうプラグインがある場合もあります。django(pythonのwebフレームワーク)だとtaggitというのがありますね。railsだとact-as-taggable-onとjQueryの組み合わせでしょうか。
せっかく読んでも自サイトに実装するものがそれとは変わってしまう場合もありますのでそのあたりは気を付けてください。

  • ソースを読みたい

いろいろやり方はあると思いますが動的な解析は相手のサーバーに思わぬ負荷をかける可能性があります。他人のサイトへのステップ実行などはこういった場でお勧めできるものではありません。

たとえば仕事で設計書もない本番稼動中のWebアプリの解析が必要になった場合の話をします。この場合も本番稼動中なので影響を考えると動的な解析は難しそうです。そこで静的な解析を考えますが、たとえばブラウザのページをファイルに保存する機能でページを保存すると大体必要な一式が手に入りますので、テキストエディタで参照するなどして htmlソースでそれっぽい javascriptやjsファイルがないか、目的の elementのidやクラス名に着目してその名前で grepしてみるとなにかわかるかもしれません。

くれぐれも対象のサイトに迷惑をかけないようなやり方を心掛けてください。

編集 履歴 (0)
  • なんか回りくどい一文があるのは免責のためです。 -
  • お返事ありがとうございます。JavaScriptの解析は難しいんですね。また参考ライブラリありがとうございました。これで実装してみようと思います。 -

補完はJS無しでもできますよ
http://demo.agektmr.com/datalist/

解析はできますが
ひとえにこうしたら絶対できると言うものではありません
どんな関数が登録されているかはEvent Listnersのタブから簡単に分かるのですが
プラグイン等を使っているとつかみにくいことがあります
その場合はステップ実行と、コード内検索を利用する形になります

編集 履歴 (2)
  • お返事ありがとうございます。

    このようなやり方もあるのですね。複雑じゃない場合はこっちのほうがシンプルでいいですね。

    たしかにEvent Listnersひらいても、jQueryがひっかかりまくりですね。コード内検索でやってみようと思います。ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。